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.

🤔️有没有方法可以就让提供 scroll progress timeline 的元素是 .scroll 呢? 有, 请各位客官看这里👉scroll-timeline👈

谢谢你看到这里😊

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

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

相关文章

Vue3中快速简单使用CKEditor 5富文本编辑器

Vue3简单使用CKEditor 5 前言准备定制基础配置富文本配置目录当前文章demo目录结构 快速使用demo 前言 CKEditor 5就是内嵌在网页中的一个富文本编辑器工具 CKEditor 5开发文档&#xff08;英文&#xff09;&#xff1a;https://ckeditor.com/docs/ckeditor5/latest/index.htm…

DBMS_RESOURCE_MANAGER

参考文档&#xff1a; Database Administrator’s Guide 27 Managing Resources with Oracle Database Resource Manager 27.5.5 Creating a Resource Plan BEGINDBMS_RESOURCE_MANAGER.CREATE_PENDING_AREA();DBMS_RESOURCE_MANAGER.CREATE_PLAN(PLAN > bugdb_plan,…

SpringMVC:从入门到精通,7篇系列篇带你全面掌握--三.使用SpringMVC完成增删改查

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于SpringMVC的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 效果演示 一.导入项目的相关依赖 二.…

港联证券:大数据看北上资金胜率:整体跑赢市场,六成持股浮亏

一直以来&#xff0c;北上资金被称为“聪明资金”&#xff0c;其一举一动备受出资者重视。盛名之下&#xff0c;其战绩究竟如何&#xff1f;复盘前史数据发现&#xff0c;北上资金全体业绩跑赢沪深300指数&#xff0c;但现在持仓个股浮亏占比约六成。 8月&#xff0c;北上资金…

npm publish包报404,is not in the npm registry错误

1. 指定发布目标2. 登录npm&#xff0c;使用登录名发布包&#xff0c;包名命名原则“登录名/包名”&#xff0c;或 “包名” 3. 删除某一个版本npm unpublish pvfhv/eslint-config-prettier1.0.1 --force 删除后的版本不能重复使用&#xff0c;正式解释&#xff1a; Unfortun…

containerd的安装和使用

containerd的安装和使用 1、containerd介绍 containerd 是从 docker 项目中剥离出来的一个容器运行时、几乎囊括了容器管理的所有功能&#xff0c;并且 containerd 内置了 CRI 插件&#xff0c;k8s 的 kubelet 组件可以直接调用 containerd&#xff0c;相较于 docker 容器运…

无涯教程-JavaScript - IMLOG2函数

描述 IMLOG2函数以x yi或x yj文本格式返回复数的以2为底的对数。可以从自然对数计算复数的以2为底的对数,如下所示- $$\log_2(x yi)(log_2e)\ln(x yi)$$ 语法 IMLOG2 (inumber)争论 Argument描述Required/OptionalInumberA complex number for which you want the bas…

【web开发】4.JavaScript与jQuery

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、JavaScript与jQuery二、JavaScript常用的基本功能1.插入位置2.注释3.变量4.数组5.滚动字符 三、jQuery常用的基本功能1.引入jQuery2.寻找标签3.val、text、appe…

static关键字和final关键字

在java的关键字中&#xff0c;static关键字和final关键字是两个必须掌握的关键字。static关键字和final关键字用法多样&#xff0c;且在一定环境下使用&#xff0c;可以提高程序的运行性能&#xff0c;优化程序的结构。下面将依次介绍static关键字和final关键字。注意&#xff…

关于scipy库的入门教程

本教程将介绍如何使用Scipy库进行科学计算和数据分析。Scipy是一个基于NumPy的开源Python库&#xff0c;提供了很多高级的数学函数和科学计算工具。 安装Scipy库 在开始教程之前&#xff0c;首先需要安装Scipy库。可以使用以下命令进行安装&#xff1a; pip install scipy导入…

go的gin框架实现接受多个图片和单个视频并保存到本地服务器的接口

首先是接受多个图片的接口&#xff0c;就是接受多个文件 收到post请求后首先创建一个文件夹&#xff0c;这里利用uuid创建出唯一标识字符串作为文件夹名称&#xff0c;解析表单中的一串文件循环保存到本地服务器 package mainimport ("github.com/gin-gonic/gin"&q…

iveiw 时间验证

最近遇到在使用iview框架时&#xff0c;在商家后端管理系统中&#xff0c;在合同发布时会使用到form表单组件&#xff0c;当然日期也通常出现在搜索 框表单中&#xff0c;但是有时候会出现日期组件校验错误的情况 首先&#xff0c;iview采用的是async-validator的校验规则&…

SwiftUI简单基础知识学习

以下是一个大致的学习计划&#xff0c;将SwiftUI的知识分成12个主题&#xff1a; SwiftUI 简介和基础语法视图和布局状态和数据流按钮和用户输入列表和数据展示导航和页面传递动画和过渡效果手势和交互绘制和绘图多平台适配网络和数据请求实际项目实践和高级主题 每个主题可以…

go开发之个微机器人的二次开发

请求URL&#xff1a; http://域名/addRoomMemberFriend 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明wId是String登录实例标识chatRoom…

如何把Android Framework学彻底?一条龙学习

Framework通俗易懂 平时学习 Android 开发的第一步就是去学习各种各样的 API&#xff0c;如 Activity&#xff0c;Service&#xff0c;Notification 等。其实这些都是 Framework 提供给我们的。Framework 层为开发应用程序提供了非常多的API&#xff0c;我们通过调用这些 API …

系统数据大屏开发适配方案。

原理&#xff1a;通过css样式transform的属性scale实现展示盒子的缩放实现适配。 直接上干货&#xff1a; 监听屏幕的缩放&#xff1a; mounted() {this.$nextTick(() > {this.changeScale()})window.addEventListener(resize, this.changeScale); //监听屏幕的缩放},be…

约瑟夫环实现

约瑟夫环 约瑟夫环小游戏&#xff1a;把小朋友按照编号1&#xff0c;2&#xff0c;3&#xff0c;…&#xff0c;n围成一圈&#xff0c;指定编号为k的小朋友从1开始报数&#xff0c;数到m的小朋友出队。接着他的下一位小朋友再次从1报数&#xff0c;以此类推&#xff0c;直到所有…

计算机毕业设计 基于SSM的问卷调查管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

uniApp常见面试题-附详细答案

uniApp中如何进行页面跳转&#xff1f; 答案&#xff1a;可以使用uni.navigateTo、uni.redirectTo和uni.reLaunch等方法进行页面跳转。其中&#xff0c;uni.navigateTo可以实现页面的普通跳转&#xff0c;uni.redirectTo可以实现页面的重定向跳转&#xff0c;uni.reLaunch可以实…

qt day 5

实现局域网的网络聊天室功能 1>服务器代码 --------------------------------------------------------------- widget.h --------------------------------------------------------------- #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMes…