PageSpeed 相关文档
› 为 NGINX 编译 PageSpeed 支持
› ngx_pagespeed
› Configuring mod_pagespeed Filters
加载性能测试工具
› WebPagetest
› Gomez
JCZ2MkKb5S8ZX9pq

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

  •  
  •   JCZ2MkKb5S8ZX9pq · Jan 21, 2021 · 6770 views
    This topic created in 2111 days ago, the information mentioned may be changed or developed.

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

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

    个人真心不太喜欢视频这种教程
    1 分钟可以看完的文章 视频要做 10 分钟 而且不方便索引跳转
    agdhole
    agdhole
    Jan 21, 2021 via iPhone❤️2
    10
    yaphets666
    yaphets666
    Jan 21, 2021
    11
    实现这个简单 就监控 scroll 然后操作 dom 就行了 再润色下过度啥的 主要是里头那些动画是最难的
    freakJacker
    freakJacker
    Jan 21, 2021
    12
    监听 scrollTop
    JQD6r41PkI4o2mEz
    JQD6r41PkI4o2mEz
    Jan 21, 2021 via Android
    13
    这个专业术语叫 parallax 效果
    zzm88
    zzm88
    Jun 28, 2021
    14
    @agdhole 这个很好
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1354 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 93ms · UTC 22:25 · PVG 06:25 · LAX 14:25 · JFK 17:25
    ♥ Do have faith in what you're doing.