苹果官网 iphone12 文字渐变效果

1、0

今天无意间在看视频时，发现了一个up主实现iphone12官网的文字效果，闲来无事，自己也来弄弄看，先看看官网效果 这里搞了一个gif，不过也可以看出效果啦，由于本人是米粉，就不奉上苹果官网链接了。

2、分析

要实现文字渐变颜色，其实是 css 将文字设置为透明，背景图 颜色渐变，可以理解为 字是透明的，背景是黑的，所以映过来，字就是白色的了，这部分代码可以直接百度

栗子：

1background: linear-gradient(90deg,#e8a93f,#fff8aa);
2-webkit-background-clip: text;
3color: transparent;
4letter-spacing: 2px;

3、代码实现

3.1 首先，通过上面的代码我们可以容易的实现渐变文字的效果，那么 如果实现拉滚动条时，文字慢慢出现的效果呢？

3.2 其实，我们可以监听滚动事件，动态来改变背景图（白色-->黑色背景）的位置，这样就可以实现 文字渐变的效果

1background-image: linear-gradient(75deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33.33%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%);
2letter-spacing: 2px;
3color: transparent;
4background-clip: text;
5-webkit-background-clip: text;
6background-size: 400% 100%;
7background-position-x: 100%;

解析： 我们设置，白色到黑色渐变，并且分成四部分，文字透明，背景图大小，也搞成 4倍，最后可以动态设置 背景图的位置，进而达到文字渐变的效果

如果还不太明白，这样看： 背景颜色从左到右依次是：纯白，比较白，比较黑，纯黑 动态改变 背景图的位置：25%(纯白)，50%(比较白)，70%(比较黑)，100%(纯黑)

这样就比较清晰了，把这一块渐变黑的背景图，根据 距离顶部的百分比，慢慢改变位置，也就实现了上述效果。

4、代码实现

1class SetAnimation {
2	// 当前效果元素
3    ele = null  
4    // 屏幕视口高度
5    pageHeight = 0
6    // 百分比
7    eleTopRatio = 1
8    constructor(){
9        this.ele = null
10        this.eleTopRatio = 1
11    }
12    // 初始化 获取屏幕高度和元素
13    init(element,pgHeight){
14        this.ele = element
15        this.pageHeight = pgHeight
16        // 监听滚动事件
17        this.addLister()
18    }
19    getScrollRatio() {
20    	// 获取元素距离顶部的距离
21        let viewObj = this.ele.getBoundingClientRect();
22        let eleTop = Math.abs(viewObj.top);
23      
24        // 设置百分比，当元素出现在可视位置 开始渐变
25        if( eleTop  <  this.pageHeight ){
26            this.eleTopRatio = eleTop / this.pageHeight
27        }
28        this.eleTopRatio >= 1 ? this.eleTopRatio = 1 : '';
29        this.ele.style.backgroundPositionX = `${this.eleTopRatio * 100}%`;
30    }
31    addLister(){
32        window.addEventListener('scroll',this.getScrollRatio.bind(this),false)
33    }
34    removeLister(){
35        window.removeEventListener('scroll',this.getScrollRatio.bind(this),false)
36    }
37}

通过上面的代码，我们可以获取一个实例，初始化，进而实现，当然写法有很多种，不一定是类

1let viewHeight = window.innerHeight || Math.max(document.documentElement.clientHeight, document.body.clientHeight)
2
3let setAni = new SetAnimation()
4let test = document.querySelector('.test_h3')
5setAni.init(test,viewHeight)
6

效果如下：

5、总结

最主要的是get到，动态改变背景图的位置来实现渐变效果，同时百分比的计算也重点之一，还有一些可以完善的，比如，文字渐渐消失时，也可以有渐变效果，细节地方肯定还是有很多的。