页面滑动改变 CSS 值的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2417 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

滑动

div

CSS

页面

19 条回复 • 2018-04-15 13:23:45 +08:00

rabbbit

2018-04-13 03:16:11 +08:00

islujw

2018-04-13 03:37:39 +08:00

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

Danswerme

2018-04-13 07:57:35 +08:00 via Android

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

DT27

2018-04-13 08:06:18 +08:00

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

emric

2018-04-13 09:20:33 +08:00 via iPhone

滚动视差

xmflswood

2018-04-13 10:26:11 +08:00

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

Danswerme

2018-04-13 10:55:11 +08:00 via Android

@DT27 谢谢

rabbbit

2018-04-13 12:03:54 +08:00

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

rabbbit

2018-04-13 12:04:53 +08:00

@Danswerme Web Maker

ChefIsAwesome

2018-04-13 12:13:43 +08:00

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

lindongwu11

2018-04-13 14:53:06 +08:00

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

islujw

2018-04-13 19:28:56 +08:00 via iPhone

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

islujw

2018-04-13 19:29:31 +08:00 via iPhone

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

erosripe

2018-04-13 19:45:16 +08:00 via Android

滚动动画换成滤镜

learnshare

2018-04-13 19:53:13 +08:00

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

wangxiaoaer

2018-04-13 20:58:54 +08:00

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

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

islujw

2018-04-13 22:51:38 +08:00

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

islujw

2018-04-14 05:08:52 +08:00

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

islujw

2018-04-15 13:23:45 +08:00

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