原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测

 <style>

         body{overflow-x: hidden;width:80%;margin:auto;}

         body:after {

         content: ".";

         clear: both;

         display: block;

         }

         div{width:32%;height: 20vw;background: #e3e4e5;margin-right:2%;box-sizing: content-box;margin-top:1.6vw;float:left;}

         div:nth-of-type(3n+3) {

         margin-right:;

         }

         @keyframes f-up {

             0% {

                 will-change: transform;/*优化动画卡顿1*/

                 /*position:relative;优化动画卡顿2*/

                 /*z-index: 1;优化动画卡顿2*/

                 opacity:; /*初始状态 透明度为0*/

                 transform:translateY(100px);/*初始状态 文档流下100px*/

             }

             100% {

                 opacity:; /*结尾状态 透明度为1*/

                 transform:translateY(0px);/*初始状态 恢复正常位置*/

             }

         }

         .f-up{

             animation-name: f-up; /*动画名称*/

             animation-duration: 0.8s; /*动画持续时间*/

             animation-iteration-count:; /*动画次数*/

             animation-delay: 0s; /*延迟时间*/

         }

 </style>

 <body>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <div class="vanwee"></div>

 <script charset="utf-8" src="//blog-static.cnblogs.com/files/vanwee/fade.js"></script>

 </body>

 <script>

 // 获取浏览器可见区域高度

         var window_height= document.documentElement.clientHeight;

         // 用户手动修改浏览器可见区域高度时修改变量

         window.onresize=function () {window_height=document.documentElement.clientHeight;};

         // 获取所需效果元素

         var My_vanwee=document.getElementsByClassName('vanwee');

         // 鼠标滚轮滚动执行方法

         window.onscroll = function(){

             // 获取鼠标滚轮滚动距离

             var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

             // 循环类vanwee

             for (var k=0;k<My_vanwee.length;k++){

                 if (My_vanwee[k].classList.contains("f-up")==false && _scrollTop >= getOffsetTop(My_vanwee[k]) - window_height && _scrollTop<= getOffsetTop(My_vanwee[k])){

                     My_vanwee[k].classList.add("f-up");

                 }

             }

         };

         // 判断元素父集是否有已定位元素

         function getOffsetTop(ele) {

             var rtn = ele.offsetTop;

             var o = ele.offsetParent;

             while(o!=null) {

                     rtn += o.offsetTop;

                     o = o.offsetParent;

             }

             return rtn;

         }

         // 滚动条等于0时执行第一屏效果

         function my_animation() {

             var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

             // 效果方法

             for (var k=0;k<My_vanwee.length;k++) {

                 if (My_vanwee[k].classList.contains("f-up")==false && _scrollTop>= getOffsetTop(My_vanwee[k]) - window_height && _scrollTop<= getOffsetTop(My_vanwee[k])){

                     My_vanwee[k].classList.add("f-up");

                 }

             }

         }

         my_animation();

 </script>

使用方法：

在想要添加动画的元素上添加class类名：vanwee

由于我只需要从下渐现向上移动的效果，所以从原博主转载过来做了调整，大家有不明白的地方建议查看转载来源博主的详细解说，或者查看本博文最下方的原文复制内容。测试只兼容IE10及以上版本，应该是JS第14行.contains的原因。我魅族手机浏览器竖着看的时候有点闪烁，其他手机和电脑设备均正常。欢迎大佬看到支援。。

JS文件：https://blog-static.cnblogs.com/files/vanwee/fade.js

转载来源：https://blog.csdn.net/likeyou1207/article/details/80782935

原博文内容：

废话不多说，直接上代码，附用法，纯博主手写，看完后，觉得好左上角请点个赞,觉得不好的请留下您的建议，谢谢（此代码改版很方便，大家可以任意发挥）

（注意：如果不想自己写动画的，可以引入Animate.css 相信这个动画库大家都不陌生）

 body{overflow-x: hidden;}

 div{width: 100px;height: 100px;margin: 100px auto 0;background: red;}

 <body>

     <div class="dream" data-animate="bounceInUp,1s,linear"></div>

     <div class="dream" data-animate="flash,2s,linear"></div>

     <div class="dream" data-animate="pulse,1s,linear"></div>

     <div class="dream" data-animate="rubberBand,1s,linear"></div>

     <div class="dream" data-animate="shake,1s,linear"></div>

     <div class="dream" data-animate="swing,1s,linear"></div>

     <div class="dream" data-animate="tade,1s,linear"></div>

     <div class="dream" data-animate="wobble,1s,linear"></div>

     <div class="dream" data-animate="jello,1s,linear"></div>

     <div class="dream" data-animate="bounceIn,1s,linear"></div>

     <div class="dream" data-animate="bounceInDown,1s,linear"></div>

     <div class="dream" data-animate="bounceInLeft,1s,linear"></div>

     <div class="dream" data-animate="bounceInRight,1s,linear"></div>

     <div class="dream" data-animate="bounceInUp,1s,linear"></div>

     <div class="dream" data-animate="bounceOut,1s,linear"></div>

     <div class="dream" data-animate="bounceOutDown,1s,linear"></div>

     <div class="dream" data-animate="bounceOutLeft,1s,linear"></div>

     <div class="dream" data-animate="bounceOutRight,1s,linear"></div>

     <div class="dream" data-animate="bounceOutUp,1s,linear"></div>

     <div class="dream" data-animate="fadeIn,1s,linear"></div>

     <div class="dream" data-animate="fadeInDown,1s,linear"></div>

     <div class="dream" data-animate="fadeInLeft,1s,linear"></div>

     <div class="dream" data-animate="fadeInRight,1s,linear"></div>

     <div class="dream" data-animate="fadeInUp,1s,linear"></div>

     <div class="dream" data-animate="fadeInDownBig,1s,linear"></div>

     <div class="dream" data-animate="fadeInLeftBig,1s,linear"></div>

     <div class="dream" data-animate="fadeInRightBig,1s,linear"></div>

     <div class="dream" data-animate="fadeInUpBig,1s,linear"></div>

     <div class="dream" data-animate="flip,1s,linear"></div>

     <div class="dream" data-animate="hinge,1s,linear"></div>

 </body>

 <script>

 // 获取浏览器可见区域高度

 var window_height= document.documentElement.clientHeight;

 // 用户手动修改浏览器可见区域高度时修改变量

 window.onresize=function () {

     window_height=document.documentElement.clientHeight;

 };

 // 获取所需效果元素

 var My_dream=document.getElementsByClassName('dream');

 // 鼠标滚轮滚动执行方法

 window.onscroll = function(){

     // 获取鼠标滚轮滚动距离

     var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

     // 循环类dream

     for (var k=0;k<My_dream.length;k++){

         if (_scrollTop>= getOffsetTop(My_dream[k]) - window_height && _scrollTop<= getOffsetTop(My_dream[k]) ){

             My_dream[k].style.animationName=My_dream[k].dataset.animate.split(',')[0];

             My_dream[k].style.animationDuration=My_dream[k].dataset.animate.split(',')[1];

             My_dream[k].style.animationTimingFunction=My_dream[k].dataset.animate.split(',')[2];

         }

     }

 };

 // 判断元素父集是否有已定位元素

 function getOffsetTop(ele) {

     var rtn = ele.offsetTop;

     var o = ele.offsetParent;

     while(o!=null)

     {

         rtn += o.offsetTop;

         o = o.offsetParent;

     }

     return rtn;

 }

 // 滚动条等于0时执行第一屏效果

 function my_animation() {

     var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

     // 效果方法

     for (var k=0;k<My_dream.length;k++){

         if (_scrollTop>= getOffsetTop(My_dream[k]) - window_height && _scrollTop<= getOffsetTop(My_dream[k]) ){

             My_dream[k].style.animationName=My_dream[k].dataset.animate.split(',')[0];

             My_dream[k].style.animationDuration=My_dream[k].dataset.animate.split(',')[1];

             My_dream[k].style.animationTimingFunction=My_dream[k].dataset.animate.split(',')[2];

         }

     }

 }

 my_animation();

 </script>

用法很简单：

1)注意：没有自己写动画效果时，记得引入animate.css动画库

2)在想要添加动画的元素上添加class类名 dream

3)然后添加自定义属性（ data-animate="动画名称,动画时间,动画速率" ），注意中间有 ","号隔开

4)加上后查看效果即可，使用前可以先复制博主代码查看下效果

（您的评价是对博主最大的鼓励，欢迎评价，觉得好左上角请点个赞，觉得不好的请留下您的建议，谢谢 (*￣︶￣) ）

如果您还是觉得很模糊的，请留下您的联系方式，博主会在一天内给您回复
---------------------
作者：likeYou1207
来源：CSDN
原文：https://blog.csdn.net/likeyou1207/article/details/80782935
版权声明：本文为博主原创文章，转载请附上博文链接！

友情链接：

上海网页设计公司

原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测的更多相关文章

使用原生JS，实现鼠标点击爱心效果！！！
使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...
JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性二.设置元素的属性三.删除元素的属性一.获取元素的属性 1-原生JS 获取属性 .ge ...
利用jquery制作滚动到指定位置触发动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...
scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置
scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...
JS/jquery实现鼠标控制页面元素显隐
最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...
原生js与jquery加载页面元素比较
原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascrip ...
html/css 滚动到元素位置，显示加载动画
每次滚动到元素时,都显示加载动画,如何添加? 元素添加初始参数以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部. 添加初始数据,默认透明度0.左右分别移动100px. //左侧容器 .it ...
原生JS 实现点击按钮创建元素
要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...
原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项
一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去 ...

随机推荐

[Postman]排除API请求(9)
可能存在API无法运行或出现意外行为的情况.如果您没有收到任何回复,邮递员将显示有关连接服务器时出错的消息. 有关错误可能原因的更多详细信息,请打开Postman Console.它有关于故障的详细信 ...
swiper在vue项目中的循环轮播bug以及点击事件
一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. ...
Informatica
安装相关专题关于Bulk加载模式性能调优性能瓶颈性能瓶颈概览性能瓶颈之Target 性能瓶颈之Source 性能瓶颈之Mapping 性能瓶颈之Session 性能瓶颈之System 性能 ...
将本地代码上传到github走过的坑
1.因为github是服务端,需要自己在自己的电脑上安装一个客户端git 2.配置SSH(配置一次就好了) github是不能随便上传代码上去的,而是通过一种网络协议---SSH授权的.SSH是一种网 ...
Redis主从+KeepAlived实现高可用
Redis是我们当下比较流行使用的非关系数据库,可支持多样化的数据类型,多线程高并发支持,redis运行在内存拥有更快的读写.因为redis的表现如此出色,如何能保障redis在运行中能够应对宕机故障 ...
mysql 开发进阶篇系列 54 权限与安全(账号管理的各种权限操作下)
1. 查看权限 -- 如果host值不是%, 就要加上host值,下面查看bkpuser用户权限(6个权限, 限本地连接) SHOW GRANTS FOR bkpuser@localhost; -- ...
微信小程序：防止多次点击跳转（函数节流）和防止表单组件输入内容多次验证（函数防抖）
一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生 ...
关于css,js放置位置的问题
一天,小明正在网上查找资料,项目中遇到的问题需要通过查阅资料来解决,他看到一个标题很有意思,觉得这应该是他要找的答案,于是他就点了进去,结果进入网站后几秒钟的时间,网页还是一片空白,过了好久才加载完成 ...
再也不用被this苦恼了
前端编程对于this再熟悉不过了,今日来个老调重弹温故知新,肯定有很多大佬已经完全吃透了this原理,敬请出门左拐.对于理解this似懂非懂的同学可以借鉴一波 1.this描述 this指的是当前执行 ...
Perl语法的基本规则
因为是比较凌乱的用法规则收集,所以能看懂则看,不能看懂也无所谓.以后也会遇到. Perl脚本第一行使用#!.Perl的后缀名一般为".plx"或".pl",运行 ...

原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测

废话不多说，直接上代码，附用法，纯博主手写，看完后，觉得好左上角请点个赞,觉得不好的请留下您的建议，谢谢（此代码改版很方便，大家可以任意发挥）

原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测的更多相关文章

随机推荐

热门专题