V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
PageSpeed 相关文档
为 NGINX 编译 PageSpeed 支持
ngx_pagespeed
Configuring mod_pagespeed Filters
加载性能测试工具
WebPagetest
Gomez
JCZ2MkKb5S8ZX9pq
V2EX  ›  前端优化

[前端问题]像苹果官网那种滚到一个页面,放一些动画的效果怎么做的?

  •  
  •   JCZ2MkKb5S8ZX9pq · 2021-01-21 09:34:55 +08:00 · 4943 次点击
    这是一个创建于 1396 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这东西有没有现成的轮子?请高手给指个路。

    14 条回复    2021-06-28 16:08:58 +08:00
    LiuJiang
        1
    LiuJiang  
       2021-01-21 09:36:04 +08:00
    问得好,我也想问。
    lanjidechao
        2
    lanjidechao  
       2021-01-21 09:44:12 +08:00
    盲猜是 scrollbar 的事件,codepen 上看到过类似的,可以找找看。
    acthtml
        3
    acthtml  
       2021-01-21 09:44:50 +08:00
    search: 全屏滚动 js
    fullPage.js 能做到上面的效果
    happyeveryday
        4
    happyeveryday  
       2021-01-21 09:45:01 +08:00
    fullpage.js
    xxpandxxp
        5
    xxpandxxp  
       2021-01-21 09:48:49 +08:00 via Android
    这个 b 站好像有教程,b 站或 u2b 搜 codeStartUp
    sixi712
        6
    sixi712  
       2021-01-21 09:51:14 +08:00   ❤️ 2
    b 站有个 up 主讲过。纯 css 实现。https://www.bilibili.com/video/BV1fD4y197NL
    ccraohng
        7
    ccraohng  
       2021-01-21 09:58:08 +08:00 via iPhone
    gsap 自带的 scrollTrigger 或者配合 scrollMagic
    subpo
        8
    subpo  
       2021-01-21 10:00:05 +08:00
    现在当真学什么都上 b 站
    caocong
        9
    caocong  
       2021-01-21 10:16:45 +08:00
    滚动部分的动画就是 js 监听滚动条往 html 里 style 动态写入 css 变量
    再根据变量 calc()计算值放进 transform 里变化

    个人真心不太喜欢视频这种教程
    1 分钟可以看完的文章 视频要做 10 分钟 而且不方便索引跳转
    agdhole
        10
    agdhole  
       2021-01-21 11:36:25 +08:00 via iPhone   ❤️ 2
    yaphets666
        11
    yaphets666  
       2021-01-21 13:14:30 +08:00
    实现这个简单 就监控 scroll 然后操作 dom 就行了 再润色下过度啥的 主要是里头那些动画是最难的
    freakJacker
        12
    freakJacker  
       2021-01-21 13:15:12 +08:00
    监听 scrollTop
    imjamespond
        13
    imjamespond  
       2021-01-21 13:24:06 +08:00 via Android
    这个专业术语叫 parallax 效果
    zzm88
        14
    zzm88  
       2021-06-28 16:08:58 +08:00
    @agdhole 这个很好
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   884 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 21:30 · PVG 05:30 · LAX 13:30 · JFK 16:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.