苹果官网 iphone12 文字渐变效果

请叫我海龟先生 等级 173 0 0

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到,动态改变背景图的位置来实现渐变效果,同时百分比的计算也重点之一,还有一些可以完善的,比如,文字渐渐消失时,也可以有渐变效果,细节地方肯定还是有很多的。

预览图
收藏
评论区