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

【CSS Tricks】鼠标滚轮驱动css动画播放,使用js还是css?

目录

  • 引言
  • 一、js实现
    • 1. 实现思路
    • 2. 实现案例
    • 3. 看下效果
  • 二、css实现
    • 1. 代码修改
    • 2. 属性介绍
      • 2.1 看下浏览器支持性
      • 2.2 常用属性值
        • 2.2.1 scroll()
        • 2.2.2 view()
  • 三、总结

引言

本篇为css的一个小技巧

页面中的动画效果随着滚轮的转动而播放,会使用户的参与感更强烈。滚轮从上至下,动画跟随从第一帧到最后一帧。可以来回滚动,实现动画时空回溯的效果。如果将动画主体替换为网站主题内容,则可以大大加深用户对于网站宣传内容的印象。


一、js实现

动画绑定滚轮的核心在于有一个进度的时间线。可以通过鼠标滚轮告诉网页,进度到了哪个节点,那么动画也就自然跳动到对应百分比的帧数。

1. 实现思路

  1. 设置好动画关键帧,为了方便计算,将动画周期设置为1s。
  2. 利用 animation-delay 为负值的特性,将动画提前某个时间点播放。
  3. 通过js脚本监听window的scroll事件,设置全局变量scroll,其值为当前页面滚动距离占内容长度减去窗口高度的百分比(这里需要思考一下)。
  4. animation-delay 使用函数计算scroll值与动画周期1s的乘积取负值。
  5. 此时鼠标滚动,动画跳动到对应帧数,实现动画绑定滚轮的效果。

关于css动画参数的详细解读,请参考:【CSS Tricks】css动画详解

2. 实现案例

拿代码到本地跑一下看看效果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>body {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);}}</style><body><div class="box"></div></body><script>window.addEventListener("scroll",() => {document.body.style.setProperty("--scroll",window.pageYOffset / (document.body.offsetHeight - window.innerHeight));},false);</script>
</html>

解读一下代码:

  • css部分主要疑问点在 animation-play-stateanimation-delayanimation-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. 代码修改

  1. 将script部分代码全部删掉
  2. 将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);}}
  1. 这样就够了,此时页面效果和js实现结果一样。

2. 属性介绍

animation-timeline,目前还处于试验阶段。

指定用于控制CSS动画进度的时间轴。

2.1 看下浏览器支持性

目前只有70%左右的支持度,基本上只有最新版的chrome内核浏览器和opera浏览器可以支持。
在这里插入图片描述

2.2 常用属性值

默认值:none,无事发生。

2.2.1 scroll()

使用方式:

  animation-timeline: scroll();

scroll()CSS函数表示在顶部和底部(或左侧和右侧)之间滚动滚动条来进行时间轴绑定。滚动范围中的位置将转换为进度百分比,开始时为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();

view()CSS函数在可视区域指定一个区间,当元素经过这个区间时开始进行时间轴进度。从元素进入区间为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 ,它会给你一种全新的开发体验,在实现相同效果的情况下,页面性能优化最佳。

再接再厉~

相关文章:

【CSS Tricks】鼠标滚轮驱动css动画播放,使用js还是css?

目录 引言一、js实现1. 实现思路2. 实现案例3. 看下效果 二、css实现1. 代码修改2. 属性介绍2.1 看下浏览器支持性2.2 常用属性值2.2.1 scroll&#xff08;&#xff09;2.2.2 view&#xff08;&#xff09; 三、总结 引言 本篇为css的一个小技巧 页面中的动画效果随着滚轮的转动…...

《Electron 基础知识》设置 Vue 中引用的文件路径别名

vite.renderer.config.mjs 文件中配置 代码第1行&#xff0c;引入 resolve &#xff1b;代码第 6 - 10 行&#xff0c;设置路径别名&#xff0c;注意没有后缀 /&#xff1b; import { resolve } from pathexport default defineConfig((env) > {return {resolve: {alias: …...

day 20 二叉树 part05

654.最大二叉树 注意类似用数组构造二叉树的题目&#xff0c;每次分隔尽量不要定义新的数组&#xff0c;而是通过下标索引直接在原数组上操作&#xff0c;这样可以节约时间和空间上的开销。 题目链接/文章讲解&#xff1a;代码随想录 lass Solution { private:// 在左闭右开…...

003 Springboot操作RabbitMQ

Springboot整合RabbitMQ 文章目录 Springboot整合RabbitMQ1.pom依赖2.yml配置3.配置队列、交换机方式一&#xff1a;直接通过配置类配置bean方式二&#xff1a;消息监听通过注解配置 4.编写消息监听发送测试5.其他类型交换机配置1.FanoutExchange2.TopicExchange3.HeadersExcha…...

小猿口算脚本

实现原理&#xff1a;安卓adb截图传到电脑&#xff0c;然后用python裁剪获得两张数字图片&#xff0c;使用ddddocr识别数字&#xff0c;比较大小&#xff0c;再用adb命令模拟安卓手势实现>< import os import ddddocr from time import sleep from PIL import Imagedef …...

从 Reno TCP 到 Scalable TCP,HighSpeed TCP

前文 Scalable TCP 如何优化长肥管道 介绍了 Scalable TCP&#xff0c;但联系另一个类似的算法 HighSpeed TCP(简称 HSTCP)&#xff0c;就会看到一个类似从 Reno TCP 经 BIC 到 CUBIC 的路线&#xff0c;但采用了不同的策略。 Reno TCP 经 BIC 到 CUBIC 路线的核心在于 “在长…...

使用Java调用OpenAI API并解析响应:详细教程

使用Java调用OpenAI API并解析响应&#xff1a;详细教程 在现代应用程序中&#xff0c;API调用是一个非常常见的任务。本文将通过一个完整的示例&#xff0c;讲解如何使用Java调用OpenAI的ChatGPT API&#xff0c;并通过ObjectMapper处理JSON响应。本文的示例不仅适用于OpenAI…...

深入学习并发编程中的 synchronized

文章目录 并发编程中的三个问题可见性原子性有序性 了解Java内存模型JMMsynchronized 保证三大特性synchronized 保证原子性synchronized 保证可见性synchronized 保证有序性 synchronized 的特性可重入特性不可中断特性 通过反汇编学习synchronized原理当修饰代码块时当修饰方…...

AMD R9-9950X相比较I9-14900K有哪些提升

AMD R9-9950X相比较I9-14900K有哪些提升&#xff1f;在处理器领域&#xff0c;AMD与英特尔的竞争从未停歇&#xff0c;每一次新品发布都引发业界的高度关注。近日&#xff0c;AMD推出了其新一代桌面级旗舰处理器——Ryzen 9 9950X&#xff08;简称R9-9950X&#xff09;&#xf…...

计算机毕业设计 基于Python的个性化旅游线路推荐系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…...

总结:Flink之DataStream各API介绍

一、介绍 本文主要是详细介绍 DataStream<T> 类中的各个方法,并给出它们的使用场景。 二、基本方法 getId(): 作用:返回转换操作的唯一标识符。场景:当需要调试或日志记录时,有时候需要知道操作的 ID。getParallelism(): 作用:获取流的并行度。场景:在优化作业时…...

设计一个日志管理系统,支持多级别日志记录

设计一个日志管理系统,支持多级别日志记录 作为一名Python程序软件专家,我经常被问到关于日志管理系统的设计和实现。今天,我将分享一篇关于设计一个日志管理系统,支持多级别日志记录的博文,希望能够帮助大家更好地理解和使用Python语言。 日志管理系统的需求 在软件开…...

Javascript动态规划算法

JavaScript中的动态规划&#xff08;Dynamic Programming&#xff0c;简称DP&#xff09;是一种通过把原问题分解为相对简单的子问题的方式来求解复杂问题的方法。它主要致力于将“合适”的问题拆分成更小的子目标&#xff0c;并通过建立状态转移方程、缓存并复用以往结果以及按…...

Java 循环里怎么删除元素才安全

首先 在 Java 中&#xff0c;当你在循环中遍历集合时&#xff0c;直接删除元素可能会引发 ConcurrentModificationException。为了安全地删除元素&#xff0c;推荐使用 Iterator 来进行删除操作。 以下是使用 Iterator 删除元素的常见模式&#xff1a; import java.util.Arr…...

LabVIEW晶体振荡器自动化测试系统

基于LabVIEW平台的晶体振荡器自动化测试系统解决了传统手工测试晶体振荡器繁琐且易出错的问题。该系统通过高度自动化的测试流程&#xff0c;提高了测试效率和精度&#xff0c;实现了数据的自动采集与处理&#xff0c;适用于电子、通信等领域的晶振测试需求。 项目背景与意义 …...

3.6.xx版本SpringBoot创建基于Swagger接口文档

介绍 基于Swagger构建的JavaAPI文档工具&#xff0c;实现后端功能的测试&#xff0c;并撰写API接口文档。 方法 pom.xml中引入依赖,要注意的是&#xff0c;本依赖使用的SpringBoot版本为3.6.xx <!--Knife4j--><dependency><groupId>com.github.xiaoymin<…...

Oracle 12201非PDBS模式单机部署(静默安装)

一、创建Oracle数据库的用户 groupadd oinstall groupadd dba groupadd asmadmin groupadd asmdba useradd -g oinstall -G dba,asmdba oracle -d /home/oracle passwd oracle二、配置Linux 服务器参数 cat /home/oracle/.bash_profile export ORACLE_HOSTNAMEH_orcle01 expo…...

Python 源码编译安装详解:跨平台指南及完整步骤解析

Python 源码编译安装详解&#xff1a;跨平台指南及完整步骤解析 文章目录 Python 源码编译安装详解&#xff1a;跨平台指南及完整步骤解析一 准备工作1&#xff09;Ubuntu/Debian2&#xff09;CentOS/RHEL3&#xff09;macOS 二 下载 Python 源码三 编译与安装1&#xff09;解压…...

MQTT vs HTTP:谁更适合物联网?

前言 随着物联网&#xff08;IoT&#xff09;技术的飞速发展中&#xff0c;其应用规模和使用场景正在持续扩大&#xff0c;但它关键的流程仍然是围绕数据传输来进行的&#xff0c;因此设备通信协议选择至关重要。 作为两种主要的通信协议&#xff0c;MQTT 协议和 HTTP 协议各…...

小北的技术博客:探索华为昇腾CANN训练营与AI技术创新——Ascend C算子开发能力认证考试(初级)

前言 哈喽哈喽友友们,这里是zyll~(小北)智慧龙阁的创始人及核心技术开发者。在技术的广阔天地里,我专注于大数据与全栈开发,并致力于成为这一领域的新锐力量。通过智慧龙阁这个平台,我期望能与大家分享我的技术心得,共同探索技术的无限可能。 Ascend C编程:小北的技术…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

AI语音助手的Python实现

引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...