原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测
程序员文章站
2023-02-21 07:57:02
预览链接：https://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/ 使用方法： 在想要添加动画的元素上添加class类名：vanwee 由于我只需要从下渐现向上移动的效果，所以从原博主转载过来做了调整，大家有不明白的地方建议查看转载来源博 ......
预览链接：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.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
版权声明：本文为博主原创文章，转载请附上博文链接！