js实现页面滚动到指定位置触发动画_js 页面滑动到模块再动画

//说明：
   //使用：在需要添加动画的元素上添加 myAnim='xxx'属性 
   //其他属性    myTime：动画时间  myDelay：动画延迟 myTarget:由父元素触发动画（id选择器）
   //动画选项 :flip l2r r2l zoomIn fade spinIn
   $(function () {
       //0.8 为添加动画元素的顶部距离屏幕顶部的距离 单位%  即动画何时触发
       var perc = 0.8;

       var flipList = $("[myAnim='flip']") 
       var l2rList = $("[myAnim='l2r']") 
       var r2lList = $("[myAnim='r2l']") 
       var zoomInList = $("[myAnim='zoomIn']") 
       var fadeList = $("[myAnim='fade']") 
       var spinInList = $("[myAnim='spinIn']")

       //防止在浏览到页面中部点击刷新网页时，如果不滚动页面会出现空白内容
       $(document).ready(function(){
           var scrollEvent = new Event('scroll');
           window.dispatchEvent(scrollEvent);
       });
         
       // 初始化添加了自定义动画的css
       (function(){
           if (flipList.length > 0) {
               Array.prototype.forEach.call(flipList, function (ele) {
                   ele.style.transition = "all 0"
                   ele.style.transform = "rotateY(180deg)";
                   ele.style.opacity = 0;
               })
           }
           if (l2rList.length > 0) {
               Array.prototype.forEach.call(l2rList, function (ele) {
                   ele.style.transition = "all 0"
                   ele.style.transform = "translateX(-300px)";
                   ele.style.opacity = 0;
               })
           }
           if (r2lList.length > 0) {
               Array.prototype.forEach.call(r2lList, function (ele) {
                   ele.style.transition = "all 0"
                   ele.style.transform = "translateX(300px)";
                   ele.style.opacity = 0;
               })
           }
           if (zoomInList.length > 0) {
               Array.prototype.forEach.call(zoomInList, function (ele) {
                   ele.style.transition = "all 0"
                   ele.style.transform = "scale(0)";
                   ele.style.opacity = 0;
               })
           }
           if (fadeList.length > 0) {
               Array.prototype.forEach.call(fadeList, function (ele) {
                   ele.style.transition = "all 0"
                   ele.style.opacity = 0;
               })
           }
           if (spinInList.length > 0) {
               Array.prototype.forEach.call(spinInList, function (ele) {
                   ele.style.transition = "all 0"
                   ele.style.transform = "rotate(-180deg) scale(0.4)";
                   ele.style.opacity = 0;
               })
           }
       })()
       window.addEventListener('scroll', function () {
           if (flipList.length > 0) {
               Array.prototype.forEach.call(flipList, function (ele) {
                   var duration = ele.getAttribute("myTime") || "1000ms";
                   var delay = ele.getAttribute("myDelay") || "0ms";
                   var target_id = ele.getAttribute("myTarget") || undefined;
                   var target = document.getElementById(target_id);
                   if (isInscreen(target, perc) || isInscreen(ele, perc)) {
                       ele.style.transitionDuration = duration;
                       ele.style.transitionDelay = delay;
                       ele.style.transitionProperty = "all"
                       ele.style.opacity = 1;
                       ele.style.transform = "rotateY(360deg)"
                   }
               })
           }
           if (l2rList.length > 0) {
               Array.prototype.forEach.call(l2rList, function (ele) {
                   var duration = ele.getAttribute("myTime") || "1000ms";
                   var delay = ele.getAttribute("myDelay") || "0ms";
                   var target_id = ele.getAttribute("myTarget") || undefined;
                   var target = document.getElementById(target_id);
                   if (isInscreen(target, perc) || isInscreen(ele, perc)) {
                       ele.style.transitionDuration = duration;
                       ele.style.transitionDelay = delay;
                       ele.style.transitionProperty = "all"
                       ele.style.opacity = 1;
                       ele.style.transform = "translateX(0px)"
                   }
               })
           }
           if (r2lList.length > 0) {
               Array.prototype.forEach.call(r2lList, function (ele) {
                   var duration = ele.getAttribute("myTime") || "1000ms";
                   var delay = ele.getAttribute("myDelay") || "0ms";
                   var target_id = ele.getAttribute("myTarget") || undefined;
                   var target = document.getElementById(target_id);
                   if (isInscreen(target, perc) || isInscreen(ele, perc)) {
                       ele.style.transitionDuration = duration;
                       ele.style.transitionDelay = delay;
                       ele.style.transitionProperty = "all"
                       ele.style.opacity = 1;
                       ele.style.transform = "translateX(0px)"
                   }
               })
           }
           if (zoomInList.length > 0) {
               Array.prototype.forEach.call(zoomInList, function (ele) {
                   var duration = ele.getAttribute("myTime") || "1000ms";
                   var delay = ele.getAttribute("myDelay") || "0ms";
                   var target_id = ele.getAttribute("myTarget") || undefined;
                   var target = document.getElementById(target_id);
                   if (isInscreen(target, perc) || isInscreen(ele, perc)) {
                       ele.style.transitionDuration = duration;
                       ele.style.transitionDelay = delay;
                       ele.style.transitionProperty = "all"
                       ele.style.opacity = 1;
                       ele.style.transform = "scale(1)"
                   }
               })
           }
           if (fadeList.length > 0) {
               Array.prototype.forEach.call(fadeList, function (ele) {
                   var duration = ele.getAttribute("myTime") || "1000ms";
                   var delay = ele.getAttribute("myDelay") || "0ms";
                   var target_id = ele.getAttribute("myTarget") || undefined;
                   var target = document.getElementById(target_id);
                   if (isInscreen(target, perc) || isInscreen(ele, perc)) {
                       ele.style.transitionDuration = duration;
                       ele.style.transitionDelay = delay;
                       ele.style.transitionProperty = "all"
                       ele.style.opacity = 1;
                   }
               })
           }
           if (spinInList.length > 0) {
               Array.prototype.forEach.call(spinInList, function (ele) {
                   var duration = ele.getAttribute("myTime") || "1000ms";
                   var delay = ele.getAttribute("myDelay") || "0ms";
                   var target_id = ele.getAttribute("myTarget") || undefined;
                   var target = document.getElementById(target_id);
                   if (isInscreen(target, perc) || isInscreen(ele, perc)) {
                       ele.style.transitionDuration = duration;
                       ele.style.transitionDelay = delay;
                       ele.style.transitionProperty = "all"
                       ele.style.transform = "rotate(-360deg) scale(1)"
                       ele.style.opacity = 1
                   }
               })
           }
       })

       function isInscreen(ele, perc) {
           if(ele == undefined) return false
           // 元素距离可视窗口的顶部的距离
           var boxTop
           boxTop = ele.getBoundingClientRect().top;
           // 窗口的总高度
           var screenHeight = window.screen.availHeight;
           var realPenc = boxTop / screenHeight
           if (realPenc < perc) {
               return true
           }
           return false
       }
   })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

自己预定了几个动画flip, l2r ,r2l ,zoomIn,fade spinIn，你也可以自己动手写自己的。
看起来代码较多，其实好多都是重复写的动画部分，我认为关键的就function isInScreen(ele, perc){...}这部分——判断元素是否出现在可视窗口中；剩余的就是通过if来加上相应的动画了

使用方法：

• 依赖JQuery
• 在需要添加动画的地方加上 myAnim="xxx" 的属性，如<div myAnim="zoomIn"></div>
• 其他可选参数

myTime="xxx" 动画时长
myDelay="xxx" 动画延迟 单位ms
myTarget="id" 动画的触发元素 默认为当前元素
（这部分你也可以添加一些自定义参数，照着来就好）

其他

• 这是我的第一篇文章，希望大家多多鼓励
• 大家可以尝试结合animate.css来写动画部分，可能会更棒，我这里没用animate方法
• 如果有好的建议，可以到我GitHub地址 https://github.com/Polaris-tl/scrollAnimate.git