苹果官网 iphone12 文字渐变效果

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

1、0

今天无意间在看视频时,发现了一个up主实现iphone12官网的文字效果,闲来无事,自己也来弄弄看,先看看官网效果 苹果官网 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)

效果如下: 苹果官网 iphone12 文字渐变效果

5、总结

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

收藏
评论区

相关推荐

苹果官网 iphone12 文字渐变效果
1、0 今天无意间在看视频时,发现了一个up主实现iphone12官网的文字效果,闲来无事,自己也来弄弄看,先看看官网效果 这里搞了一个gif,不过也可以
PassFab iPhone Backup Unlocker(itunes备份密码找回神器)官方中文版V5.2.10.2 | iphone备份密码解除工具下载 | itunes备份密码忘记怎么办
PassFab iPhone Backup Unlocker 是来自PassFab公司的一款新型iphone备份密码解除工具,兼容主流版本的IOS系统和苹果产品,拥有人性化的功能、出色的性能以及强悍且独家研发的解密技术可确保百分百恢复或删除iPhone备份密码,内置词典攻击、掩码攻击以及暴力攻击三种高级itunes备份密码恢复模式,能帮助广大果粉快速解锁找回
JavaScript 是什么?
前言 引用《JavaScript 高级程序设计第四版》中说的话 ——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。 面试官:JavaScript 是什么? 我:
IOS中常用的知识总结(二)
16、程序启动画面大小    iOS设备现在有三种不同的分辨率:iPhone 320x480、iPhone 4 640x960、iPad 768x1024。以前程序的启动画面(图片)只要准备一个 Default.png 就可以了,但是现在变得复杂多了。下面就是 CocoaChina 会员做得总结     如果一个程序,
IOS推送通知机制和流程
APNS的推送机制 ========= #### Provider就是我们自己程序的后台服务器,APNS是Apple Push Notification Service的缩写,也就是苹果的推送服务器。 上图可以分为三个阶段: 第一阶段:应用程序的服务器端把要发送的消息、目的iPhone的标识打包,发给APNS。 第二阶段:APNS在自身的已注册P
10个必需的iOS开发工具和资源
转自:http://coolshell.cn/articles/5089.html 界面总不是一件很容易事,尤其是iPhone/iPad的界面,做过iOS开发的程序员,一定会感到开发iPhone/iPad的界面是一件多么不容易的事。下面的文章来自[10 Essential iOS Developer Tools & Resources](https://w
iOS 开发屏幕适配尺寸
iPhone 4                   width  320                 height  480 iPhone 5/5s            width  320                 height   568 iPhone 6                  width  375    
Angular和Vue.js 深度对比
> 本文翻译自:https://dzone.com/articles/comparing-progressive-javascript-frameworks-angula > > 转载请注明出自:[葡萄城官网](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.grapecity.c
Could not find iPhone 6 simulator
最近原来的老项目有点问题需要处理一下,运行启动命令,就报了如下错误,提示找不到iPhone 6 模拟器。 react-native run-ios Owaiss-Mac:pdm owaisahmed$ react-native run-ios Found Xcode project pdm.xcodeproj
Fiddle设置iphone抓包
_注意:保证手机和电脑在一个网络上_ **一,设置Fiddler** ![输入图片说明](https://static.oschina.net/uploads/img/201707/27100350_ckfa.png "在这里输入图片标题") ![输入图片说明](https://static.oschina.net/uploads/img/201707
H5接入app准入报告
功能标准 ![](http://static.oschina.net/uploads/space/2016/0725/160658_qiJY_1032182.png) ![](http://static.oschina.net/uploads/space/2016/0725/160850_gQgJ_1032182.png) iPhone性能标准 ![
Node.js简介及如何学习Node.js
本文介绍Node.js的诞生史以及如何学习Node.js。 Node.js简史 --------- 从Node.js的命名上可以看到,Node.js的官方开发语言是JavaScript。之所以选择使用JavaScript,显然与JavaScript的开发人员多有关。总所周知,JavaScript是伴随着互联网的发展而火爆起来的,JavaScript也是前
Python 面向对象
面向对象 ==== ### 面向对象 * 与面向过程对比:二狗子准备结婚,需要盖房子 * 面向过程:数学逻辑的映射,学会做个好员工 * 面向对象:生活逻辑的映射,学会做个好领导 * 生活实例 * 类: 人 手机 电脑 * 对象
Surge 开启脚本功能后,京东自动签到总结
本人小白,花费半天时间才弄好,写下这个给自己和后来人指路。 Surge 开启脚本功能后,京东自动签到获取京豆总结: 1、注意 去 Raw 真实地址下载 js  https://github.com/NobyDa/Script/blob/master/JD-DailyBonus/JD\_DailyBonus.js 将下载好的文件放在 /我的iphone
TTS入门--ios
一.基本常识 TTS(Text To Speech),语音合成手艺,是指把原本的文本信息转换成能够发音的语音旌旗灯号,在GPS导航等需要人机交互斗劲多的场所经常会用到。 iPhone系统自己没有供给TTS引擎,可是可以使用外部数据的体例使iPhone具有TTS功能。 二.具体介绍 今朝找到两种可以在iPhone上免费使用TTS的体例,一种是使用Acap