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: $ bitbake -c compile -f u-boot-imx $ bitbake -c deploy -f u-boot-imx //部署编译生成的u-boot镜像到deploy bitbake命令单独编译kernel: 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.最近接到个任务是在管理页面更改相机的某个参数,下载官方的sdk貌似没有提供这个接口,所以只能自己写爬虫登录发请求了。 1.主要步骤 1.1 发送get请求获取到salt,sessionID,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网络简介 作用: 容器间的互联和通信以及端口映射容器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中,"库"和"包"是两个不同的概念,但它们之间存在着密切的关联。 库(Library) 定义:库是一组已经编写好的代码和资源,用于解决特定的问题或提供特定的功能。它可以包含一个或多个…...
mysql内存结构
一:逻辑存储结构:表空间->段->区->页->行、 表空间:一个mysql实例对应多个表空间,用于存储记录,索引等数据。 段:分为数据段,索引段,回滚段。innoDB是索引组织表&…...
Python | Leetcode Python题解之第111题二叉树的最小深度
题目: 题解: 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++二进制输出
输入一个数,输出n个数,数可以是0或1;输入:4输出:0010;提示:本题要用到rand(),srand(time(0));代码如下:#include<bits/stdc.h> #include<windows.h> using namespace s…...
5. C++网络编程-UDP协议的实现
UDP是无连接的。 UDP Server网络编程基本步骤 创建socket,指定使用UDP协议将socket与地址和端口绑定使用recv/send接收/发送数据 由于UDP是无连接的,直接侦听就行使用close关闭连接 这个UDP接收数据的时候用的API是recvfrom,发送数据是sendto 客户端 …...
Altium Designer 中键拖动,滚轮缩放,并修改缩放速度
我的版本是AD19,其他版本应该都一样。 滚轮缩放 首先,要用滚轮缩放,先要调整一下AD 设置,打开Preferences,在Mouse Wheel Configuration 里,把Zoom Main Window 后面Ctrl 上的对勾取消掉,再把…...
python从入门到精通04
一、编写英文月份词典 month_num int(input("请输入您想要查询的月份:")) month_list [January,February,March,April,May,June,July,August,September,October,November,December] print("您查询的月份单词是:", month_list[mon…...
tomcat三级指导
版本 ./catalina.sh linux version.bat win 1.确认是否使用了tomcat管理后台 我们先找到配置文件:tomcat主目录下/conf/server.xml 可以查看到连接端口,默认为8080 然后查看manager-gui管理页面配置文件,是否设置了用户登录 配置文件…...
不知道是该怎么引用多个函数片段?具体示例如代码
🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&…...
P3128 [USACO15DEC] Max Flow P题解(树上差分,最近公共祖先,图论)
前言: 题目链接:P3128 [USACO15DEC] Max Flow P - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 讲解: 这一题含金量真算高的,包含了建树(用了图论的知识),求最近公共祖先(倍增法…...
在Linux上面部署ELK
注明:一下的软件需要自己准备 一、准备环境: 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 知识蒸馏已成功应用于各种任务。当前的蒸馏算法通常通过模仿教师的输出来提高学生的性能。本文表明,教师还可以通过指导学生的特征恢复来提高学生的表示能力。从这一观点出发,我们提出了掩码生成蒸馏(…...
【C#实战】Newtonsoft.Json基类子类解析
情景再现 假设你有如下类: public class Item {public int Id;public string Name; }public class Weapon: Item {public int CurrentAmmo; }public class Inventory {public List<Item> Items; } 其中你序列化的是Inventory类,Items列表里混杂着…...
深入浅出:图解5G NR中UCI复用与资源抢占的那些事儿
5G NR上行控制信道的资源博弈:UCI复用机制全景解析 想象一下,在一个繁忙的十字路口,各种车辆(出租车、救护车、私家车)都在争夺有限的通行权。5G上行控制信道中的UCI复用场景与之惊人地相似——SR(调度请求…...
小作坊 GitHub 协作闭环:fork-sync-dev-pr-merge 实战指南
一、前言 1.1 规范目的 随着团队规模扩大与多角色协同开发场景增多,代码仓库的版本管理、分支协作及质量管控面临诸多挑战,如直接向主仓库推送代码导致的版本冲突、提交记录混乱、代码质量不可控等问题。为解决上述痛点,本规范明确了基于 G…...
STK实战:用6颗低轨+6颗高轨卫星实现全球覆盖(含波束优化技巧)
STK实战:高低轨卫星协同设计与全球覆盖优化 当我们需要为偏远地区提供通信服务或实现全球环境监测时,卫星星座的覆盖性能直接决定了系统可用性。传统单一轨道高度的卫星星座往往难以兼顾覆盖连续性和系统成本,而高低轨卫星协同设计则提供了一…...
Architect.dev核心组件架构揭秘:深入理解@http、@tables、@events
Architect.dev核心组件架构揭秘:深入理解http、tables、events 【免费下载链接】architect The simplest, most powerful way to build a functional web app (fwa) 项目地址: https://gitcode.com/gh_mirrors/ar/architect Architect.dev 是一个革命性的无服…...
Phi-4-mini-reasoning 3.8B Node.js环境配置与模型调用全指南
Phi-4-mini-reasoning 3.8B Node.js环境配置与模型调用全指南 1. 前言:为什么选择Phi-4-mini-reasoning? Phi-4-mini-reasoning 3.8B是微软推出的轻量级推理模型,特别适合需要快速响应的应用场景。相比动辄几十B参数的大模型,这…...
RexUniNLU效果展示:多领域文本信息抽取真实案例解析
RexUniNLU效果展示:多领域文本信息抽取真实案例解析 1. 引言:当文本遇见“零样本”理解 想象一下,你拿到一份全新的合同、一篇陌生的行业报告,或者一堆杂乱无章的客户反馈。你需要快速从中找出关键信息:谁、在什么时…...
2026年,教培机构不可错过的在线教学平台大盘点
一、在线教育的崛起与挑战随着互联网技术的飞速发展,在线教育迎来了爆发式增长,成为教育领域的重要力量。据艾瑞咨询数据显示,中国在线教育行业市场规模已突破 6000 亿元,并呈现持续增长趋势。特别是在疫情期间,在线教…...
如何用双路PWM实现16bit DAC输出?MCU音频信号处理实战
如何用双路PWM实现16bit DAC输出?MCU音频信号处理实战 在嵌入式音频开发中,高精度DAC输出往往是提升音质的关键。但当你手头的MCU主频有限,内置DAC分辨率不足时,如何突破硬件限制?本文将带你深入双路PWM分频叠加技术的…...
OpenClaw安全实践:Qwen3.5-9B本地化处理敏感数据
OpenClaw安全实践:Qwen3.5-9B本地化处理敏感数据 1. 为什么金融从业者需要本地化AI助手 上个月我帮一位在投行工作的朋友分析季度财报时,遇到了一个典型困境:他们需要从上百页PDF中提取关键财务指标,但公司禁止使用任何第三方云…...
别再手动整理了!用这招自动同步思维导图到Markdown(支持ProcessOn/XMind/MindNode)
思维导图与Markdown自动化同步实战指南 每次会议结束后的文档整理是否让你头疼?技术文档的频繁更新是否消耗了你大量时间?本文将为你揭示一套零干预的自动化工作流,只需专注思维导图创作,Markdown文档会自动同步更新。告别复制粘贴…...
