页面滚动动画1.0

4 years ago · cd8fed9b24
4 changed files with 50 additions and 4 deletions
--- a/index.html
+++ b/index.html
@ -3,16 +3,52 @@
 	<head>
 		<meta charset="utf-8" />
 		<title>组件库</title>
+    <link rel="stylesheet" type="text/css" href="plugins/css/animate.min.css"/>
+    <style type="text/css">
+      div.wow{
+        margin: 10px auto;
+        padding: 150px 0;
+        width: 800px;
+        color: #FFF;
+        font-size: 40px;
+        text-align: center;
+      }
+    </style>
 	</head>
-	<body style="height: 1800px;">
-    <!-- 生产环境--start -->
+	<body style="padding-top: 1000px;">
+    <!-- 生产环境--start --><div class="wow animate__backInLeft" style="background:#CCF">animate__backInLeft</div>
+    <div class="wow animate__backInRight" style="background:#A70">animate__backInRight</div>
+    <div class="wow animate__bounceInLeft" style="background:#950">animate__bounceInLeft</div>
+    <div class="wow animate__bounceInRight" style="background:#C9C">animate__bounceInRight</div>
+    <div class="wow animate__fadeInUp" style="background:#C80">animate__fadeInUp</div>
+    <div class="wow animate__fadeInDown" style="background:#A28">animate__fadeInDown</div>
+    <div class="wow animate__fadeInLeft" style="background:#292">animate__fadeInLeft</div>
+    <div class="wow animate__fadeInRight" style="background:#A00">animate__fadeInRight</div>
+    <div class="wow animate__fadeInTopLeft" style="background:#369">animate__fadeInTopLeft</div>
+    <div class="wow animate__fadeInTopRight" style="background:#9A0">animate__fadeInTopRight</div>
+    <div class="wow animate__zoomIn" style="background:#029">animate__zoomIn</div>
+    <div class="wow animate__slideInLeft" style="background:#4AF">animate__slideInLeft</div>
+    <div class="wow animate__slideInRight" style="background:#26A">animate__slideInRight</div>
+    <script src="plugins/js/wow.min.js" type="text/javascript" charset="utf-8"></script>
 		<script src="plugins/js/conponents.js"></script>
    <script type="text/javascript">
-      var fixed = new Fixed();
      /**
+       * 页面滚动动画
+       * class="wow animate__zoomIn" => wow必须，animate__zoomIn动画名称，可参考animate.css(https://animate.style/)
+       * 
+      **/
+      new WOW({
+        animateClass: 'animate__animated'
+      }).init();
+      
+      
+      
+      /**
+       * 悬浮组件
       * fixedStyle: 组件类型；可选值 'circle'
       * dataValue: 组件内容
      **/
+      var fixed = new Fixed();
      fixed.init({
        fixedStyle: '',
        dataValue: {
--- a/plugins/css/animate.min.css
+++ b/plugins/css/animate.min.css
--- a/plugins/js/conponents.js
+++ b/plugins/js/conponents.js
@ -96,7 +96,7 @@ Fixed.prototype.addEvent = function() {
      } else {
        clearInterval(timer)
      }
-    }, 10)
+    }, 8)
  }
  
  window.onscroll = function() {
--- a/plugins/js/wow.min.js
+++ b/plugins/js/wow.min.js