css中@scroll-timeline_基于滚动条的滚动去控制动画行进的能力
Web开发者时常会碰到使用滚动来触发某些元素的动画效果,比如说,页面滚动条滚动到某个位置,标题固定在顶部;页面顶部展示你页面进度(滚动指示器);还是一些我们所说的视差滚动效果等。
往实现这些效果,大都借助JavaScript来实现,可以通过dom事件查看滚动位置,并根据该位置更改元素的样式。如果可以的话,最好使用 IntersectionObserver。
不过,现在有一个关于这方面的css草案,即 Scroll-linked Animations。也就是说,在未来,我们可以直接使用CSS的 @scroll-timeline 属性来实现前面提到的一些动画效果。
@scroll-timeline = @scroll-timeline <timeline-name> { <declaration-list> }
@scroll-timeline 能够设定一个动画的开始和结束由滚动容器内的滚动进度决定,而不是由时间决定。意思是,我们可以定义一个动画效果,该动画的开始和结束可以通过容器的滚动来进行控制。
@scroll-timeline 语法介绍
接下来,我们先缓一缓,简单看一看 @scroll-timeline 的语法。
使用 @scroll-timeline,最核心的就是需要定义一个 @scroll-timeline 规则:
@scroll-timeline moveTimeline {source: selector("#g-content");orientation: vertical;scroll-offsets: 0px, 500px;
}
其中:
source:绑定触发滚动动画的滚动容器
source: auto:绑定到 Document,也就是全局 Windows 对象
source: selector("id-selector"),通过 selector(),内置一个 #id 选择器,选取一个可滚动容器
source: none:不指的滚动容器
orientation:设定滚动时间线的方向
orientation: auto:默认为 vertical,也就是竖直方向的滚动
orientation: vertical:竖直方向的滚动
orientation: horizontal:水平方向的滚动
orientation: block:不太常用,使用沿块轴的滚动位置,符合书写模式和方向性
orientation: inline:不太常用,使用沿内联轴的滚动位置,符合书写模式和方向性
scroll-offsets:滚动时间线的核心,设定在滚动的什么阶段,触发动画,可通过三种方式之一进行设置:
scroll-offsets: none 这意味着没有 scroll-offset 指定。
由逗号分隔的值列表确定。每个值都映射到animation-duration。例如,如果 ananimation-duration 设置为 2s 且滚动偏移量为 0px, 30px, 100px,则在 1s 时,滚动偏移量将为 30px。
第三种确定滚动偏移量的方法是使用元素偏移量。这意味着可以指定页面内的元素,其位置决定了滚动时间线以及要使用这些元素的哪个边缘。指定元素是使用 selector() 函数完成的,该函数接收元素的 id。边缘由关键字 start 或确定 end。可选的阈值的 0–1 可用于表示元素滚动中预期可见的百分比。
scroll-offsets 的理解会比较困难,我们稍后详述。
在设定了一个 @scroll-timeline 之后,我们只需要将它和动画绑定起来即可,通过 animation-timeline:
@scroll-timeline moveTimeline {source: selector("#g-content");orientation: vertical;scroll-offsets: 0px, 500px;
}
div {animation-name: move;animation-duration: 3s;animation-timeline: moveTimeline;
}
@keyframes move{0% {transform: translate(0, 0);}100% {transform: translate(100%, 0);}
}
@scroll-timeline 的实验室特性与特性检测
@scroll-timeline 虽好,目前仍处于实验室特性时间,在最新的 chrome、Edge、Opera 可以通过浏览器配置开启该特性,Chrome 下开启该特性需要:
浏览器 URL 框输入 chrome://flags
开启 #enable-experimental-web-platform-features
特性检测
基于目前的兼容性问题,我们可以通过浏览器的特性检测 @supports 语法,来渐进增强使用该功能。
特性检测的语法也非常简单:
@supports (animation-timeline: works) {@scroll-timeline list-item-1 {source: selector(#list-view);start: selector(#list-item-1) end 0;end: selector(#list-item-1) end 1;scroll-offsets:selector(#list-item-1) end 0,selector(#list-item-1) end 1;time-range: 1s;}// ...
}
通过 @supports (animation-timeline: works) {} 可以判断浏览器是否支持 @scroll-timeline。
学习更多技能
请点击下方公众号
css中@scroll-timeline_基于滚动条的滚动去控制动画行进的能力相关推荐
- Three.js中引入dat.gui库实现界面组件控制动画速度变量
场景 Three.js中使用requestAnimationFrame方法实现立方体转动和小球跳动的动画: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/arti ...
- 使用CSS 中伪元素:before 和:after 做简单的动画(以小米商城非首页 logo 动画为例)
刚开始学前端不久,发现小米商城的页面做的特别漂亮,前几天在B站找了一个视频,是闪购页面的,跟上做了一下,但是他的视频只有静态的基本页面,没有动画,我今天弄了小半天(还是技术太差,哈哈哈),终于算是做出 ...
- vue中两个iframe滚动条同步滚动问题总结
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一.问题分析 二.记录爬坑过程 1.获取dom 错误操作:在mounted里面this.$nextTick,如果场景里面有t ...
- html5 css svg,6款基于SVG的HTML5CSS3应用和动画
1.CSS3/SVG质感背景小图标 镂空效果图标按钮 今天我们来分享一款用CSS3和SVG实现的质感背景小图标,鼠标滑过图标时出现镂空的效果,并且有质感背景的描边,效果非常不错. 2.HTML5 SV ...
- css禁止图片保存,CSS中的图片保存方法
"css中的图片"指的就是镶在CSS样式表中的图片.在我们用在浏览器保存网页时,很多时候,下载网页里的图片都下载不到,这样的话就会使网页非常不美观.所以,今天小编就给大家介绍集中保 ...
- CSS ——关于css中变形效果的案例解析
文章目录 前言 一.案例效果图 二.实现过程 1.HTML结构 2.CSS样式 总结 前言 本文主要介绍的是有关CSS中变形效果的案例解析,关于变形.动画等知识点的汇总在上一篇文章中有说过,欢迎感兴趣 ...
- CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
- php如何监听页面滚动,html5中在元素滚动条在滚动时触发的事件onscroll
实例 元素滚动时执行 JavaScript 定义和用法 onscroll 事件在元素滚动条在滚动时触发. 提示: 使用 CSS overflow 样式属性来创建元素的滚动条. 浏览器支持 语法 HTM ...
- IOS端 vux中scroll滚动自动回弹到顶部或者左侧的解决办法
IOS端 vux中scroll滚动自动回弹到顶部或者左侧的解决办法 问题表象 在滑动的时候,偶发性出现自动回弹到顶部的现象,通过onScroll回调发现scrollTop为-1造成回弹,开始寻找为什么 ...
最新文章
- BAT常爱问的面试智力题,你能答对几道?
- 吃CPU的openmp 程序
- 【免费公测中】为数据赋予超能力,阿里云重磅推出Serverless数据分析引擎-Data Lake Analytics
- GiHub创建项目仓库与上传项目,超详细思维导图
- SAS下载高频数据脚本
- qq盗号的小插件 各位同胞注意别被骗了
- java自身的rsa算法效率低下问题
- 计算机c盘扩容不用软件,电脑分区c盘扩容,这个方法超级简单!
- apt-get autoremove remove 新手收割者
- Stata新命令:psestimate - 倾向得分匹配中协变量的筛选
- 沉浸其境,共赴云栖数智硬核美学
- Qt编写地图综合应用3-省市区域图
- WebService(1) 调用第三方服务
- group normalization
- 2.从键盘输入自己的姓名拼音(用小写输入),将首字母变为大写后在屏幕上输出。有没有汇编方面的大神教教我,我现在还是个新手
- go使用viper读取配置参数热加载
- NSIS制作自己的安装包
- 大恒工业相机实例使用
- 浪潮服务器NP5720M4安装vm虚拟化
- Linux下安装配置Tomcat
热门文章
- 初次使用,用 欢迎使用CSDN-markdown编辑器 做个实验
- 云计算中封闭式的Java部署模型 | CORE JAVA WEEK
- 华为设备配置通过VLANIF实现同VLAN不同网段通信
- python爬取百度图片之js逆向
- html在表格中加入虚线框,如何让html表格有虚线边框
- 如何进行 360 度反馈?
- 以“乌云网关闭”为视角,解读《网络安全漏洞管理规定(征求意见稿)》
- ChatGPT 辅助生成PPT
- 创建微信小程序的几种方式
- mysql-创建用户报错ERROR 1396 (HY000): Operation CREATE USER failed for 'XXXX'@'XXXX'