Making a startup page using Swiper animate

Swiper is a relatively good carousel sliding plug-in, his advantages are not much to say, used all said! Pro can go to the official website to personally test.

The previous time made a slide guide page, need to have a rich animation effect, although it is handwritten effect, but always feel too troublesome, now can use Swiper animate to achieve rich animation effect. The official website is also very simple to explain, here I made a simple small example.

Effect:

Start Making:

Prepare picture material:

Page references related to CSS and JS files:

<link rel= "stylesheet" href= "Js/swiper/swiper-3.3.0.min.css" ><link rel= "stylesheet" href= "js/swiper/ Animate.min.css ">

<script src= "Js/jquery-1.8.3.min.js" ></script><script src= "Js/swiper/swiper-3.3.0.jquery.min.js" ></script><script src= "Js/swiper/swiper.animate1.0.2.min.js" ></script>

HTML main code structure:

<div class= "Swiper-container" >    <div class= "Swiper-wrapper" >        <div class= "Swiper-slide" >                        </div>        <div class= "Swiper-slide" >                        </ div>    </div>    <!--Pager--    <div class= "Swiper-pagination" ></div></div >

Adding the class name ANI to the elements that need to be moving, and the same as other plug-ins, swiper animate needs to specify several parameters:

Swiper-animate-effect: Toggle effects, such as Fadeinup
Swiper-animate-duration: Optional, animation duration (in seconds), e.g. 0.5s
Swiper-animate-delay: Optional, animation delay time (in seconds), e.g. 0.3s

Simple style adjustment:

*{padding:0;margin:0;}. swiper-slide{width:100%;p osition:relative;}. Swiper-slide img{display:block;width:100%;}. Swiper-slide. plane{position:absolute;top:20px;right:20px;width:33%;}. Swiper-slide. sun{position:absolute;top:10px;right:10px;width:30%;}

　　

Configure JS Code:

<script>          var myswiper = new Swiper ('. Swiper-container ', {  pagination: '. Swiper-pagination ',  onInit : The initialization of function (Swiper) {//swiper2.x is Onfirstinit    swiperanimatecache (swiper);//Hide animation element     Swiperanimate (swiper ); Initialization complete start animation  },   onslidechangeend:function (swiper) {     swiperanimate (swiper);//The current slide animation is also run at the end of each slide switch  }   })            </script>

Here you can set the Swiper, such as switching direction, effects and so on. You can also go to the official website to see more animated animations.

Making a startup page using Swiper animate