微信网页动画---swiper.animate.css

项目需要，自己写了个demo
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./lib/swiper/swiper.css">
    <link rel="stylesheet" href="./lib/swiper/swiper.animate/animate.css">
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height: 100%;
            font-family: arial,helvetica;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
            text-align: center;
        }

        #slide1{
            background: #BFDA00;
        }

        #slide2{
            background: #2C3E50;
        }

        #slide3{
            background: #AC4F2C;
        }

        .mySpan{
            width:60px;
            height:60px;
        }
        .pic1{
            position:absolute;
            top: 200px;
            left: 60px;
            background: url(./img/gaugin.jpg);
        }
        .pic2{
            position:absolute;
            top: 80px;
            left: 150px;
            background: url(./img/giotto.jpg);
        }
        .pic3{
            position:absolute;
            top: 180px;
            right: 40px;
            background: url(./img/leonardo.jpg);
        }
        .pic4{
            position:absolute;
            top:230px;
            right:80px;
            background: url(./img/warhol.jpg);
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" id="slide1">
                <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s">内容</p>
                <span class="ani mySpan pic1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"></span>
                <span class="ani mySpan pic2" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.2s" swiper-animate-delay="0.5s"></span>
                <span class="ani mySpan pic3" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.3s" swiper-animate-delay="0.4s"></span>
                <span class="ani mySpan pic4" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.6s" swiper-animate-delay="0.2s"></span>
            </div>
            <div class="swiper-slide" id="slide2">
            </div>
            <div class="swiper-slide" id="slide3">
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src="./lib/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./lib/swiper/swiper.jquery.min.js"></script>
    <script type="text/javascript" src="./lib/swiper/swiper.animate/swiper.animate1.0.2.min.js"></script>
    <script type="text/javascript">
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'vertical',
            loop: false,
            grabCursor: true,
            roundLengths : true,
            freeMode: false,
            effect:"slide",
            resistanceRatio : 0,
            onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
                swiperAnimateCache(swiper); //隐藏动画元素 
                swiperAnimate(swiper); //初始化完成开始动画
            },
            onSlideChangeEnd: function(swiper){ 
                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            }
        })       
    </script>
</body>
</html>
API
http://www.swiper.com.cn/usage/animate/index.html
微信网页动画---swiper.animate.css

推荐阅读
