苹果官网 iphone12 文字渐变效果

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

收藏
评论区

相关推荐

iOS 11更新后以及iPhone X推出后工程中遇到的问题及适配
1.UITableView滑动时右侧的滑动条忽长忽短的乱跳以及MJRefresh上拉刷新死循环 这是因为tableView在iOS11默认使用SelfSizing,tableView的estimatedRowHeight、estimatedSectionHeaderHeight、estimatedSectionFooterHeight三个高度估算属性由默
js动态生成二维码
需求:项目需要根据链接实时生成二维码,当检测终端是PC时,将当前项目链接生成二维码供用户手机端使用 判断终端是否为mobile function isMobile () { let flag navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile
Dart教程(一):dart安装
一、安装dart sdk brew tap dartlang/dart brew install dart 二、安装VSCode 去官网下载即可 三、安装dart插件 (https://imghelloworld.osscnbeijing.aliyuncs.com/af7d1de25caf6599a4839b56f4f0d
opencv.js人脸识别简单使用
前端使用opencv 最近了解了下opencv,看了下官方的实例和文档 opencvjs文档入口 3.3.1版本(https://docs.opencv.org/3.3.1/d5/d10/tutorial_js_root.html) 看了官方示例的网页结构 基本上所有的实例都用到了两个js 核心js:opencv.js 工具js:utils.js 官方
苹果官网 iphone12 文字渐变效果
1、0 今天无意间在看视频时,发现了一个up主实现iphone12官网的文字效果,闲来无事,自己也来弄弄看,先看看官网效果 这里搞了一个gif,不过也可以
开工了,面试官的黑话,你知道哪些套路
1、入职有培训:其实就是老员工花60分钟,跟你讲公司的规章制度。 2、公司90后居多:都是年轻精力充沛的,进来跟公司一起吃苦吧。 3、公司有成长性:意思就是杂事特多,可以学到很多东西,但就是不精。 4、面试结束回去等通知:别等了,90%石沉大海,年轻人换别家吧。 5、薪资处于领先水平:公司给员工租的房子,可以免费住,省去住宿费比其它人公司好。 6、
PassFab iPhone Backup Unlocker(itunes备份密码找回神器)官方中文版V5.2.10.2 | iphone备份密码解除工具下载 | itunes备份密码忘记怎么办
PassFab iPhone Backup Unlocker 是来自PassFab公司的一款新型iphone备份密码解除工具,兼容主流版本的IOS系统和苹果产品,拥有人性化的功能、出色的性能以及强悍且独家研发的解密技术可确保百分百恢复或删除iPhone备份密码,内置词典攻击、掩码攻击以及暴力攻击三种高级itunes备份密码恢复模式,能帮助广大果粉快速解锁找回
Python数据分析实战(1)数据分析概述
一、入门数据分析 1.大数据时代的基本面大数据产业发展现状:现在数据已经呈现出了爆炸式的增长,每一分钟可能就会有: 13000个iPhone应用下载 Twitter上发布98000新微博 发出1.68亿条Email 淘宝双十一10680个新订单 12306出票1840张在大数据时代,出现了三大变革: 从随机样本到全量数据
JavaScript 是什么?
前言 引用《JavaScript 高级程序设计第四版》中说的话 ——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。 面试官:JavaScript 是什么? 我:
面试官:JavaScript的数据类型你了解多少?
前言作为JavaScript的入门知识点,Js数据类型在整个JavaScript的学习过程中其实尤为重要。最常见的是边界数据类型条件判断问题。我们将通过这几个方面来了解数据类型: 概念 检测方法 转换方法 概念undefined、Null、Boolean、String、Number、Symbol、BigInt为基础类型;Ob
「uniapp」封装请求拦截和响应拦截
uniapp官方的请求方式首先我们先看一下uni官方给开发者提供的uni.request用来网络请求的apiuni.request( url: '', method: 'GET', data: , header:, success: res , fail: () , complete: () );可以看到我们每次请求数据的时候都需要按照这个格式来请求,
盘点3个可以操作JavaScript的Python库
前言我们都知道Python可以很轻松的实现某些功能,而且还可以编写网页,比如Remi,Pysimplegui,但是操作JavaScript这种浏览器的脚本语言,还是第一次听说,小编也是第一次听说,于是就跟大家脑补这一知识。 一、PyExecJS是一个可以执行JavaScript脚本的Python模块,可以与网页上的JavaScript进行交互,这样就能更加
阿里巴巴技术专家之作,吊打面试官系列!
美团 一面: 1、ConcurrentHashMap实现原理 2、HashMap实现原理 3、锁的实现原理 4、synchronized和重入所实现原理以及区别 5、一个char[]数组,里面有空格,以&结束。 6、jvm内存模型,都存什么。以及垃圾回收算法,垃圾回收器。 7、内存溢出的场景 8、设计模式,以及自己使用的场景。 9、Sping的AOP实现原
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写