页面滑动改变 CSS 值的问题

[islujw]

这个网页上的许多元素，是随着页面滑动到不同高度，而产生相应的 CSS 值的变化，从而带来动画效果的：

https://www.apple.com/cn/ios/augmented-reality/

例如这个 DOM： h3.app-headline.typography-headline > div.app-animated-word > div.will-change

页面滑动，它的 transform 值在改变，而且反向滑动也可以。

这是怎样实现的？有类似的 js 可用吗？我想做其他属性的改变，例如透明度等。

[rabbbit]

[islujw]

@rabbbit 谢谢！那如果非单位 1 的 css 属性，比如位置偏移，也可以通过四则运算来达成吧？另外，想要做 iOS 11 的 Large Title 那种，往下拉的时候会轻微放大，但是往上滑动大小不变，这个研究了很久，一直没实现……可有思路？

[Danswerme]

@rabbbit 你好，请问这是什么插件？可以即时预览？

[DT27]

@Danswerme #3 https://jsfiddle.net/

[emric]

滚动视差

[xmflswood]

basicScroll
https://github.com/electerious/basicScroll

[Danswerme]

@DT27 谢谢

[rabbbit]

@islujw 下拉放大可以用 class 搭配 transition 实现.
large {
font-size: 1.5em;
transition: ease 0.4s;
}
// 检测滚动事件,如果是下拉就给元素添加 class
element.addClass('large')

[rabbbit]

@Danswerme Web Maker

[ChefIsAwesome]

就是监听事件，然后做动画。写动画的话，你可以试试这个： https://github.com/blackChef/jkf
下面这个例子用的滑块控制，滚动是一个道理：
https://codepen.io/chef/pen/WQEgmJ

[lindongwu11]

用 styled-components 很容易实现，如果你在用 React 的话。

[islujw]

@rabbbit 谢谢，但这个可能不太符合，因为放大多少，是和滚动高度相关的，不是瞬时触发的。

[islujw]

@emric 其他非位移的例如透明度、颜色，都可以用这个做吗？

[erosripe]

滚动动画换成滤镜

[learnshare]

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

[wangxiaoaer]

@lindongwu11 #11 styled-components 解决了什么问题？有什么实际意义？

IDE 支持这种 js 里面 css 的格式化吗

[islujw]

@xmflswood 谢谢！这个非常好。但在使劲下拉页面时，无法让元素轻微放大（像 iOS 11 的 Large Title 那样），因为是浏览器让页面有下拉弹性，但网页本身元素的位置不变。这里有个做到了这个效果的： http://johnpolacek.github.io/scrollorama/ 页面上的「 ZOOM IN 」就是使劲下拉可以轻微放大的，但我试了之后似乎没发做到他这样，而且他的代码显示初始放大为 8，但可以看到他初始似乎是 scale(4.045)，所以才导致往下拉可以放大。不知道是如何做到的。

[islujw]

@xmflswood 搞定了，可以做到强制下拉放大，只要设为 to 负值即可。这个 js 是完全符合预想的，简单易用，谢谢！

[islujw]

@xmflswood 是否还有办法做到延迟呢？如果有些许延迟，可以做到轻盈漂浮的效果。比如 https://www.apple.com/macbook/ 页面的 section.section-osx nopreload 区块的图片。