search

zsqk / news

每日新闻.
https://zsqk.github.io/news/
MIT License
10 stars 1 forks source link

备稿计划: scroll-driven animations #138

Open iugo opened 4 months ago

iugo commented 4 months ago

滚动驱动的动画

scroll-driven animations

其中两条核心是: animation-timeline: view(), animation-range

可以实现的效果例子为:

  1. 在信息瀑布流的形式下, 增加信息显示过渡效果.
  2. 在 navigation bar 需要在滚动后固定时, 显示过渡动画效果.

之前, 上述动画也是可以通过 JS 算法实现, 但为了实现平滑的效果, JS 需要频繁执行, 效率很低. 并且开发难度也被增加了.

现在就是又简单, 又高效. 问题只是浏览器支持度不够, 比如 FireFox 稳定版暂时不支持, Safari 没有跟进.

可想象空间还有很大, 比如下述页面给出的例子: https://scroll-driven-animations.style/

更多视频资料见: https://goo.gle/learn-scroll-driven-animations