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

js实现元素根据鼠标滚轮滚动向左右上下滑动着从模糊到清楚显示出来

html代码

<div ref={test} id="animatedElement" className="not-animated">
        <div style={{width:"100px",height:"50px",backgroundColor:"red"}}>
        </div>
</div>

JS代码

const test = useRef(null)
  // 监听滚轮事件
  useEffect(() => {
    const handleScrollaa = () => {
      const scrollTop1 = document.documentElement.scrollTop || document.body.scrollTop;
      const h = test.current;
      const triggerPoint = window.innerHeight
      if (scrollTop1 > triggerPoint * 0.3) {
        // 触发动画,通过添加 animate 类
        console.log(32135456434687)

       (headerLogo2 as HTMLElement).style.animation = `ROW3 2s forwards`;
      }
      else if(scrollTop1 < triggerPoint * 0.3){
        h.style.animation=""
        h.style.opacity="0"
      }
    };

    window.addEventListener('scroll', handleScrollaa);
    // 组件卸载时移除事件监听器
    return () => {
      window.removeEventListener('scroll', handleScrollaa);
    };
  }, []);

CSS代码(实现从左到右滑动出来,并且由模糊到清楚的展现)

@keyframes ROW3 {
  0% {
    transform: translateX(-100%); /* 动画开始时,图片在容器外部 */
    filter: blur(30px);  /*模糊属性*/
    opacity:0; /*opacity: 0 隐藏  1 显示 */
  }
  100% {
    transform: translateX(0) rotate(1turn) ; /* 动画结束时,图片移动到容器内部 rotate(1turn)是内容旋转,随着移动而滚动 */
    filter: blur(0);
    opacity:1;
  }}

相关文章:

js实现元素根据鼠标滚轮滚动向左右上下滑动着从模糊到清楚显示出来

html代码 <div ref{test} id"animatedElement" className"not-animated"> <div style{{width:"100px",height:"50px",backgroundColor:"red"}}> </div> </div> JS代码 const te…...

yocto学习

bitbake命令单独编译u-boot&#xff1a; $ bitbake -c compile -f u-boot-imx $ bitbake -c deploy -f u-boot-imx //部署编译生成的u-boot镜像到deploy bitbake命令单独编译kernel&#xff1a; bitbake -c compile -f linux-imx //编译内核 bitbake -c deploy -f linux-imx /…...

【IC设计】牛客网-序列检测习题总结

文章目录 状态机基础知识VL25 输入序列连续的序列检测VL26 含有无关项的序列检测VL27 不重叠序列检测VL28 输入序列不连续的序列检测参考资料 状态机基础知识 VL25 输入序列连续的序列检测 timescale 1ns/1ns module sequence_detect(input clk,input rst_n,input a,output re…...

python爬虫登录到海康相机管理页面

简述 1.最近接到个任务是在管理页面更改相机的某个参数&#xff0c;下载官方的sdk貌似没有提供这个接口&#xff0c;所以只能自己写爬虫登录发请求了。 1.主要步骤 1.1 发送get请求获取到salt&#xff0c;sessionID&#xff0c;challenge等信息 http://admin:123456192.168.…...

9.Docker网络

文章目录 1、Docker网络简介2、常用基本命令3、网络模式对比举例3.1、bridge模式3.2、host模式3.3、none模式3.4、container模式3.5、自定义网络 1、Docker网络简介 作用&#xff1a; 容器间的互联和通信以及端口映射容器IP变动时候可以通过服务名直接进行网络通信而不受到影…...

Windows VS2022 C语言使用 sqlite3.dll 访问 SQLite数据库

今天接到一个学生C语言访问SQLite数据库的的需求: 第一步,SQLite Download Page下载 sqlite3.dll 库 下载解压,发现只有两个文件: 于是使用x64 Native Tools Command Prompt 终端 生成 sqlite3.lib 和 sqlite3.exp文件 LIB -def:sqlite3.def -out:sqlite3.lib -machin…...

java库和包的概念

在Java中&#xff0c;"库"和"包"是两个不同的概念&#xff0c;但它们之间存在着密切的关联。 库&#xff08;Library&#xff09; 定义&#xff1a;库是一组已经编写好的代码和资源&#xff0c;用于解决特定的问题或提供特定的功能。它可以包含一个或多个…...

mysql内存结构

一&#xff1a;逻辑存储结构&#xff1a;表空间->段->区->页->行、 表空间&#xff1a;一个mysql实例对应多个表空间&#xff0c;用于存储记录&#xff0c;索引等数据。 段&#xff1a;分为数据段&#xff0c;索引段&#xff0c;回滚段。innoDB是索引组织表&…...

Python | Leetcode Python题解之第111题二叉树的最小深度

题目&#xff1a; 题解&#xff1a; class Solution:def minDepth(self, root: TreeNode) -> int:if not root:return 0que collections.deque([(root, 1)])while que:node, depth que.popleft()if not node.left and not node.right:return depthif node.left:que.appen…...

c++二进制输出

输入一个数&#xff0c;输出n个数&#xff0c;数可以是0或1&#xff1b;输入&#xff1a;4输出&#xff1a;0010&#xff1b;提示&#xff1a;本题要用到rand(),srand(time(0));代码如下&#xff1a;#include<bits/stdc.h> #include<windows.h> using namespace s…...

5. C++网络编程-UDP协议的实现

UDP是无连接的。 UDP Server网络编程基本步骤 创建socket&#xff0c;指定使用UDP协议将socket与地址和端口绑定使用recv/send接收/发送数据 由于UDP是无连接的&#xff0c;直接侦听就行使用close关闭连接 这个UDP接收数据的时候用的API是recvfrom,发送数据是sendto 客户端 …...

Altium Designer 中键拖动,滚轮缩放,并修改缩放速度

我的版本是AD19&#xff0c;其他版本应该都一样。 滚轮缩放 首先&#xff0c;要用滚轮缩放&#xff0c;先要调整一下AD 设置&#xff0c;打开Preferences&#xff0c;在Mouse Wheel Configuration 里&#xff0c;把Zoom Main Window 后面Ctrl 上的对勾取消掉&#xff0c;再把…...

python从入门到精通04

一、编写英文月份词典 month_num int(input("请输入您想要查询的月份&#xff1a;")) month_list [January,February,March,April,May,June,July,August,September,October,November,December] print("您查询的月份单词是&#xff1a;", month_list[mon…...

tomcat三级指导

版本 ./catalina.sh linux version.bat win 1.确认是否使用了tomcat管理后台 我们先找到配置文件&#xff1a;tomcat主目录下/conf/server.xml 可以查看到连接端口&#xff0c;默认为8080 然后查看manager-gui管理页面配置文件&#xff0c;是否设置了用户登录 配置文件…...

不知道是该怎么引用多个函数片段?具体示例如代码

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…...

P3128 [USACO15DEC] Max Flow P题解(树上差分,最近公共祖先,图论)

前言&#xff1a; 题目链接&#xff1a;P3128 [USACO15DEC] Max Flow P - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 讲解&#xff1a; 这一题含金量真算高的&#xff0c;包含了建树&#xff08;用了图论的知识&#xff09;&#xff0c;求最近公共祖先&#xff08;倍增法…...

在Linux上面部署ELK

注明&#xff1a;一下的软件需要自己准备 一、准备环境&#xff1a; 1.两台elasticsearch主机4G内存 2.两台elasticsearch配置主机名node1和node2(可以省略) #vim /etc/hostname #reboot 3. 两台elasticsearch配置hosts文件 #vim /etc/hosts 192.168.1.1 node1 192…...

Langchain-Chatchat的markdownHeaderTextSplitter使用

文章目录 背景排查步骤官方issue排查测试正常对话测试官方默认知识库Debug排查vscode配置launch.json命令行自动启动condadebug知识库搜索测试更换ChineseRecursiveTextSplitter分词器 结论 关于markdownHeaderTextSplitter的探索标准的markdown测试集Langchain区分head1和head…...

掩码生成蒸馏——知识蒸馏

摘要 https://arxiv.org/pdf/2205.01529 知识蒸馏已成功应用于各种任务。当前的蒸馏算法通常通过模仿教师的输出来提高学生的性能。本文表明&#xff0c;教师还可以通过指导学生的特征恢复来提高学生的表示能力。从这一观点出发&#xff0c;我们提出了掩码生成蒸馏&#xff08…...

【C#实战】Newtonsoft.Json基类子类解析

情景再现 假设你有如下类&#xff1a; public class Item {public int Id;public string Name; }public class Weapon: Item {public int CurrentAmmo; }public class Inventory {public List<Item> Items; } 其中你序列化的是Inventory类&#xff0c;Items列表里混杂着…...

生物感知层级与真实维度跃迁理论 ——基于三场正交统一论与电磁神经学的生命认知重构

摘要&#xff1a;本文以三场正交统一论&#xff08;电磁场为主导、引力场与强弱力相位场正交耦合&#xff09;与电磁神经学&#xff08;神经元树突为电磁场收发天线、潜意识为全域场处理器、显意识为集中式符号网关&#xff09;为底层框架&#xff0c;系统性重构生物感知器官的…...

Fan Control风扇控制软件:从入门到精通的全方位指南

Fan Control风扇控制软件&#xff1a;从入门到精通的全方位指南 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/F…...

3分钟搞定iPhone USB网络共享:Windows苹果驱动极简安装指南

3分钟搞定iPhone USB网络共享&#xff1a;Windows苹果驱动极简安装指南 【免费下载链接】Apple-Mobile-Drivers-Installer Powershell script to easily install Apple USB and Mobile Device Ethernet (USB Tethering) drivers on Windows! 项目地址: https://gitcode.com/g…...

什么是可扩展、可接入的智能运维体?

Lerwee运维智能体作为面向企业IT运维的AgenticAIOps开放生态核心平台&#xff0c;其核心特性与价值集中体现在三大维度&#xff1a; 1.底层深度融合DeepSeek、Qwen等主流大模型&#xff0c;具备感知、记忆、规划、决策、执行的完整智能闭环能力&#xff0c;为生态运转提供核心智…...

Linux硬盘分区管理

硬盘分区管理 大容量的硬盘&#xff0c;分区使用&#xff1a;C盘系统盘&#xff0c;D盘办公&#xff0c;E盘娱乐。 类似于&#xff1a;买了一个房子100平方&#xff0c;隔断&#xff1a;主卧、次卧1、次卧2、厨房、卫生间。识别硬盘设备接口类型设备命名示例说明SATA/SAS/USB/S…...

C# 13不安全代码审计清单:7项Roslyn Analyzer新规+4类CI/CD拦截阈值配置(附GHA自动化检测脚本)

第一章&#xff1a;C# 13不安全代码管控配置概览C# 13延续了对内存安全的高度重视&#xff0c;在默认启用/unsafe-&#xff08;即禁用不安全上下文&#xff09;的前提下&#xff0c;将不安全代码的启用明确纳入项目级显式管控范畴。开发者必须主动声明许可&#xff0c;并通过多…...

Fun-ASR-MLT-Nano-2512实战教程:FFmpeg音频降噪预处理提升远场识别率

Fun-ASR-MLT-Nano-2512实战教程&#xff1a;FFmpeg音频降噪预处理提升远场识别率 1. 引言 远场语音识别一直是个头疼的问题——背景噪音、回声干扰、声音衰减&#xff0c;这些因素让语音识别准确率大幅下降。在实际应用中&#xff0c;我们经常遇到这样的场景&#xff1a;会议…...

【基于Python技术的智慧中医商业项目】后端应用Articles代码实现(三)

前后端分离场景中,序列化字段映射一旦写错,常见表现是接口返回字段缺失、层级字段解析失败、列表页展示异常;过滤器规则不稳定时,表现为列表查询条件无效、批量筛选失控、后台与接口筛选口径不一致。 本文围绕文章应用模块的 serializes.py 与 filters.py 拆解,聚焦序列化…...

网站 Favicon 获取 API 技术实现指南

接口概述 本文档介绍一个通过 URL 参数获取任意网站 Favicon 图标的技术方案&#xff0c;包括接口设计、调用方法、错误处理及调试技巧。 接口规范 基础信息 项目说明接口地址https://api.afmax.cn/so/ico/index.php请求方式GET响应格式图片二进制数据&#xff08;ICO/PNG/J…...

AI 时代,计算机专业学生该怎么学?恫

整体排查思路 我们的目标是验证以下三个环节是否正常&#xff1a; 登录成功时&#xff1a;服务器是否正确生成了Session并返回了包含正确 JSESSIONID的Cookie给浏览器。 浏览器端&#xff1a;浏览器是否成功接收并存储了该Cookie。 后续请求&#xff1a;浏览器在执行查询等操作…...