动画完整版

banner.html

@@ -13,6 +13,7 @@
   <div class="bannerBox">
     <div class="width1200">
       <div class="banner">
+        <div class="lottie" id="lottie"></div>
         <div class="bannerTitleBox">
           <div class="bannerTitle bannerTitle1">云上协同</div>
           <div class="bannerTitle bannerTitle2">积累造价数据资产</div>
@@ -25,24 +26,24 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/bootstrap/bootstrap.min.js"></script>
-  <script src="js/global.js"></script>
-  <script src="js/videojs/video.js"></script>
-  <script src="js/videojs-playlist/videojs-playlist.js"></script>
-  <script src="js/videojs-playlist/videojs-playlist-ui.js" ></script>
-  <script src="js/videojs-flash/videojs-flash.js" ></script>
-  <!-- <script src="lang/zh-CN.js"></script> -->
-  <script src="js/videoList.js"></script>
+  <!-- <script src="js/global.js"></script> -->
+  <script src="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.8.1/lottie.min.js"></script>
   <script type="text/javascript">
-    function topFunction() {
-      document.body.scrollTop = 0;
-      document.documentElement.scrollTop = 0;
-    }
+    var anim;
+    var elem = document.getElementById('lottie');
+    lottie.loadAnimation({
+      container:elem,
+      renderer:'svg',
+      loop:true,
+      autoplay:true,
+      path:'https://assets5.lottiefiles.com/packages/lf20_yp6mzzyc.json',
+    });
     // 滚动条到顶部的垂直高度
     console.log($(window).scrollTop());
     // 浏览器显示区域（可视区域）的高度
     console.log($(window).height());
     // 获取页面的文档高度
-    console.log($('.productTwo').offset().top);
+    // console.log($('.productTwo').offset().top);
     console.log();
   </script>
 </body>

css/banner.css

@@ -84,7 +84,7 @@ body{
   z-index:10
 }
 .width1200{
-  width: 1200px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 .table-cell{
@@ -102,12 +102,20 @@ body{
 }
 .banner{
 	position: relative;
-	height: 950px;
-	background: url(img/image_banner_01.png) no-repeat right -110px;
+	width: 100%;
+	max-height: 950px;
+	/*background: url(img/image_banner_01.png) no-repeat right -110px;*/
+}
+.banner .lottie{
+    position: relative;
+    z-index: 50;
+    width: 100%;
+    height: 100%;
 }
 .bannerTitleBox{
 	position: absolute;
-	top: 300px;
+	top: 30%;
+	z-index: 60;
 }
 .bannerTitle{
 	font-size: 64px;

css/styles.css

@@ -84,7 +84,7 @@ body{
   z-index:10
 }
 .width1200{
-  width: 1200px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 .logoCon{
@@ -113,17 +113,25 @@ body{
 	font-weight: 500;
 }
 .bannerBox{
-	height: 950px;
+	height: 900px;
 	background: rgba(245, 247, 253, 1);
 }
 .banner{
 	position: relative;
-	height: 950px;
-	background: url(img/image_banner_01.png) no-repeat right -110px;
+	width: 100%;
+	max-height: 950px;
+	/*background: url(img/image_banner_01.png) no-repeat right -110px;*/
+}
+.banner .lottie{
+  position: relative;
+  z-index: 50;
+  width: 100%;
+  height: 100%;
 }
 .bannerTitleBox{
 	position: absolute;
-	top: 300px;
+	top: 30%;
+	z-index: 60;
 }
 .bannerTitle{
 	font-size: 64px;
@@ -131,22 +139,29 @@ body{
 }
 .bannerTitle1{
 	color: rgba(47, 84, 235, 1);
+	transition: all 0.4s ease-in 0s;
+  transform: translateX(-400px);
 }
 .bannerTitle2{
 	color: rgba(0, 0, 0, 0.8);
+	transition: all 0.8s ease-in 0s;
+  transform: translateX(-600px);
 }
 .bannerTitle3{
 	color: rgba(0, 0, 0, 0.5);
 	font-size: 24px;
+	transition: all 1.2s ease-in 0s;
+  transform: translateX(-600px);
 }
 .btnHand{
 	font-size: 24px;
 	font-weight: 500;
 	padding: 16px 32px;
+	transition: all 1.6s ease-in 0s;
+  transform: translateX(-400px);
 }
 .moreBox{
 	position: absolute;
-	bottom: 30px;
 }
 .moreBox h4{
 	font-size: 14px;
@@ -183,12 +198,12 @@ body{
 	background: #f5f7fd;
 }
 .videoLeft{
-	width: 843px;
+	max-width: 843px;
 	height: 474px;
 	/*background: #000 url(img/image_video_cover_07.png) no-repeat;*/
 }
 .videoRight{
-	width: 357px;
+	max-width: 357px;
 	height: 474px;
 }
 .videoRight .vjs-playlist{
@@ -234,6 +249,9 @@ body{
 .product{
 	position: relative;	
 }
+.productOne{
+	height: 800px !important;
+}
 .productOne,.productTwo{
 	height: 730px;
 	border-left: 2px solid rgba(0, 0, 0, 0.1);
@@ -297,16 +315,22 @@ body{
   transform: translateX(200px);
 }
 .productOneImg{
-	background: url(img/css_sprites.png) no-repeat 0 0;
-  transition-delay: 0.2s;
+	/*background: url(img/css_sprites.png) no-repeat 0 0;*/
+  /*transition-delay: 0.2s;*/
+}
+#productOneImg,#productTwoImg,#productThreeImg{
+	position: relative;
+  z-index: 50;
+  width: 100%;
+  height: 100%;
 }
 .productTwoImg{
-	background: url(img/css_sprites.png) no-repeat 0 -224px;
-	transition-delay: 0.2s;
+	/*background: url(img/css_sprites.png) no-repeat 0 -224px;
+	transition-delay: 0.2s;*/
 }
 .productThreeImg{
-	background: url(img/css_sprites.png) no-repeat 0 -448px;
-	transition-delay: 0.2s;
+	/*background: url(img/css_sprites.png) no-repeat 0 -448px;
+	transition-delay: 0.8s;*/
 }
 .productRImg{
 	position: absolute;
@@ -325,6 +349,7 @@ body{
 	background: url(img/image_cpgn_02_01.png) no-repeat;
 	box-shadow: -20px -20px 40px -15px rgba(0, 0, 0, 0.24);
 	transition-delay: 0.2s;
+	transform: translateX(200px);
 }
 .productTwoRImg2{
 	top: 64px;
@@ -333,7 +358,8 @@ body{
 	height: 496px;
 	background: url(img/image_cpgn_02_02.png) no-repeat;
 	box-shadow: -20px -20px 40px -10px rgba(0, 0, 0, 0.24);
-	transition-delay: 0.4s;
+	transition-delay: 1.2s;
+	transform: translateX(600px);
 }
 .productTwoRImg3{
 	top: 180px;
@@ -342,14 +368,15 @@ body{
 	height: 380px;
 	background: url(img/image_cpgn_02_03.png) no-repeat;
 	box-shadow: -20px -20px 40px -10px rgba(0, 0, 0, 0.24);
-	transition-delay: 0.6s;
+	transition-delay: 1.8s;
+	transform: translateX(600px);
 	/*box-shadow: 0px 13.3px 53.3px rgba(0, 0, 0, 0.24);*/
 }
 .productThreeRImg1{
 	width: 843px;
 	height: 600px;
 	background: url(img/image_cpgn_0103_bg.png) no-repeat;
-	transition-delay: 0.2s;
+	transition-delay: 0.4s;
 }
 .productThreeRImg2{
 	top: 107px;
@@ -358,7 +385,7 @@ body{
 	height: 386px;
 	background: url(img/iamge_cpgn_03.png) no-repeat;
 	box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.24);
-	transition-delay: 0.4s;
+	transition-delay: 0.8s;
 }
 .productOneR1{
   transition-delay: 0.4s;

index.html

@@ -44,6 +44,7 @@
   <div class="bannerBox">
     <div class="width1200">
       <div class="banner">
+        <div class="lottie" id="lottie"></div>
         <div class="bannerTitleBox">
           <div class="bannerTitle bannerTitle1">云上协同</div>
           <div class="bannerTitle bannerTitle2">积累造价数据资产</div>
@@ -130,7 +131,9 @@
                   <div class="productText">官方正版，免费注册</div>
                   <div class="productText">永久免费，不限使用</div>
                   <div class="productText">支持苹果系统、国产系统</div>
-                  <div class="productImg productOneImg hiddenTranX1 mt-3"></div>
+                  <div class="productImg productOneImg hiddenTranX1 mt-3">
+                    <div id="productOneImg"></div>
+                  </div>
                 </div>
               </div>
               <div class="col-8">
@@ -190,7 +193,9 @@
                   <div class="productText">Web端实时访问，办公更便捷</div>
                   <div class="productText">数据云端存储，数据更安全</div>
                   <div class="productText">版本自动升级，工作更轻松</div>
-                  <div class="productImg productTwoImg hiddenTranX1 mt-3"></div>
+                  <div class="productImg productTwoImg hiddenTranX1 mt-3">
+                    <div id="productTwoImg"></div>
+                  </div>
                 </div>
               </div>
               <div class="col-8">
@@ -211,7 +216,9 @@
                   <div class="productText">一键分享，办公简单化</div>
                   <div class="productText">多方协同，工作效率高</div>
                   <div class="productText">设置灵活，用户体验佳</div>
-                  <div class="productImg productThreeImg hiddenTranX1 mt-3"></div>
+                  <div class="productImg productThreeImg hiddenTranX1 mt-3">
+                    <div id="productThreeImg"></div>
+                  </div>
                 </div>
               </div>
               <div class="col-8">
@@ -439,7 +446,40 @@
   <script src="js/videojs-flash/videojs-flash.js" ></script>
   <!-- <script src="lang/zh-CN.js"></script> -->
   <script src="js/videoList.js"></script>
+  <script src="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.8.1/lottie.min.js"></script>
   <script type="text/javascript">
+    var elem = document.getElementById('lottie');
+    lottie.loadAnimation({
+      container:elem,
+      renderer:'svg',
+      loop:true,
+      autoplay:true,
+      path:'https://assets5.lottiefiles.com/packages/lf20_yp6mzzyc.json',
+    });
+    var productOneImg = document.getElementById('productOneImg');
+    lottie.loadAnimation({
+      container:productOneImg,
+      renderer:'svg',
+      loop:true,
+      autoplay:true,
+      path:'https://assets4.lottiefiles.com/packages/lf20_5jhsadzt.json',
+    });
+    var productTwoImg = document.getElementById('productTwoImg');
+    lottie.loadAnimation({
+      container:productTwoImg,
+      renderer:'svg',
+      loop:true,
+      autoplay:true,
+      path:'https://assets10.lottiefiles.com/packages/lf20_ukrir6i9.json',
+    });
+    var productThreeImg = document.getElementById('productThreeImg');
+    lottie.loadAnimation({
+      container:productThreeImg,
+      renderer:'svg',
+      loop:true,
+      autoplay:true,
+      path:'https://assets3.lottiefiles.com/packages/lf20_1ivyceoz.json',
+    });
     function topFunction() {
       document.body.scrollTop = 0;
       document.documentElement.scrollTop = 0;
@@ -449,7 +489,7 @@
     // 浏览器显示区域（可视区域）的高度
     console.log($(window).height());
     // 获取页面的文档高度
-    console.log($('.productTwo').offset().top);
+    console.log($('.productOne').offset().top);
     console.log();
   </script>
 </body>

js/global.js

@@ -1,22 +1,29 @@
 $(function(){
 	$(".zhzdFir").click(function () {
 		$(this).toggleClass("now").siblings(".zhzdMenu").slideToggle("fast")
-	})
+	});
+	$('.bannerTitle1,.bannerTitle2,.bannerTitle3,.btnHand').addClass('show');
 })
-$(window).bind("scroll",function() {
-  if ($(document).scrollTop() + $(window).height() + 550 >= $('.productTwo').offset().top) {    
-    $('.productOneImg,.productOneRImg,.productOneR1,.productOneR2,.productOneR3,.productOneR4,.productOneR5,.productOneR6').addClass('show');
+$(window).scroll(function () {
+  var fold = $(window).height() + $(window).scrollTop();
+  if (fold > $(".bannerBox").offset().top) {
+  	$('.bannerTitle1,.bannerTitle2,.bannerTitle3,.btnHand').addClass('show');
   }else{
-  	$('.productOneImg,.productOneRImg,.productOneR1,.productOneR2,.productOneR3,.productOneR4,.productOneR5,.productOneR6').removeClass('show');
+  	$('.bannerTitle1,.bannerTitle2,.bannerTitle3,.btnHand').removeClass('show');
   }
-  if ($(document).scrollTop() + $(window).height() + 550 >= $('.productThree').offset().top) {    
-    $('.productTwoImg,.productTwoRImg1,.productTwoRImg2,.productTwoRImg3').addClass('show');
-  }else{
+  if (fold > $(".productOne").offset().top || $(window).scrollTop() < 2000) {
+  	$('.productOneImg,.productOneRImg,.productOneR1,.productOneR2,.productOneR3,.productOneR4,.productOneR5,.productOneR6').addClass('show');
+  }if($(window).scrollTop() > 2500 || fold < $(".productOne").offset().top){
+  	$('.productOneRImg,.productOneR1,.productOneR2,.productOneR3,.productOneR4,.productOneR5,.productOneR6').removeClass('show');
+  }
+  if (fold > $(".productTwo").offset().top || $(window).scrollTop() < 3000) {
+  	$('.productOneImg,.productTwoImg,.productTwoRImg1,.productTwoRImg2,.productTwoRImg3').addClass('show');
+  }if($(window).scrollTop() > 3500 || fold < $(".productTwo").offset().top){
   	$('.productTwoImg,.productTwoRImg1,.productTwoRImg2,.productTwoRImg3').removeClass('show');
   }
-  if ($(document).scrollTop() + $(window).height() + 550 >= $('.classify').offset().top) {    
-    $('.productThreeImg,.productThreeRImg1,.productThreeRImg2').addClass('show');
-  }else{
+  if (fold > $(".productThree").offset().top || $(window).scrollTop() < 4000) {
+  	$('.productThreeImg,.productThreeRImg1,.productThreeRImg2').addClass('show');
+  }if($(window).scrollTop() > 4300 || fold < $(".productThree").offset().top){
   	$('.productThreeImg,.productThreeRImg1,.productThreeRImg2').removeClass('show');
   }
 })