记录--CSS 滚动驱动动画 scroll()

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

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

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/70275.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高教社杯数模竞赛特辑论文篇-2018年A题:高温作业服设计(附获奖论文及MATLBA代码)

目录 【摘要】 1 问题重述 1.1 问题背景 1.2 求解问题 2 问题分析 2.1 问题一分析

2309docx07样式

使用风格 访问风格 使用"Document.styles"属性访问风格: document Document() styles document.styles styles <docx.styles.styles.Styles object at 0x10a7c4f50>Styles对象可字典访问风格: styles["Normal"] <docx.styles.style._Paragr…

Android图形-组件-比较与理解

目录 引言 BufferQueue 和 Gralloc 概念 源码位置&#xff1a; 图形缓冲区的流转情况&#xff1a; BufferQueue 的特性&#xff1a; BufferQueue的跟踪工具-systrace&#xff1a; Gralloc 受保护的缓冲区 Surface 和 SurfaceHolder Canvas rendering SurfaceHolder…

【C++基础】4. 变量

文章目录 【 1. 变量的定义 】【 2. 变量的声明 】示例 【 3. 左值和右值 】 变量&#xff1a;相当于是程序可操作的数据存储区的名称。在 C 中&#xff0c;有多种变量类型可用于存储不同种类的数据。C 中每个变量都有指定的类型&#xff0c;类型决定了变量存储的大小和布局&am…

Jenkins实现基础CD操作

操作截图 在Jenkins里面设置通过标签进行构建 在Jenkins中进入项目&#xff0c;配置以下 将execute shell换到invoke top-level maven targets之前 在gitlab中配置标签 代码迭代新的版本 项目代码迭代 修改docker-compose.yml 提交新版本的代码 在Jenkins中追加新…

有趣的前端面试题

1、nums 的值是多少&#xff1f; 请问输出是什么&#xff1f; const len 5const nums []for (var i 0; i < len; i);{ nums.push(i 1)} console.log(nums) 分析与解答 首先&#xff0c;我认为这个问题并不是考察应聘者的编程能力。他正在检查候选人是否有眼睛方面的…

【Spring Boot】分页

分页查询 分页查询是日常开发中比较常用的功能。MyBatis框架下也有很多插件实现分页功能&#xff0c;比如pageHelper。这是一款非常简单、易用的分页插件&#xff0c;能很好地集成在Spring Boot中。pageHelper是一款基于MyBatis的数据库分页插件&#xff0c;所以我们在使用它时…

第5节-PhotoShop基础课程-颜色模式

文章目录 前言1. 色彩的常用模式1位图模式1.位图模式 2. 灰度模式1.如何把图像变为灰色2.灰度模式下是无法画出彩色的 3. RGB模式4.CMYK模式1.cyan 青色2.magenta平红色3.yellow 黄色4.黑色 5.LAB模式6.颜色空间 6.颜色填充1.色彩基础1.色相 H 2.拾色器3.颜色填充4.前后背景颜色…

【Cisco Packet Tracer】管理方式,命令,接口trunk,VLAN

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

软件设计师(十)网络与信息安全基础知识

计算机网络是由多台计算机组成的系统&#xff0c;与传统的单机系统、多机系统相比有很大的区别。 一、网络概述 计算机网络是计算机技术与通信技术相结合的产物&#xff0c;它实现了远程通信、远程信息处理和资源共享。 1、计算机网络的概念 计算机网络的定义是利用通信设备…

数学建模--时间序列预测模型的七种经典算法的Python实现

目录 1.开篇版权提示 2.时间序列介绍 3.项目数据处理 4.项目数据划分可视化 5.时间预测序列经典算法1&#xff1a;朴素法 6.时间预测序列经典算法2&#xff1a; 简单平均法 7.时间预测序列经典算法3&#xff1a;移动平均法 8.时间预测序列经典算法4&#xff1a;简单指…

C++学习记录——삼십이 C++IO流

文章目录 1、C标准IO流2、C文件IO流1、二进制读写2、文本读写 3、stringstream 1、C标准IO流 C语言的printf和scanf无法很好的输入输出自定义类型&#xff0c;且还需要程序员自己确定类型&#xff0c;所以C就引入了输入流和输出流&#xff0c;是设备和内存之间的沟通。 其实io…

Matlab信号处理2:方波信号的合成与分解

周期信号可展开为傅里叶级数&#xff0c;因此方波信号可用若干谐波去拟合。以下是Matlab的实现&#xff1a; %% 方波信号的分解% 1.生成方波信号 % 方波信号周期、基波频率 T0 2; w0 (2 * pi) / T0; % 方波信号值为1的区间 T1 0.5; % 绘图周期&#xff1a;(2*n1)个周期 n …

java利用aop来记录接口的请求耗时、请求参数、请求url等详细信息

最近在项目里面需要对一些controller接口进行记录。记录的信息包括&#xff0c;接口的耗时、请求参数、请求url、是否成功、请求的ip地址。 最后利用aop切面编程。 Order(1) Aspect Component Slf4j public class BehaviorAop {AutowiredBehaviorService behaviorService;/**…

C语言结构体的初始化方式

逐个初始化字段&#xff1a;这是最直接的方式&#xff0c;你可以逐个为结构体的每个字段进行初始化。 struct Student { char name[50]; int age; float marks; }; struct Student student1 {"Alice", 20, 89.5}; 2.使用结构体字面值初始化&#xff1a;这种方…

Elasticsearch 分布式搜索——聚合

1.聚合的种类 聚合常见的有三类&#xff1a; **桶&#xff08;Bucket&#xff09;**聚合&#xff1a;用来对文档做分组 TermAggregation&#xff1a;按照文档字段值分组&#xff0c;例如按照品牌值分组、按照国家分组Date Histogram&#xff1a;按照日期阶梯分组&#xff0c;例…

用户忠诚度:小程序积分商城的用户保持方法

随着移动互联网的蓬勃发展&#xff0c;小程序积分商城已经成为了许多企业私域营销的热门选择。这个商城不仅可以吸引用户参与&#xff0c;还可以提高用户的忠诚度&#xff0c;进一步加深用户与品牌的互动关系。然而&#xff0c;要实现用户的忠诚度&#xff0c;需要一系列的策略…

C++的内存管理是怎样的?

目录 C的内存管理代码段数据段BSS段堆区映射区栈区 C的内存管理 在C中&#xff0c;虚拟内存分为代码段、数据段、BSS段、堆区、文件映射区、栈区六部分&#xff1a; 代码段 包括只读存储区和文本区&#xff0c;其中只读存储区存储字符串常量,文本区存储程序的机器代码。 数据…

生信豆芽菜-机器学习筛选特征基因

网址&#xff1a;http://www.sxdyc.com/mlscreenfeature 一、使用方法 1、准备数据 第一个文件&#xff1a;特征表达数据 第二个文件&#xff1a;分组信息&#xff0c;第一列为样本名&#xff0c;第二列为患者分组 第三个文件&#xff1a;分析基因名 2、选择机器学习的方…

【C语言】入门——结构体

目录 结构体 为什么有结构体&#xff1f; 1.结构体的声明 1.2结构体变量的访问和初始化 2.结构体成员的访问 结构体 struct 结构体类型 {//相关属性; }结构体变量; 结构体和数组不同&#xff0c;同一类型的数据的集合是数组&#xff1b; 结构体是多种类型的数据的集合&…