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