苹果官网 iphone12 文字渐变效果

1、0

今天无意间在看视频时，发现了一个up主实现iphone12官网的文字效果，闲来无事，自己也来弄弄看，先看看官网效果

这里搞了一个gif，不过也可以看出效果啦，由于本人是米粉，就不奉上苹果官网链接了。

2、分析

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

栗子：

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

3、代码实现

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

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

background-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%);
letter-spacing: 2px;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
background-size: 400% 100%;
background-position-x: 100%;

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

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

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

4、代码实现

class SetAnimation {
	// 当前效果元素
    ele = null  
    // 屏幕视口高度
    pageHeight = 0
    // 百分比
    eleTopRatio = 1
    constructor(){
        this.ele = null
        this.eleTopRatio = 1
    }
    // 初始化 获取屏幕高度和元素
    init(element,pgHeight){
        this.ele = element
        this.pageHeight = pgHeight
        // 监听滚动事件
        this.addLister()
    }
    getScrollRatio() {
    	// 获取元素距离顶部的距离
        let viewObj = this.ele.getBoundingClientRect();
        let eleTop = Math.abs(viewObj.top);
      
        // 设置百分比，当元素出现在可视位置 开始渐变
        if( eleTop  <  this.pageHeight ){
            this.eleTopRatio = eleTop / this.pageHeight
        }
        this.eleTopRatio >= 1 ? this.eleTopRatio = 1 : '';
        this.ele.style.backgroundPositionX = `${this.eleTopRatio * 100}%`;
    }
    addLister(){
        window.addEventListener('scroll',this.getScrollRatio.bind(this),false)
    }
    removeLister(){
        window.removeEventListener('scroll',this.getScrollRatio.bind(this),false)
    }
}

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

let viewHeight = window.innerHeight || Math.max(document.documentElement.clientHeight, document.body.clientHeight)

let setAni = new SetAnimation()
let test = document.querySelector('.test_h3')
setAni.init(test,viewHeight)

效果如下：

5、总结

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