推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
islujw

页面滑动改变 CSS 值的问题

  •  
  •   islujw · Apr 13, 2018 · 5332 views
    This topic created in 2977 days ago, the information mentioned may be changed or developed.

    这个网页上的许多元素,是随着页面滑动到不同高度,而产生相应的 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 replies    2018-04-15 13:23:45 +08:00
    rabbbit
        1
    rabbbit  
       Apr 13, 2018   ❤️ 2
    islujw
        2
    islujw  
    OP
       Apr 13, 2018
    @rabbbit 谢谢!那如果非单位 1 的 css 属性,比如位置偏移,也可以通过四则运算来达成吧?另外,想要做 iOS 11 的 Large Title 那种,往下拉的时候会轻微放大,但是往上滑动大小不变,这个研究了很久,一直没实现……可有思路?
    Danswerme
        3
    Danswerme  
       Apr 13, 2018 via Android
    @rabbbit 你好,请问这是什么插件?可以即时预览?
    naver1
        4
    naver1  
       Apr 13, 2018   ❤️ 1
    emric
        5
    emric  
       Apr 13, 2018 via iPhone   ❤️ 1
    滚动视差
    xmflswood
        6
    xmflswood  
       Apr 13, 2018
    Danswerme
        7
    Danswerme  
       Apr 13, 2018 via Android
    @DT27 谢谢
    rabbbit
        8
    rabbbit  
       Apr 13, 2018
    @islujw 下拉放大可以用 class 搭配 transition 实现.
    large {
    font-size: 1.5em;
    transition: ease 0.4s;
    }
    // 检测滚动事件,如果是下拉就给元素添加 class
    element.addClass('large')
    rabbbit
        9
    rabbbit  
       Apr 13, 2018   ❤️ 1
    @Danswerme Web Maker
    ChefIsAwesome
        10
    ChefIsAwesome  
       Apr 13, 2018
    就是监听事件,然后做动画。写动画的话,你可以试试这个: https://github.com/blackChef/jkf
    下面这个例子用的滑块控制,滚动是一个道理:
    https://codepen.io/chef/pen/WQEgmJ
    lindongwu11
        11
    lindongwu11  
       Apr 13, 2018
    用 styled-components 很容易实现,如果你在用 React 的话。
    islujw
        12
    islujw  
    OP
       Apr 13, 2018 via iPhone
    @rabbbit 谢谢,但这个可能不太符合,因为放大多少,是和滚动高度相关的,不是瞬时触发的。
    islujw
        13
    islujw  
    OP
       Apr 13, 2018 via iPhone
    @emric 其他非位移的例如透明度、颜色,都可以用这个做吗?
    erosripe
        14
    erosripe  
       Apr 13, 2018 via Android
    滚动动画换成滤镜
    wangxiaoaer
        16
    wangxiaoaer  
       Apr 13, 2018
    @lindongwu11 #11 styled-components 解决了什么问题?有什么实际意义?

    IDE 支持这种 js 里面 css 的格式化吗
    islujw
        17
    islujw  
    OP
       Apr 13, 2018
    @xmflswood 谢谢!这个非常好。但在使劲下拉页面时,无法让元素轻微放大(像 iOS 11 的 Large Title 那样),因为是浏览器让页面有下拉弹性,但网页本身元素的位置不变。这里有个做到了这个效果的: http://johnpolacek.github.io/scrollorama/ 页面上的「 ZOOM IN 」就是使劲下拉可以轻微放大的,但我试了之后似乎没发做到他这样,而且他的代码显示初始放大为 8,但可以看到他初始似乎是 scale(4.045),所以才导致往下拉可以放大。不知道是如何做到的。
    islujw
        18
    islujw  
    OP
       Apr 14, 2018
    @xmflswood 搞定了,可以做到强制下拉放大,只要设为 to 负值即可。这个 js 是完全符合预想的,简单易用,谢谢!
    islujw
        19
    islujw  
    OP
       Apr 15, 2018
    @xmflswood 是否还有办法做到延迟呢?如果有些许延迟,可以做到轻盈漂浮的效果。比如 https://www.apple.com/macbook/ 页面的 section.section-osx nopreload 区块的图片。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1462 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 51ms · UTC 16:33 · PVG 00:33 · LAX 09:33 · JFK 12:33
    ♥ Do have faith in what you're doing.