当前位置: 首页 > news >正文

CSS 滚动驱动动画 scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis )

  • scroll-timelinescroll-timeline-name❤️scroll-timeline-axis
    • 解决问题
    • 语法
      • animation-timeline-name
      • animation-timeline-axis

scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis )

在 scroll() 的最后我们遇到了因为定位问题导致滚动效果失效的情况, 当然 CSS 允许我们手动指定滚动容器, 也就是哪个容器来提供 scroll progress timeline. 我们需要在提供时间线的滚动容器上声明 scroll-timeline 属性.

再次重温 scroll progress timeline, 这个时间线(timeline)是通过滚动容器(scroller)上下或左右方向的滚动推进的. 开始滚动的位置表示时间线处在 0%, 滚动结束的位置表示时间线 100%. 如果 0%100% 的位置相同, 比如容器根本不滚动, 那么时间线不会推动.

解决问题

下面的代码是不生效, 原因很简单, 当 scroll() 采用默认值时, 其第一个默认参数是 nearest, 这时就会寻找离当前元素最近的父级滚动元素. 你可能以为是 .scroll, 但实际上不是.

因为在寻找滚动元素的时候需要这个滚动元素能够影响当前元素的位置和大小, 又因为当前元素的 positionabsolute, 所以可以影响其位置和大小的元素要么是 body, 要么是 positionstatic 的元素. 换言之, 最终找到的就是 .relative, 而 .relative 根本不会滚动, 所以我们不论怎么滑动 .scroll 都不会看到任何变化.

<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 {scroll-timeline: --youHaveToBeThis;
}
.absolute {/* animation-timeline: scroll(); */animation-timeline: --youHaveToBeThis;
}

在这里插入图片描述

语法

animation-timeline 实际上包括 animation-timeline-nameanimation-timeline-axis 的简写属性, 后者是可选的.

如果同时制定两个值, 那么顺序一定是先 animation-timeline-nameanimation-timeline-axis

animation-timeline-name

  • none: 没有名字
  • 自定义名称: 其定义名称必须以 -- 开头. 这样可以避免与 CSS 关键字冲突.

animation-timeline-axis

可选的值是 block(默认值), inline, y, x, 具体的意思可以参考 scroll().

如果滚动容器在 animation-timeline-axis 方向上没有内容溢出, 或者溢出被隐藏, 那么将不会创建对应的时间线

谢谢你看到这里😊

相关文章:

CSS 滚动驱动动画 scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis )

scroll-timelinescroll-timeline-name❤️scroll-timeline-axis 解决问题语法 animation-timeline-nameanimation-timeline-axis scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis ) 在 scroll() 的最后我们遇到了因为定位问题导致滚动效果失效的情况, 当…...

9.19号作业

2> 完成文本编辑器的保存工作 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QFontDialog> #include <QFont> #include <QMessageBox> #include <QDebug> #include <QColorDialog> #include <QColor&g…...

Mybatis学习笔记9 动态SQL

Mybatis学习笔记8 查询返回专题_biubiubiu0706的博客-CSDN博客 动态SQL的业务场景&#xff1a; 例如 批量删除 get请求 uri?id18&id19&id20 或者post id18&id19&id20 String[] idsrequest.getParameterValues("id") 那么这句SQL是需要动态的 还…...

element表格 和后台联调

1.配置接口 projectList:/api/goods/xxx,//产品列表2.请求接口(get请求默认参数page) // 产品列表 pageprojectList(params){return axios.get(base.projectList,{params})}3.获取数据 直接放到created里边去了 刷新页面就可以看到 async projectList(page){let res await t…...

基于SSM的智慧城市实验室主页系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

怒赞,阿里P8推荐的Java面试宝典:41个专题PDF(史上最全+面试必备)

《尼恩Java面试宝典》 40岁老架构师 尼恩 经过对大量 Java面试题 的不断梳理、迭代&#xff0c; 编著成5000页的《尼恩Java面试宝典》&#xff0c;致力于体系化&#xff0c; 系统化&#xff0c;形象化 梳理&#xff0c;形成一个大的知识体系&#xff0c;从而帮助大家 进大厂&a…...

线程池各个参数设置说明

1. corePoolSize 核心线程数 看处理业务属于IO密集型还是属于cpu密集型IO密集型: 通常设置为N1&#xff0c;还有一个计算公式&#xff1a;线程数 cpu数*&#xff08;线程等待时间/线程总的处理时间&#xff09; 但是由于服务器除了这个服务可能还部署有其他服务&#xff0c;…...

springBoot对接多个mq并且实现延迟队列---未完待续

mq调用流程 创建消息转换器 package com.wd.config;import org.springframework.amqp.support.converter.Jackson2JsonMessageConverter; import org.springframework.amqp.support.converter.MessageConverter; import org.springframework.context.annotation.Bean; import o…...

Pytorch从零开始实战04

Pytorch从零开始实战——猴痘病识别 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——猴痘病识别环境准备数据集模型选择模型训练数据可视化其他模型图片预测 环境准备 本文基于Jupyter notebook&#xff0c;使用Python3.8&#xff0c;Pytor…...

北大C++课后记录:文件读写的I/O流

前言 文件和平常用到的cin、cout流其实是一回事&#xff0c;可以将文件看作一个有限字符构成的顺序字符流&#xff0c;基于此&#xff0c;也可以像cin、cout读键盘数据那样对文件进行读写。 读写指针 输入流的read指针 输出流的write指针 注&#xff1a;这里的指针并不是普…...

详解Linux的grep命令

2023年9月19日&#xff0c;周二晚上 先写这么多吧&#xff0c;以后有空再更新&#xff0c;还要一些作业没写完.... 目录 概述查看grep命令的所有选项grep的常用选项选项-i选项-v选项-n选项-c​编辑选项-l组合使用 概述 grep命令在Linux系统中是一个很重要的文本搜索工具和过…...

spark6. 如何设置spark 日志

spark yarn日志全解 一.前言二.开启日志聚合是什么样的2.1 开启日志聚合MapReduce history server2.2 如何开启Spark history server 三.不开启日志聚合是什么样的四.正确使用log4j.properties 一.前言 本文只讲解再yarn 模式下的日志配置。 二.开启日志聚合是什么样的 在ya…...

glibc: strlcpy

https://zine.dev/2023/07/strlcpy-and-strlcat-added-to-glibc/ https://sourceware.org/git/?pglibc.git;acommit;h454a20c8756c9c1d55419153255fc7692b3d2199 https://linux.die.net/man/3/strlcpy https://lwn.net/Articles/612244/ 从这里看&#xff0c;这个strlcpy、st…...

如何在 Buildroot 中配置 Samba

在 Buildroot 中配置 Samba 在 Buildroot 中配置 Samba 可以通过以下步骤完成&#xff1a; 1. 进入 Buildroot 的根目录。 2. 执行 make menuconfig 命令&#xff0c;打开 Buildroot 的配置菜单。 3. 在配置菜单中&#xff0c;使用键盘导航到 "Target packages" 选…...

SSM02

SSM02 此时我们已经做好了登录模块接下来可以做一下学生管理系统的增删改查操作 首先&#xff0c;我们应当有一个登录成功后的主界面 在webapp下新建 1.main.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…...

day3_QT

day3_QT 1、文件保存2、始终事件 -闹钟 1、文件保存 2、始终事件 -闹钟 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimerEvent> #include <QTime> #include <QTextToSpeech>QT_BEGIN_NAMESPACE namespace Ui { clas…...

js-map方法中调用服务器接口

在 Array.prototype.map() 方法中调用服务器接口时&#xff0c;可以使用异步函数来处理。 示例&#xff1a; async function fetchData() {try {const response await fetch(https://api.example.com/data); // 通过 fetch 发送请求const data await response.json(); // 解…...

docker 已经配置了国内镜像源,但是拉取镜像速度还是很慢(gcr.io、quay.io、ghcr.io)

前言 国内用户在使用 docker 时&#xff0c;想必都遇到过镜像拉取慢的问题&#xff0c;那是因为 docker 默认指向的镜像下载地址是 https://hub.docker.com&#xff0c;服务器在国外。 网上有关配置 docker 国内镜像源的教程很多&#xff0c;像 腾讯、阿里、网易 等等都会提供…...

[linux(静态文件服务)] 部署vue发布后的dist网页到nginx

所以说&#xff1a; 1.windows下把开发好的vue工程打包为dist文件然后配置下nginx目录即可。 2.linux上不需要安装node.js环境。 3.这样子默认访问服务器ip地址&#xff0c;就可以打开&#xff0c;毕竟默认就是&#xff1a;80端口。...

智华计算机终端保护检查系统使用笔记

使用说明 【智华保密检查右键管理员运行后粘贴密码】—— 点击脚本更改系统时间【智华计算机终端保护检查系统】—— 打开检测软件进行保密检查 检测文件格式 .pdf .doc .docx .xls .pptx 检测时间日志 2023年9月14日A&#xff1a;【34:03秒】2023年9月14日B&#xff1a;【…...

前端面试话术集锦第 15 篇:高频考点(React常考进阶知识点)

这是记录前端面试的话术集锦第十五篇博文——高频考点(React常考进阶知识点),我会不断更新该博文。❗❗❗ 1. HOC 是什么?相比 mixins 有什么优点? 很多人看到高阶组件(HOC)这个概念就被吓到了,认为这东西很难,其实这东西概念真的很简单,我们先来看一个例子: func…...

汽车电子——产品标准规范汇总和梳理(适应可靠性)

文章目录 前言 一、电气性能要求 二、机械性能要求 三、气候性能要求 四、材料性能要求 五、耐久性能要求 六、防护性能要求 总结 前言 见《汽车电子——产品标准规范汇总和梳理》 一、电气性能要求 《GB/T 28046.2-2019&#xff08;ISO 16750-2&#xff1a;2012&#…...

计算机是如何工作的(上篇)

计算机发展史 世界上很多的高科技发明,来自于军事领域 计算机最初是用来计算弹道导弹轨迹的 弹道导弹 ~~国之重器,非常重要 两弹一星 原子弹,氢弹,卫星(背后的火箭发射技术) 计算弹道导弹轨迹的计算过程非常复杂,计算量也很大 ~~ 但是可以手动计算出来的(当年我国研究两弹一…...

数学建模| 优化入门+多目标规划

优化入门多目标规划 优化入门知识什么是优化问题如何判断是不是优化问题优化模型建模求解器优化问题的分类 多目标规划 优化入门知识 什么是优化问题 优化问题&#xff1a;求最优&#xff0c;例如获利最大、最少损失、最短路径、最小化风险等等。 例如&#xff1a;之前文章提…...

SSM整合Thymeleaf时,抽取公共页面并向其传递参数

第一步 创建一个名为 header.html 的公共头部页面模板&#xff0c;放在 WEB-INF 目录下的 common 文件夹中。在 header.html 中可以编写头部页面的HTML代码&#xff0c;并通过Thymeleaf的语法来接收参数&#xff0c;如下所示&#xff1a; <!DOCTYPE html> <html xml…...

接口测试 —— requests 的基本了解

● requests介绍及安装 ● requests原理及源码介绍 ● 使用requests发送请求 ● 使用requests处理响应 ● get请求参数 ● 发送post请求参数 ● 请求header设置 ● cookie的处理 ● https证书的处理 ● 文件上传、下载 requests介绍 ● requests是python第三方的HTT…...

2023年华为杯数学建模研赛D题思路解析+代码+论文

下文包含&#xff1a;2023华为杯研究生数学建模竞赛&#xff08;研赛&#xff09;D题思路解析代码参考论文等及如何准备数学建模竞赛&#xff08;22号比赛开始后逐步更新&#xff09; C君将会第一时间发布选题建议、所有题目的思路解析、相关代码、参考文献、参考论文等多项资…...

AB试验(三)一次试验的规范流程

AB试验&#xff08;三&#xff09;一次试验的规范流程 一次完整且规范的A/B试验可参考下图&#xff1a; 确定目标和假设 核心&#xff1a;A/B测试是因果推断&#xff0c;所以我们首先要确定原因和结果。目标决定了结果&#xff0c;而假设又决定了原因。 如何确定 分析问题&am…...

ROI tracking by using OpenCV

目录 source code: source code: import cv2tracker cv2.TrackerKCF_create() video cv2.VideoCapture(1)while True:ret,frame video.read()cv2.imshow("source frame",frame)k cv2.waitKey(30)if k q:break bbox cv2.selectROI(frame, False) ok tracker.i…...

(leetcode)二叉树最大深度

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 题目&#xff1a; 思路&#xff1a; 代码&#xff1a; 图解&#xff1a; 题目&#xff1a; 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数…...