这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

CSS 滚动驱动动画 scroll()

animation-timeline 通过 scroll() 指定可滚动元素与滚动轴来为容器动画提供一个匿名的 scroll progress timeline.

通过元素在顶部和底部(或左边和右边)的滚动推进 scroll progress timeline. 并且元素滚动的位置会被转换为百分比, 滚动开始被转化为 0%, 滚动结束被转化为 100%

如果 scroll() 指定的滚动轴不包含滚动条, 也就是元素在滚动轴的方向不可滚动, 那么 timeline 的进度为 0%.

语法

scroll() 可以接受两个参数

  • 滚动元素: 滚动元素提供 scroll progress timeline. 可以取值

    • nearest: (默认值)设置 animation-timeline 元素最近的、具有滚动条的祖先元素.
    • root: 文档的根元素, 即 <html> 元素
    • self: 设置 animation-timeline 的元素自身
  • 滚动轴:
    • y: 垂直滚动轴
    • x: 水平滚动轴
    • block: (默认值)与滚动容器中行内文本方向垂直的轴. 对于从左到右书写的文字, 与 y 相同. 对于从上到下书写的文字, 与 x 相同.
    • inline: 与滚动容器中行内文本方向水平的轴. 对于从左到右书写的文字, 与 x 相同. 对于从上到下书写的文字, 与 y 相同.

这两个参数的书写顺序没有要求, 但是参数之间没有逗号, 这一点我一定要强调, 因为 translate 这个函数的参数就需要有逗号!!!

实例

正常举例

下面以背景渐变举例, 并且滚动容器就是元素自身.

@keyframes bg-color {

  from {

    background-color: lightpink;

  }

  to {

    background-color: lightskyblue;

  }

}

.box {

  width: 200px;

  height: 300px;

  border: 1px solid #bbb;

  overflow: auto;

  animation: bg-color linear;

  animation-timeline: scroll(self);

}

如果我们加上下面的代码, 改变文字书写方向, 从上到下, 从左到右

html { writing-mode: vertical-lr; }

最近滚动祖先?

来看一个例子, 这个例子出现了问题, 为什么动画没有效果呢? 注意这里我们使用了两个非 static 定位的元素.

<div class="relative">

  <div class="scroll">

    <div class="absolute"></div>

  </div>

</div>
.relative {

  position: relative;

}

.absolute {

  position: absolute;

  animation: bg-color linear;

  animation-timeline: scroll();

}

.scroll {

  height: 200px;

  overflow: auto;

}

为什么元素在滚动时背景没有变化呢? scroll() 不是寻找最近滚动祖先元素吗? 是的, 但是在寻找最近祖先元素时这个祖先元素必须可以影响其位置和大小. 因为元素是 absolute, 那么可以影响其位置和大小的祖先元素显然不是 .scroll 而是 .relative.

本文转载于:

https://juejin.cn/post/7274555781486673977

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

记录--CSS 滚动驱动动画 scroll()的更多相关文章

  1. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  2. aos.js超赞页面滚动元素动画jQuery动画库

    插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...

  3. 滚动锚定（Scroll Anchoring）- 让视口内容不再因视口上方 DOM 元素的高度变化而产生跳动

    不知道你有没有经历过这样的场景:当你打开一张“多图杀猫”的页面后,正一张图一张图边滚边看,在你刚准备定睛看某一张图的时候,这张图突然被它上面的内容挤到了视口下方,然后你赶紧把滚动条往下拉,试图追赶这张 ...

  4. scrollReveal.js – 页面滚动显示动画JS

    简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的  JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是  WOW.js  的动画只播放一次,而 ...

  5. 纯css滚动视差

    1.何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术.效 ...

  6. scrollreveal(页面滚动显示动画插件支持手机)

    scrollreveal.js是一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的js插件.该插件通过配置可以在页面滚动,元素进入视口时产生炫酷的动画效果,同时还支持元素的3D效果,非常的实用. ...

  7. 一款很好用的页面滚动元素动画插件-AOS.JS

    aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 加载方法 ...

  8. ScrollReveal-元素随页面滚动产生动画的js插件

    简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 scro ...

  9. css实现边框动画效果

    最近写了几个页面都用到css动画,以及很多before,after伪类.在此记录一下成果.css边框循环动画,页面效果如下: 1.沿着边框动画的图形使用before,after伪类写的.当时想用切图来 ...

  10. 每日CSS_滚动页面动画效果

    每日CSS_滚动页面动画效果 2021_1_13 源码链接 1. 代码解析 1.1 html 代码片段 <section> <h2>开 始 滑 动</h2> < ...

随机推荐

  1. CF1913

    C 先用桶记录各个位数量. 对于每次询问,从低位到高位扫,先用掉一个当前位的,然后把当前位的全部转化成 \(cnt/2\) 个更高位的. D 有一个思路:其实删区间可以视作删相邻两个数.(然鹅这题不是 ...

  2. Power BI 12 DAY

    电商平台流量分析 案例练习 参数建模 建模-->新建参数 新建度量值使用SWITCH函数将需要的指标数据化 15.关键指标 = switch([指标选择 值],1,[1.访客数合计],2,[2. ...

  3. 2023年多校联训NOIP层测试6

    2023年多校联训NOIP层测试6 打了 \(10min\) 骗分,就溜了. T1 弹珠游戏 \(0pts\) 没听懂讲评,暂时咕了. T2 晚会 \(20pts\) 部分分( \(20pts\) ) ...

  4. 从零开始的react入门教程（五），了解react中的表单，何为受控组件与非受控组件

    壹 ❀ 引 我们在从零开始的react入门教程(四),了解常用的条件渲染.列表渲染与独一无二的key一文中介绍了react中常用的条件渲染操作,比如三元运算符,逻辑运算符等,结合react组件或者re ...

  5. NEMU PA 4 实验报告

    一.实验目的 在前面的PA123中,我们分别实现了基本的运算单元,实现了各种指令和程序的装载,实现了存储器的层次结构.而在PA4中,为了让NEMU可以处理异常情况以及和外设交互,我们要做的事情有以下: ...

  6. CF1829H Don't Blame Me

    题目链接 题解 知识点:线性dp,位运算. 考虑设 \(f_{i,j}\) 表示考虑了前 \(i\) 个数字,与和为 \(j\) 的方案数.转移方程显然. 注意初值为 \(f_{0,63} = 1\) ...

  7. NC53074 Forsaken喜欢独一无二的树

    题目链接 题目 题目描述 ​ 众所周知,最小生成树是指使图中所有节点连通且边权和最小时的边权子集. ​ 不过最小生成树太简单了,我们现在来思考一个稍微复杂一点的问题. ​ 现在给定一个 \(n\) 个 ...

  8. 双哈希_Birthday_Cake

    Birthday Cake 思路:找到每个串的公共前后缀,统计公共前后缀之间的字符串的hash值,并判断所给n个串中是否存在符合条件的串 eg:abbddab 对于该串,我们不难发现,公共前后缀是ab ...

  9. Mac M1 在PyCharm中安装（支持GPU）TensorFlow 方法

    本文介绍在Mac M1的PyCharm中安装TensorFlow与创建工程的方法,在2021的MacBook Pro (M1 Max处理器)验证OK. 安装TensorFlow与创建工程是在Minif ...

  10. EXPLAIN命令

    EXPLAIN命令   除了以SELECT开头的查询语句,其余的DELETE.INSERT.REPLACE以及UPDATE语句前边都可以加上EXPLAIN这个词儿,用来查看这些语句的执行计划   Ty ...