› Closure: The Definitive Guide
这个网页上的许多元素，是随着页面滑动到不同高度，而产生相应的 CSS 值的变化，从而带来动画效果的：
https://www.apple.com/cn/ios/augmented-reality/
例如这个 DOM： h3.app-headline.typography-headline > div.app-animated-word > div.will-change
页面滑动，它的 transform 值在改变，而且反向滑动也可以。
这是怎样实现的？有类似的 js 可用吗？我想做其他属性的改变，例如透明度等。
 |
1
rabbbit Apr 13, 2018  2
 |
 |
2
islujw OP @rabbbit 谢谢！那如果非单位 1 的 css 属性，比如位置偏移，也可以通过四则运算来达成吧？另外，想要做 iOS 11 的 Large Title 那种，往下拉的时候会轻微放大，但是往上滑动大小不变，这个研究了很久，一直没实现……可有思路？
|
 |
4
naver1 Apr 13, 2018 1
|
 |
5
emric Apr 13, 2018 via iPhone 1
滚动视差
|
 |
6
xmflswood Apr 13, 2018
basicScroll
https://github.com/electerious/basicScroll |
|
8
rabbbit Apr 13, 2018
@islujw 下拉放大可以用 class 搭配 transition 实现.
large { font-size: 1.5em; transition: ease 0.4s; } // 检测滚动事件,如果是下拉就给元素添加 class element.addClass('large') |
 |
10
ChefIsAwesome Apr 13, 2018
就是监听事件，然后做动画。写动画的话，你可以试试这个： https://github.com/blackChef/jkf
下面这个例子用的滑块控制，滚动是一个道理： https://codepen.io/chef/pen/WQEgmJ |
 |
11
lindongwu11 Apr 13, 2018
用 styled-components 很容易实现，如果你在用 React 的话。
|
 |
14
erosripe Apr 13, 2018 via Android
滚动动画换成滤镜
|
 |
15
learnshare Apr 13, 2018
|
 |
16
wangxiaoaer Apr 13, 2018
|
|
17
islujw OP @xmflswood 谢谢！这个非常好。但在使劲下拉页面时，无法让元素轻微放大（像 iOS 11 的 Large Title 那样），因为是浏览器让页面有下拉弹性，但网页本身元素的位置不变。这里有个做到了这个效果的： http://johnpolacek.github.io/scrollorama/ 页面上的「 ZOOM IN 」就是使劲下拉可以轻微放大的，但我试了之后似乎没发做到他这样，而且他的代码显示初始放大为 8，但可以看到他初始似乎是 scale(4.045)，所以才导致往下拉可以放大。不知道是如何做到的。
|
|
19
islujw OP @xmflswood 是否还有办法做到延迟呢？如果有些许延迟，可以做到轻盈漂浮的效果。比如 https://www.apple.com/macbook/ 页面的 section.section-osx nopreload 区块的图片。
|
Select Language