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列表里混杂着…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中,明确沟通敏捷转型目的尤为关键,团队成员只有清晰理解转型背后的原因和利益,才能降低对变化的…...
在 Spring Boot 中使用 JSP
jsp? 好多年没用了。重新整一下 还费了点时间,记录一下。 项目结构: pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...
AI语音助手的Python实现
引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...
【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验
Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...
API网关Kong的鉴权与限流:高并发场景下的核心实践
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中,API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关,Kong凭借其插件化架构…...
Vue 3 + WebSocket 实战:公司通知实时推送功能详解
📢 Vue 3 WebSocket 实战:公司通知实时推送功能详解 📌 收藏 点赞 关注,项目中要用到推送功能时就不怕找不到了! 实时通知是企业系统中常见的功能,比如:管理员发布通知后,所有用户…...
