js实现当某元素出现在可视窗口时才加载某一已定义好的动画（切换class名）

最新推荐文章于 2023-04-26 18:37:53 发布
最新推荐文章于 2023-04-26 18:37:53 发布
阅读量3.1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/85763491
版权

亲测可用，并且代入实际项目也可用哦：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可视区域加载</title>
</head>
<style>
    #showDiv{
        width: 500px;
        height: 350px;
        background-color: red;
        margin: 1000px auto 0 auto;
    }
    @-webkit-keyframes fadeInLeft {
        0%{
            opacity: 0;
            -webkit-transform: translate3d(-100%,0,0);
            -moz-transform: translate3d(-100%,0,0);
            -ms-transform: translate3d(-100%,0,0);
            -o-transform: translate3d(-100%,0,0);
            transform: translate3d(-100%,0,0);
        }
        100%{
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
    }
    .fadeInLeft{
        animation-name: fadeInLeft;
        -webkit-animation-name: fadeInLeft;
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
    }
</style>
<body>
    <div id="showDiv"></div>
</body>
<script>
    function showDiv() {
        var showId = document.getElementById('showDiv');
        var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        var divTop = showId.getBoundingClientRect().top;
        if(divTop<=clients){
            showId.classList.add('fadeInLeft');
        }else{
            showId.classList.remove('fadeInLeft');
        }
    }
    window.onscroll = showDiv;
</script>
</html>

hzxOnlineOk
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信开发小程序实例：全国城市选择源代码.rar
07-10
switchCity源码项目，一个微信小程序的源代码，用来选择全国的城市，并实现城市切换，这个功能相信大家熟悉了。 　　本城市选择功能类似于联系人查找功能，通过右侧的字母索引可快速定位至某一拼音首字母开头的城市，如运行效果图所示，这个功能不仅仅是城市选择，还可用于联系人选择中，学一返三，灵活运用哦。 　　本代码在city.js中对城市信息进行分组 　　在控制代码中编写生命周期函数--监听页面加载，然后添加要匹配的字母范围值，更加屏幕高度设置子元素的高度。
html通过js实现页面加载动画
djian0422的博客
04-26 796
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <...
JS实现网页动画
benlalagang的博客
07-29 2696
JS实现网页动画、核心原理、封装函数、简单例子、测导航案例、导航筋斗云案例
网页到达可视区域再执行动画效果
12-25 6792
下载地址：http://www.bootcdn.cn/wow/   今天发现一个非常有趣的js，wow.min.js，Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的，用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。Wow.js 比其他 JavaScript 视差插件小，类似 Scrollorama（这个非常华丽，但是也更繁杂）。w...
css定义焦点到了才播放动画,CSS3动画之利用requestAnimationFrame触发重新播放功能...
weixin_35384453的博客
08-04 273
css动画css3中引入了animation模块,自此css动画进入了我们的视野。css动画名符其实,会写css样式就可以创作动画，对一些不怎么会JS的设计师也是比较包容的。但也正因为如此，当你需要重新播放或者说手动触发动画时，css的局限性就突显出来了，毕竟它不是一门编程语言。像这种在页面中创建一个按钮，点击按钮时开始播放一段动画这种活交给JS才是最合适的。原理和思路重新播放css动画,我们只需...
onscroll-animation:元素在视图中时的Javascript滚动动画
05-14
OnScroll动画 滚动浏览器时，当元素在视图中时，动画的简单javascript库。 :rocket: :gear: 安装 选项A。 NPM安装 npm install onscroll-animation --save 进口： import OnScrollAnimation from "onscroll-animation" ; const animate = new OnScrollAnimation ( { ... } ) ; 选项B。 使用CDN-直接从jsDelivr CDN加载 < script src =" https://cdn.jsdelivr.net/npm/onscroll-animation@latest/dist/animate.bundle.js " > </ script > < script > var animate = new OnScrollAnima
animate.css+wow.js实现页面动画以及滚动到指定位置执行动画
weixin_46189958的博客
04-26 1751
添加一个淡入效果animate__animated是每个必须加的类animate__fadeIn是动画名称可以在官网去看示例直接复制就可以animate__是前缀fadeIn是动画名称，官网复制后会自动复制上前缀。使用wow.js设置动画持续时间为2秒加上wow类名实现当页面滑动到某一元素时动画在执行，就不用去监听滚动条等等一系列东西了，直接加上wow类名就可以。注册wow wow可以直接控制animate.css的动画延迟时间，或者动画持续时间等等。data-wow-delay：动画开始前的延迟。
html/css 滚动到元素位置，显示加载动画
高先生的猫
07-10 1345
每次滚动到元素时，都显示加载动画，如何添加？ 元素添加初始参数 以上图中的动画为例，添加俩个左右容器，将内容放置在容器内部。 添加初始数据，默认透明度0、左右分别移动100px。 //左侧容器 .item-leftContainer { opacity: 0; transform: translateX(-100px); } //右侧容器 .item-rightContainer { opacity: 0; transform: trans...
关于网页中的动画
张致豪
07-14 1185
发
鼠标滑动到当前页面触发动画效果
热门推荐
小白变怪兽
06-17 2万+
近年来，关于鼠标滑动到当前页面从而触发动画效果十分的火热，今天我们就来学习下这一效果。 一、首先，我们先来了解一下这一效果实现的原理 1.一个网页离不开基本的布局，所以首先就是要先用html将所需要的结构布局出来（长页风格）。 2.另外，这一效果的实现主要是结合css3的自定义动画（animation）来实现的。所以，这一阶段，就需要将你所想要实现的动画效果用css3样式实现出来。
java源码包2
04-20
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
JAVA上百实例源码以及开源项目
01-03
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
JAVA上百实例源码以及开源项目源代码
12-11
5个目标文件，演示Address EJB的实现 ，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
java源码包---java 源码 大量 实例
04-18
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
超爽的抽屉效果.zip
04-19
android 源码学习. 资料部分来源于合法的互联网渠道收集和整理，供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权，请通知本人删除。感谢CSDN官方提供大家交流的平台
关于学习C语言时写的代码.zip
04-19
C语言诞生于美国的贝尔实验室，由丹尼斯·里奇（Dennis MacAlistair Ritchie）以肯尼斯·蓝·汤普森（Kenneth Lane Thompson）设计的B语言为基础发展而来，在它的主体设计完成后，汤普森和里奇用它完全重写了UNIX，且随着UNIX的发展，c语言也得到了不断的完善。为了利于C语言的全面推广，许多专家学者和硬件厂商联合组成了C语言标准委员会，并在之后的1989年，诞生了第一个完备的C标准，简称“C89”，也就是“ANSI C”，截至2020年，最新的C语言标准为2018年6月发布的“C18”。 [5] C语言之所以命名为C，是因为C语言源自Ken Thompson发明的B语言，而B语言则源自BCPL语言。 1967年，剑桥大学的Martin Richards对CPL语言进行了简化，于是产生了BCPL（Basic Combined Programming Language）语言。
机械臂论文.doc
最新发布
04-19
机械臂论文.doc
S7200 and WINCC flexible.doc
04-19
S7200 and WINCC flexible.doc
27.大学生体质测试管理系统的设计与实现-Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文
04-19
27.大学生体质测试管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码（含数据库脚本）+开发文档+lw（高分毕设项目） 详细设计文档介绍链接：http://t.csdnimg.cn/jtyYh 内容概要： 系统主要分为系统管理员、教师和用户三个部分，系统管理员主要功能包括首页、个人中心、用户管理、教师管理、体质测试管理、测试报告管理、测试成绩管理、留言板、系统管理；基本上实现了整个大学生体质测试管理系统信息管理的过程。 全套项目源码+详尽文档，一站式解决您的学习与项目需求。 适用人群： 计算机、通信、人工智能、自动化等专业的学生、老师及从业者。 使用场景及目标： 无论是毕设、期末大作业还是课程设计，一键下载，轻松部署，助您轻松完成项目。 项目代码经过调试测试，确保直接运行，节省您的时间和精力。 其他说明： 项目整体具有较高的学习借鉴价值，基础能力强的可以在此基础上修改调整，以实现不同的功能。
vue2项目当元素第二次出现在可视窗口中还能执行animate.css动画 代码怎么写
03-27
可以通过监听元素是否进入可视窗口，并添加相应的class来触发animate.css动画。 在Vue2中，可以使用vue-waypoint插件来实现监听元素是否进入可视窗口的功能。 1. 安装vue-waypoint插件 ``` npm install vue-waypoint --save ``` 2. 在组件中引入vue-waypoint插件 ``` import Waypoint from 'vue-waypoint' export default { components: { Waypoint }, ... } ``` 3. 在元素上添加waypoint组件，并设置触发进入可视窗口的回调函数 ``` <template> <div> <div class="box" v-waypoint="onWaypoint"> ... </div> </div> </template> <script> import Waypoint from 'vue-waypoint' export default { components: { Waypoint }, methods: { onWaypoint (direction) { if (direction === 'down') { // 元素进入可视窗口 this.$refs.box.classList.add('animated', 'bounceIn') } } } } </script> ``` 在上面的代码中，我们在box元素上添加了v-waypoint指令，并绑定了一个回调函数onWaypoint。当box元素进入可视窗口时，回调函数会被执行，我们可以在回调函数中添加相应的class来触发animate.css动画。 需要注意的是，在回调函数中我们判断了元素进入可视窗口的方向，这是为了防止动画重复触发。如果不加这个判断，元素离开可视窗口后再次进入时会重新触发动画。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hzxOnlineOk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值