网站建设常用视频格式,商丘简淘网络科技有限公司,1688官网商家版,如何建立小企业网站目录 引言一、js实现1. 实现思路2. 实现案例3. 看下效果 二、css实现1. 代码修改2. 属性介绍2.1 看下浏览器支持性2.2 常用属性值2.2.1 scroll#xff08;#xff09;2.2.2 view#xff08;#xff09; 三、总结 引言 本篇为css的一个小技巧 页面中的动画效果随着滚轮的转动… 目录 引言一、js实现1. 实现思路2. 实现案例3. 看下效果 二、css实现1. 代码修改2. 属性介绍2.1 看下浏览器支持性2.2 常用属性值2.2.1 scroll2.2.2 view 三、总结 引言 本篇为css的一个小技巧 页面中的动画效果随着滚轮的转动而播放会使用户的参与感更强烈。滚轮从上至下动画跟随从第一帧到最后一帧。可以来回滚动实现动画时空回溯的效果。如果将动画主体替换为网站主题内容则可以大大加深用户对于网站宣传内容的印象。 一、js实现 动画绑定滚轮的核心在于有一个进度的时间线。可以通过鼠标滚轮告诉网页进度到了哪个节点那么动画也就自然跳动到对应百分比的帧数。 1. 实现思路
设置好动画关键帧为了方便计算将动画周期设置为1s。利用 animation-delay 为负值的特性将动画提前某个时间点播放。通过js脚本监听window的scroll事件设置全局变量scroll其值为当前页面滚动距离占内容长度减去窗口高度的百分比这里需要思考一下。animation-delay 使用函数计算scroll值与动画周期1s的乘积取负值。此时鼠标滚动动画跳动到对应帧数实现动画绑定滚轮的效果。
关于css动画参数的详细解读请参考【CSS Tricks】css动画详解
2. 实现案例 拿代码到本地跑一下看看效果。 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headstylebody {padding: 0;margin: 0;min-height: 500vh;background-color: rgb(139, 201, 228);animation: body 1s linear;animation-play-state: paused;animation-delay: calc(var(--scroll) * -1s);animation-fill-mode: forwards;}keyframes body {to {background-color: rgb(19, 48, 97);}}.box {width: 300px;height: 300px;border-radius: 10px;background: #df685b;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);animation: box 1s linear;animation-play-state: paused;animation-delay: calc(var(--scroll) * -1s);animation-fill-mode: forwards;}keyframes box {to {transform: translate(-50%, -50%) rotate(180deg);}}/stylebodydiv classbox/div/bodyscriptwindow.addEventListener(scroll,() {document.body.style.setProperty(--scroll,window.pageYOffset / (document.body.offsetHeight - window.innerHeight));},false);/script
/html
解读一下代码
css部分主要疑问点在 animation-play-state 、animation-delay 、animation-fill-mode 这三个属性: animation-play-state 设置为 paused 表示我不希望这个动画会自动播放而是时时刻刻都是停止状态。我需要动画可以跟随滚轮只表现关键帧而不播放。animation-delay 是实现这个效果的核心我们会通过js提供一个[0,1]区间的 scroll 值。动画总周期是1s可以通过-1乘以 scroll 值获得一个[-1,0]的值。delay取负值表示提前到某一帧开始播放动画又因为 animation-play-state 设置为 paused 所以会得到动画绑定滚轮的效果。animation-fill-mode设置为 forwards 表示当 delay 为-1时不跳回到第一帧而是继续保持最后一帧的画面避免出现滚动到底时画面突然变为初始状态的情况。 js部分主要疑问点在于计算 scroll 值: 如下图示意滚动的最大距离为 window.pageYOffset 计算滚动距离的参考位置时窗口的上边缘。
3. 看下效果 注意观察滚动条位置 二、css实现 继续以js实现的代码为基础修改内容。 1. 代码修改
将script部分代码全部删掉将css部分按照如下内容修改 body {padding: 0;margin: 0;min-height: 500vh;background-color: rgb(139, 201, 228);animation: body 1s linear;animation-timeline: scroll();}keyframes body {to {background-color: rgb(19, 48, 97);}}.box {width: 300px;height: 300px;border-radius: 10px;background: #df685b;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);animation: box 1s linear;animation-timeline: scroll();}keyframes box {to {transform: translate(-50%, -50%) rotate(180deg);}}这样就够了此时页面效果和js实现结果一样。
2. 属性介绍 animation-timeline目前还处于试验阶段。 指定用于控制CSS动画进度的时间轴。
2.1 看下浏览器支持性
目前只有70%左右的支持度基本上只有最新版的chrome内核浏览器和opera浏览器可以支持。
2.2 常用属性值 默认值none无事发生。 2.2.1 scroll
使用方式 animation-timeline: scroll();scrollCSS函数表示在顶部和底部或左侧和右侧之间滚动滚动条来进行时间轴绑定。滚动范围中的位置将转换为进度百分比开始时为0%结束时为100%。
scroll函数的传参值有两个一个是指定滚动条元素一个是滚动轴向 常见使用方法
/* 一般写这个就行 */
animation-timeline: scroll();
/* 指定滚动条元素 */
animation-timeline: scroll(nearest); /* 找最近的具有滚动条的祖先元素可以是self */
animation-timeline: scroll(root); /* 文档根元素 */
animation-timeline: scroll(self); /* 自身 */
/* 指定滚动轴向一般就选这俩。纵向和横向 */
animation-timeline: scroll(y);
animation-timeline: scroll(x);
/* 如果喜欢两个参数都写举例 */
animation-timeline: scroll(y nearest);2.2.2 view
使用方式 animation-timeline: view();viewCSS函数在可视区域指定一个区间当元素经过这个区间时开始进行时间轴进度。从元素进入区间为0%完全离开区间为100%。
view函数的传参值有两个一个是指定滚动轴向一个是指定视图区域可视区域可以有两个值。最多总共三个值 常见使用方法
/* 一般写这个就行表示当需要动画的元素出现在屏幕可视范围内即可开始根据滚动轴作为时间线操控动画 */
animation-timeline: view();/* 非要写话就写x、y就好不写默认是block相当于y */
animation-timeline: view(y);
animation-timeline: view(x);/* 设置可视区域 */
animation-timeline: view(auto); /* 全部可视区域*/
animation-timeline: view(20%); /* 从可视区域顶部20%到底部0%中间的部分*/
animation-timeline: view(20% 40%);/* 从可视区域顶部20%到底部40%中间的部分*/举个例子 animation-timeline: view(50% 10%);/* 从可视区域顶部50%到底部10%中间的部分*/三、总结
CSS的创建者曾说过他最初的设想是CSS作为控制网页行为的主要Web技术。只有当CSS无法完成控制行为时才使用js脚本作为后备手段。
如果在不考虑浏览器支持性的前提下优先使用chrome最新版本浏览器项目中有做滚动条绑定动画的需求我非常建议大家尝试一下animation-timeline 它会给你一种全新的开发体验在实现相同效果的情况下页面性能优化最佳。
再接再厉~
