页面滚动时，动态添加css动画

来源：互联网发布：传奇dbc数据说明编辑：程序博客网时间：2024/06/06 06:30

在别人的网站中，看到页面滚动到某一位置时，该位置的元素通过各种炫酷的动画展示出来。不知道他们是怎么做的，我根据自己的理解做了一个demo。原理很简单，用CSS3预先定义元素的动画效果，先不要添加到元素上。监听window.onscroll的事件，获取页面滚动的高度，当这个元素显示出来时，动态添加该元素的动画效果。（有两种方法，1、通过style.cssText写入样式；2、通过className添加类）。话不多说，直接上代码。

<!doctype html>  <html>  <head>  <meta charset="utf-8">  <title>动态CSS3动画</title>  <style>  * {margin:0; border:0; padding:0;}  body {width:100%; height:2000px;}  #div1 {position:relative;top: 1000px;display: flex;overflow: hidden;}  #div2 {position:relative;top: 1800px;display: flex;overflow: hidden;}#div1 .img,#div2 .img{position: relative;display: inline-block;flex: 1;height: 200px;background-size: 100% 100%;background-repeat: no-repeat;overflow: hidden;}#div1 .img1{background-image: url('img/sbg1.jpg');/* 动画名称 动画时长 动画循环次数*//* animation: slideLeft 1s 1; */}#div1 .img2{background-image: url('img/sbg2.jpg');/* animation: slideBottom 1s 1; */}#div1 .img3{background-image: url('img/sbg3.jpg');/* animation: slideTop 1s 1; */}#div1 .img4{background-image: url('img/sbg4.jpg');/* animation: slideRight 1s 1; */}@keyframes slideRight{from{right: -200px;}to{right: 0px;}}@keyframes slideTop{from{top: -200px;}to{top: 0px;}}  @keyframes slideBottom{from{bottom: -200px;}to{bottom: 0px;}}@keyframes slideLeft{from{left: -200px;}to{left: 0px;}}#div2 .img1{background-image: url('img/sbg1.jpg');/* 动画名称 动画时长 动画循环次数*//* animation: zoomIn 1s 1; */}#div2 .img2{background-image: url('img/sbg2.jpg');/* animation: zoomOut 1s 1; */}#div2 .img3{background-image: url('img/sbg3.jpg');/* animation: rotate 1s 1; */}#div2 .img4{background-image: url('img/sbg4.jpg');/* animation: rotate2 1s 1; */}@keyframes zoomIn{from{transform: scale(0.1);}to{transform: none;}}@keyframes zoomOut{from{transform: scale(2);}to{transform: none;}}@keyframes rotate{from{transform: rotate(360deg) scale(0.1);}to{transform: none;}}@keyframes rotate2{from{transform: rotate(-360deg) scale(2);}to{transform: none;}}.ani1{animation: zoomIn 1s 1; }.ani2{animation: zoomOut 1s 1; }.ani3{animation: rotate 1s 1; }.ani4{animation: rotate2 1s 1; }</style>  <script>  window.onload = function (){//两种方法：1、通过style.cssText写入样式；2、通过className添加类。  // document.getElementById("div1").style.cssText = "animation: slideLeft 1s 1; "  // document.getElementById("div1").className = "ani";  window.onscroll = function (){  var clienth = document.documentElement.clientHeight;  //屏幕高度var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //滚动条滚动高度var div1 = document.getElementById('div1');var div2 = document.getElementById('div2');if (scrollt+clienth>=1000) {div1.getElementsByClassName('img1')[0].style.cssText = 'animation: slideLeft 1s 1';div1.getElementsByClassName('img2')[0].style.cssText = 'animation: slideBottom 1s 1';div1.getElementsByClassName('img3')[0].style.cssText = 'animation: slideTop 1s 1';div1.getElementsByClassName('img4')[0].style.cssText = 'animation: slideRight 1s 1';}console.log(scrollt+clienth)if (scrollt+clienth>=2000) {for (var i = 1; i <= 4; i++) {div2.getElementsByClassName('img'+i)[0].className = 'img img'+i+' ani'+i;}}}  }  </script>  </head>      <body>  <div id="div1"><div class="img img1"></div><div class="img img2"></div><div class="img img3"></div><div class="img img4"></div></div>   <div id="div2"><div class="img img1"></div><div class="img img2"></div><div class="img img3"></div><div class="img img4"></div></div>  </body>  </html>

图片资源就不上传了，随便找几张图片就好了。比较懒，没有添加浏览器的私有前缀，自行添加。

0 0