原生JS实现随着鼠标滚动到元素位置触发对应css3…

2019-01-22 02:00:08来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

预览链接:https://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/

 1 <style>
 2         body{overflow-x: hidden;width:80%;margin:auto;}
 3         body:after {
 4         content: ".";
 5         clear: both;
 6         display: block;
 7         }
 8         div{width:32%;height: 20vw;background: #e3e4e5;margin-right:2%;box-sizing: content-box;margin-top:1.6vw;float:left;}
 9         div:nth-of-type(3n+3) {
10         margin-right: 0;
11         }
12         @keyframes f-up {
13             0% {
14                 will-change: transform;/*优化动画卡顿1*/
15                 /*position:relative;优化动画卡顿2*/
16                 /*z-index: 1;优化动画卡顿2*/
17                 opacity: 0; /*初始状态 透明度为0*/
18                 transform:translateY(100px);/*初始状态 文档流下100px*/
19             }
20             100% {
21                 opacity: 1; /*结尾状态 透明度为1*/
22                 transform:translateY(0px);/*初始状态 恢复正常位置*/
23             }
24         }
25         .f-up{
26             animation-name: f-up; /*动画名称*/
27             animation-duration: 0.8s; /*动画持续时间*/
28             animation-iteration-count: 1; /*动画次数*/
29             animation-delay: 0s; /*延迟时间*/
30         }
31 </style>
 1 <body>
 2 <div class="vanwee"></div>
 3 <div class="vanwee"></div>
 4 <div class="vanwee"></div>
 5 <div class="vanwee"></div>
 6 <div class="vanwee"></div>
 7 <div class="vanwee"></div>
 8 <div class="vanwee"></div>
 9 <div class="vanwee"></div>
10 <div class="vanwee"></div>
11 <div class="vanwee"></div>
12 <div class="vanwee"></div>
13 <div class="vanwee"></div>
14 <div class="vanwee"></div>
15 <div class="vanwee"></div>
16 <div class="vanwee"></div>
17 <div class="vanwee"></div>
18 <div class="vanwee"></div>
19 <div class="vanwee"></div>
20 <div class="vanwee"></div>
21 <div class="vanwee"></div>
22 <div class="vanwee"></div>
23 <div class="vanwee"></div>
24 <div class="vanwee"></div>
25 <div class="vanwee"></div>
26 <div class="vanwee"></div>
27 <div class="vanwee"></div>
28 <div class="vanwee"></div>
29 <div class="vanwee"></div>
30 <div class="vanwee"></div>
31 <div class="vanwee"></div>
32 <div class="vanwee"></div>
33 <div class="vanwee"></div>
34 <div class="vanwee"></div>
35 <div class="vanwee"></div>
36 <div class="vanwee"></div>
37 <div class="vanwee"></div>
38 <div class="vanwee"></div>
39 <div class="vanwee"></div>
40 <div class="vanwee"></div>
41 <div class="vanwee"></div>
42 <script charset="utf-8" src="//blog-static.cnblogs.com/files/vanwee/fade.js"></script>
43 </body>
 1 <script>
 2 // 获取浏览器可见区域高度
 3         var window_height= document.documentElement.clientHeight;
 4         // 用户手动修改浏览器可见区域高度时修改变量
 5         window.onresize=function () {window_height=document.documentElement.clientHeight;};
 6         // 获取所需效果元素
 7         var My_vanwee=document.getElementsByClassName('vanwee');
 8         // 鼠标滚轮滚动执行方法
 9         window.onscroll = function(){
10             // 获取鼠标滚轮滚动距离
11             var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
12             // 循环类vanwee
13             for (var k=0;k<My_vanwee.length;k++){
14                 if (My_vanwee[k].classList.contains("f-up")==false && _scrollTop >= getOffsetTop(My_vanwee[k]) - window_height && _scrollTop<= getOffsetTop(My_vanwee[k])){
15                     My_vanwee[k].classList.add("f-up");
16                 }
17             }
18         };
19         // 判断元素父集是否有已定位元素
20         function getOffsetTop(ele) {
21             var rtn = ele.offsetTop;
22             var o = ele.offsetParent;
23             while(o!=null) {
24                     rtn += o.offsetTop;
25                     o = o.offsetParent;
26             }
27             return rtn;
28         }
29         // 滚动条等于0时执行第一屏效果
30         function my_animation() {
31             var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
32             // 效果方法
33             for (var k=0;k<My_vanwee.length;k++) {
34                 if (My_vanwee[k].classList.contains("f-up")==false && _scrollTop>= getOffsetTop(My_vanwee[k]) - window_height && _scrollTop<= getOffsetTop(My_vanwee[k])){
35                     My_vanwee[k].classList.add("f-up");
36                 }
37             }
38         }
39         my_animation();
40 </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  相信这个动画库大家都不陌生)

1 body{overflow-x: hidden;}
2 div{width: 100px;height: 100px;margin: 100px auto 0;background: red;}
 1 <body>
 2     <div class="dream" data-animate="bounceInUp,1s,linear"></div>
 3     <div class="dream" data-animate="flash,2s,linear"></div>
 4     <div class="dream" data-animate="pulse,1s,linear"></div>
 5     <div class="dream" data-animate="rubberBand,1s,linear"></div>
 6     <div class="dream" data-animate="shake,1s,linear"></div>
 7     <div class="dream" data-animate="swing,1s,linear"></div>
 8     <div class="dream" data-animate="tade,1s,linear"></div>
 9     <div class="dream" data-animate="wobble,1s,linear"></div>
10     <div class="dream" data-animate="jello,1s,linear"></div>
11     <div class="dream" data-animate="bounceIn,1s,linear"></div>
12     <div class="dream" data-animate="bounceInDown,1s,linear"></div>
13     <div class="dream" data-animate="bounceInLeft,1s,linear"></div>
14     <div class="dream" data-animate="bounceInRight,1s,linear"></div>
15     <div class="dream" data-animate="bounceInUp,1s,linear"></div>
16     <div class="dream" data-animate="bounceOut,1s,linear"></div>
17     <div class="dream" data-animate="bounceOutDown,1s,linear"></div>
18     <div class="dream" data-animate="bounceOutLeft,1s,linear"></div>
19     <div class="dream" data-animate="bounceOutRight,1s,linear"></div>
20     <div class="dream" data-animate="bounceOutUp,1s,linear"></div>
21     <div class="dream" data-animate="fadeIn,1s,linear"></div>
22     <div class="dream" data-animate="fadeInDown,1s,linear"></div>
23     <div class="dream" data-animate="fadeInLeft,1s,linear"></div>
24     <div class="dream" data-animate="fadeInRight,1s,linear"></div>
25     <div class="dream" data-animate="fadeInUp,1s,linear"></div>
26     <div class="dream" data-animate="fadeInDownBig,1s,linear"></div>
27     <div class="dream" data-animate="fadeInLeftBig,1s,linear"></div>
28     <div class="dream" data-animate="fadeInRightBig,1s,linear"></div>
29     <div class="dream" data-animate="fadeInUpBig,1s,linear"></div>
30     <div class="dream" data-animate="flip,1s,linear"></div>
31     <div class="dream" data-animate="hinge,1s,linear"></div>
32 </body>
 1 <script>
 2 // 获取浏览器可见区域高度
 3 var window_height= document.documentElement.clientHeight;
 4 // 用户手动修改浏览器可见区域高度时修改变量
 5 window.onresize=function () {
 6     window_height=document.documentElement.clientHeight;
 7 };
 8 // 获取所需效果元素
 9 var My_dream=document.getElementsByClassName('dream');
10 // 鼠标滚轮滚动执行方法
11 window.onscroll = function(){
12     // 获取鼠标滚轮滚动距离
13     var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
14  
15     // 循环类dream
16     for (var k=0;k<My_dream.length;k++){
17         if (_scrollTop>= getOffsetTop(My_dream[k]) - window_height && _scrollTop<= getOffsetTop(My_dream[k]) ){
18             My_dream[k].style.animationName=My_dream[k].dataset.animate.split(',')[0];
19             My_dream[k].style.animationDuration=My_dream[k].dataset.animate.split(',')[1];
20             My_dream[k].style.animationTimingFunction=My_dream[k].dataset.animate.split(',')[2];
21         }
22     }
23 };
24  
25 // 判断元素父集是否有已定位元素
26 function getOffsetTop(ele) {
27     var rtn = ele.offsetTop;
28     var o = ele.offsetParent;
29     while(o!=null)
30     {
31         rtn += o.offsetTop;
32         o = o.offsetParent;
33     }
34     return rtn;
35 }
36  
37 // 滚动条等于0时执行第一屏效果
38 function my_animation() {
39     var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
40     // 效果方法
41     for (var k=0;k<My_dream.length;k++){
42         if (_scrollTop>= getOffsetTop(My_dream[k]) - window_height && _scrollTop<= getOffsetTop(My_dream[k]) ){
43             My_dream[k].style.animationName=My_dream[k].dataset.animate.split(',')[0];
44             My_dream[k].style.animationDuration=My_dream[k].dataset.animate.split(',')[1];
45             My_dream[k].style.animationTimingFunction=My_dream[k].dataset.animate.split(',')[2];
46         }
47     }
48 }
49 my_animation();
50 </script>

用法很简单:

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

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

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

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

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

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


原文链接:https://www.cnblogs.com/vanwee/p/10298954.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:如何修复在移动动表现差异很大的选择框---中级程序员研究

下一篇:Iframe 高度自适应