V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
islujw
V2EX  ›  JavaScript

页面滑动改变 CSS 值的问题

  •  
  •   islujw · 2018-04-13 01:35:07 +08:00 · 4824 次点击
    这是一个创建于 2424 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    19 条回复    2018-04-15 13:23:45 +08:00
    rabbbit
        1
    rabbbit  
       2018-04-13 03:16:11 +08:00   ❤️ 2
    islujw
        2
    islujw  
    OP
       2018-04-13 03:37:39 +08:00
    @rabbbit 谢谢!那如果非单位 1 的 css 属性,比如位置偏移,也可以通过四则运算来达成吧?另外,想要做 iOS 11 的 Large Title 那种,往下拉的时候会轻微放大,但是往上滑动大小不变,这个研究了很久,一直没实现……可有思路?
    Danswerme
        3
    Danswerme  
       2018-04-13 07:57:35 +08:00 via Android
    @rabbbit 你好,请问这是什么插件?可以即时预览?
    DT27
        4
    DT27  
       2018-04-13 08:06:18 +08:00   ❤️ 1
    emric
        5
    emric  
       2018-04-13 09:20:33 +08:00 via iPhone   ❤️ 1
    滚动视差
    xmflswood
        6
    xmflswood  
       2018-04-13 10:26:11 +08:00
    Danswerme
        7
    Danswerme  
       2018-04-13 10:55:11 +08:00 via Android
    @DT27 谢谢
    rabbbit
        8
    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
        9
    rabbbit  
       2018-04-13 12:04:53 +08:00   ❤️ 1
    @Danswerme Web Maker
    ChefIsAwesome
        10
    ChefIsAwesome  
       2018-04-13 12:13:43 +08:00
    就是监听事件,然后做动画。写动画的话,你可以试试这个: https://github.com/blackChef/jkf
    下面这个例子用的滑块控制,滚动是一个道理:
    https://codepen.io/chef/pen/WQEgmJ
    lindongwu11
        11
    lindongwu11  
       2018-04-13 14:53:06 +08:00
    用 styled-components 很容易实现,如果你在用 React 的话。
    islujw
        12
    islujw  
    OP
       2018-04-13 19:28:56 +08:00 via iPhone
    @rabbbit 谢谢,但这个可能不太符合,因为放大多少,是和滚动高度相关的,不是瞬时触发的。
    islujw
        13
    islujw  
    OP
       2018-04-13 19:29:31 +08:00 via iPhone
    @emric 其他非位移的例如透明度、颜色,都可以用这个做吗?
    erosripe
        14
    erosripe  
       2018-04-13 19:45:16 +08:00 via Android
    滚动动画换成滤镜
    learnshare
        15
    learnshare  
       2018-04-13 19:53:13 +08:00
    wangxiaoaer
        16
    wangxiaoaer  
       2018-04-13 20:58:54 +08:00
    @lindongwu11 #11 styled-components 解决了什么问题?有什么实际意义?

    IDE 支持这种 js 里面 css 的格式化吗
    islujw
        17
    islujw  
    OP
       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
        18
    islujw  
    OP
       2018-04-14 05:08:52 +08:00
    @xmflswood 搞定了,可以做到强制下拉放大,只要设为 to 负值即可。这个 js 是完全符合预想的,简单易用,谢谢!
    islujw
        19
    islujw  
    OP
       2018-04-15 13:23:45 +08:00
    @xmflswood 是否还有办法做到延迟呢?如果有些许延迟,可以做到轻盈漂浮的效果。比如 https://www.apple.com/macbook/ 页面的 section.section-osx nopreload 区块的图片。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2354 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 01:56 · PVG 09:56 · LAX 17:56 · JFK 20:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.