swiper做宣传画册——swiper动画

最新推荐文章于 2023-07-28 10:45:44 发布

ansheng02

最新推荐文章于 2023-07-28 10:45:44 发布

阅读量903

点赞数

分类专栏： swiper 文章标签： swiper动画

本文链接：https://blog.csdn.net/ansheng02/article/details/89598034

版权

swiper 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

swiper做动画效果进行翻页，主要用于宣传推广，其实网上有很多这样的平台，像易企秀、兔展等……具体效果图如下：

这个效果即将被替换，所以，先做个记录吧。

该效果的实现主要使用了swiper插件，先引入关于swiper的几个文件：

//这个是swiper的css文件
<link href="css/swiperAnimate/swiper.min.css" rel="stylesheet">

//这个是关于swiper动画的css文件
<link href="css/swiperAnimate/animate.min.css" rel="stylesheet">



//以下两个文件不引入也可以实现动画效果
//这个是swiper的JS文件
<script src="js/swiperAnimate/swiper.min.js"></script>

//这个是关于swiper动画的JS文件
<script src="js/swiperAnimate/swiper.animate.min.js"></script>

具体的下载网址：下载Swiper

把图片替换掉，操纵动画效果的主要是在animate.min.css里，具体使用说明参考Swiper Animate使用方法，具体代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="author" content="WELHOME direct purchase Team">
  <meta name="copyright" content="WELHOME direct purchase">
  <title>${message("团长招募")} - WELHOME direct purchase</title>
  <link href="css/swiperAnimate/swiper.min.css" rel="stylesheet">
  <link href="swiperAnimate/animate.min.css" rel="stylesheet">
  <script src="swiperAnimate/swiper.min.js"></script>
  <script src="swiperAnimate/swiper.animate.min.js"></script>
  <style type="text/css">
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-pagination-bullet {
      width: 6px;
      height: 6px;
      background: #333;
      opacity: .4;
    }
    .swiper-pagination-bullet-active {
      opacity: 1;
    }
    @-webkit-keyframes start {
      0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
      60% {opacity: 1;-webkit-transform: translate(0,0);}
      100% {opacity: 0;-webkit-transform: translate(0,-8px);}
    }
    @-moz-keyframes start {
      0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
      60% {opacity: 1;-moz-transform: translate(0,0);}
      100% {opacity: 0;-moz-transform: translate(0,-8px);}
    }
    @keyframes start {
      0%,30% {opacity: 0;transform: translate(0,10px);}
      60% {opacity: 1;transform: translate(0,0);}
      100% {opacity: 0;transform: translate(0,-8px);}
    }
    #array{
      position:absolute;z-index:999;-webkit-animation: start 1.5s infinite ease-in-out;
    }
    .join-img{
      width: 80px;
      height: 80px;
      position: fixed;
      right: 2%;
      bottom: 10%;
      z-index: 9;
    }
  </style>
</head>
<body>
  <main class="center-block house-box" >
    <div class="swiper-container">
    <div class="swiper-wrapper">
    <!-------------slide1----------------->
        <section class="swiper-slide swiper-slide1">

          <img src="swiperAnimate/bonus_01.png" class="ani resize" style="width:320px;left:0px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s"  > 
          <img src="swiperAnimate/002.png"  class="ani resize" style="width:320px;left:0px;z-index:1;" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.5s" swiper-animate-delay="2.5s"  >
          <img src="swiperAnimate/003.png"  class="ani resize" style="width:320px;left:0px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="4s"  >
          <img src="swiperAnimate/bonus_02.png" class="ani resize center-block" style="width:130px;left:0px;z-index:3;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s"  > 
        </section>
     <!---------------slide2-------------->   
        <section class="swiper-slide swiper-slide2">
          <img src="swiperAnimate/bonus_01.png" class="ani resize" style="width:320px;left:0px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s"  > 
          <img src="swiperAnimate/004.png" class="ani resize center-block" style="width:130px;left:0px;z-index:5; " swiper-animate-effect="bounce" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s"  > 
          <img src="swiperAnimate/006.png" class="ani resize center-block" style="width:222px;left:0px;z-index:3;" swiper-animate-effect="zoomInDown" swiper-animate-duration="2.5s" swiper-animate-delay="1s"  >
          <img src="swiperAnimate/007.png"  class="ani resize center-block" style="width:166px;left:0px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="2s"  > 
        </section>
     <!----------------slide3-------------->
        <section class="swiper-slide swiper-slide3">
          <img src="swiperAnimate/bonus_01.png" class="ani resize" style="width:320px;left:0px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"  > 
          <img src="swiperAnimate/008-2.png" class="ani resize center-block" style="width:130px;left:0px;z-index:5; " swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  > 
          <img src="swiperAnimate/009.png" class="ani resize center-block" style="width:250px;left:0px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  > 
          <img src="swiperAnimate/008.png" class="ani resize center-block" style="width:160px;left:0px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"  > 
          
        </section>
        <!-------------slide4----------------->
        <section class="swiper-slide swiper-slide4">
          <img src="swiperAnimate/bonus_01.png" class="ani resize" style="width:320px;left:0px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"  > 
          <img src="swiperAnimate/011.png" class="ani resize center-block" style="width:130px;left:0;z-index:2;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s"   > 
          <img src="swiperAnimate/010.png" class="ani resize center-block" style="width:280px;left:0;z-index:2;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"   > 
        <img src="swiperAnimate/012.png"  class="ani resize center-block" style="width:280px;left:0px;z-index:1;" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"  >
        </section>
    </div>
    
   <img src="swiperAnimate/arrow.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize"> 
  <div class="swiper-pagination"></div>  
</div>

  </main>
</body>
</html>

<script>  

scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
          for (var j=0; j<resizes.length; j++) {
           resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
       resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
       resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
       resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; 
          }
      
  var mySwiper = new Swiper ('.swiper-container', {
   direction : 'vertical',
   pagination: '.swiper-pagination',
  //virtualTranslate : true,
   mousewheelControl : true,
   onInit: function(swiper){
   swiperAnimateCache(swiper);
   swiperAnimate(swiper);
    },
   onSlideChangeEnd: function(swiper){
  swiperAnimate(swiper);
    },
  onTransitionEnd: function(swiper){
  swiperAnimate(swiper);
    },


  watchSlidesProgress: true,

      onProgress: function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
          var slide = swiper.slides[i];
          var progress = slide.progress;  //progress就是运动的百分比
          var translate = progress*swiper.height/4;  
          scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
          var opacity = 1 - Math.min(Math.abs(progress/2),0.5);
          slide.style.opacity = opacity;
      es = slide.style;
      es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')';

        }
      },
  
     onSetTransition: function(swiper, speed) {
        for (var i = 0; i < swiper.slides.length; i++){
          es = swiper.slides[i].style;
      es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';

        }
      },
  
  
  
     })         
  </script>

ansheng02

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
swiper做宣传画册——swiper动画

swiper做动画效果进行翻页，主要用于宣传推广，其实网上有很多这样的平台，像易企秀、兔展等……具体效果图如下：这个效果即将被替换，所以，先做个记录吧。该效果的实现主要使用了swiper插件，先引入关于swiper的几个文件：//这个是swiper的css文件<link href="css/swiperAnimate/swiper.min.css" rel="styles...
复制链接

扫一扫