Apple？apple！

今天是day1

通过使用Codingstartup的TriggerJs

先跟着Steven实现了Iphone13的开场推送

无意间找到了Steven老师的页面制作

感觉收益颇多

澳门独特的口音

给大陆的我带来许多惊喜

跟着steven老师学习第一天

心得体会

background-image: conic-gradient(#0f2257,#1d41a5,#1d3781,#90f1fe,#06153e,#06153e
);

通过渐变旋转的形式实现的背景图片

逼格满满

原效果：

https://www.apple.com/iphone-13-pro/

模仿效果

实现的效果一览

核心实现：


<div id="container2"tg-ref="container" tg-name="opacity" tg-from="-1" tg-to="10"tg-step="1"><span tg-name="opacity" tg-filter="2!"tg-map="2: 1"tg-follow="container"> A dramatically more powerful camera system. </span><span tg-name="opacity" tg-filter="3!"tg-map="3: 1"tg-follow="container"> A display so responsive, every interaction feels new again.</span><span tg-name="opacity" tg-filter="4!"tg-map="4: 1"tg-follow="container"> The world’s fastest smartphone chip. Exceptional durability.</span><span tg-name="opacity" tg-filter="5!"tg-map="5: 1"tg-follow="container"> And a huge leap in battery life.</span><span tg-name="opacity" tg-filter="6,7"tg-map="6: 0.3;7: 1"tg-follow="container"> Let’s Pro.</span><br><span tg-name="opacity" tg-filter="7,8"tg-map="7: 0.3 ;8: 1" style=" font-size: 24px ">From $41.62/mo. for 24 mo. or $999 </span>

利用TriggerJs库中的tg-from， tg-filter，tg-map，tg-follow

通过 CSS 变量，获取制作页面滚动动画所需的值，毋须编写任何 JavaScript 代码。

tg-name 为接收滚动值的 CSS 变量名称，是否加上 -- 前缀都可。

tg-from 根据页面卷动情况由from处逐渐增加

tg-map 将一个值映射至另一个值。格式：value: newValue; value2: newValue2。也支持同时将多个值映射至另一个值：value,value2,value3: newValue

tg-steps from与to 之间触发多少次

tg-step 步长

tg-filter 仅当滚动值在列表当中时才触发，格式：1,3,5,7,9。默认情况下，过滤模式是 retain（保留值），在设定值末端加入 !

很容易就实现了自己对于诸如

文字缩小放大
文字渐入
文字亮灯效果
文字跳转
文字打字机模式打入
…….

源码详见：https://github.com/shiyi-ale/iphone13

Apple？apple！相关推荐

android pay 绑定失败,实战Apple Pay失败！Android Pay你期待吗？
原标题:实战Apple Pay失败!Android Pay你期待吗? ▲这两天朋友圈最热议的话题相信就是Apple Pay入华的重磅消息了,自2月18日凌晨5点上线以来,短短一天时间已有三千万张银行卡 ...
外汇天眼：Apple与MetaQuotes之争！谁是下一个Apple？谁会成下一个MT4/5？
手机巨头Apple 从其应用商店App Store中下架领先的交易软件MetaTrader4(MT4)和 MetaTrader5(MT5)引发了外汇市场热议. 虽然截止发稿,Apple以及交易软件MT ...
平板第三方电容笔怎么样？apple pencil一代平替笔推荐
我是一位数码产品的爱好者,所以我对电容笔也有一定的了解.我认为,苹果的原装电容笔和一般的电容笔的区别,在于它们所能产生的压感效果不同.由于苹果的电容笔具有独特的"重力压感",因此, ...
SitePoint Podcast＃122：重要吗？没有！
Episode 122 of The SitePoint Podcast is now available! This week the panel is made up of Patrick O'K ...
Attention？Attention！
下文主要是结合自己的理解翻译自:Attention?Attention! 注意力(Attention)在近些年成为深度学习领域一个极其受欢迎的概念,同时作为一个强有力的工具也被集成到了各种模型中来处理 ...
秋招要跪？不怕！领走这份机器学习求职攻略
AI人才严重缺乏,2018年秋招提前批的"AI人才争夺战"已经开启,许多有意跳槽的小伙伴也在跃跃欲试.但是,你真的准备好了吗? 为了拿到Dream Offer,通过面试必然十分关键 ...
请问这个解法的时间复杂度怎么分析？谢谢！
请问这个解法的时间复杂度怎么分析?谢谢! 转载于:https://www.cnblogs.com/codingtmd/archive/2013/04/01/5079018.html
(天国之扉文章抢救) 1/10/2003 总结？总结！
总结?总结! 最近的主题,是怀念. "机动战士高达SEED"."圣斗士星矢-冥王篇"."MACROSS ZERO",当你连续看到这三部动画在 ...
以前的的华为手机可不可以用鸿蒙系统_鸿蒙系统面世之后，以前的华为手机可以用鸿蒙系统吗？不好意思！...
鸿蒙系统面世之后,以前的华为手机可以用鸿蒙系统吗?不好意思! 华为是我国第一大手机厂商,也是一家具有十足创新力的公司,有着相当多的专利技术,不过手机的方面依旧系统才是核心技术,而华为为了避免这样的垄断 ...

Apple？apple！

Apple？apple！

今天是day1

心得体会

原效果：

模仿效果

实现的效果一览

Apple？apple！相关推荐

最新文章

热门文章