animate.css 实现移动端垂直滑动效果

最新推荐文章于 2024-02-01 15:08:36 发布

F2E前端爱好者

最新推荐文章于 2024-02-01 15:08:36 发布

阅读量8.4k

点赞数 1

分类专栏： css3 jquery bootstrap

本文链接：https://blog.csdn.net/laike1355/article/details/51363791

版权

jquery 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

css3

21 篇文章 0 订阅

订阅专栏

bootstrap

15 篇文章 0 订阅

订阅专栏

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <script src="js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            body{
                font-size:16px;
            }
          .swiper-wrapper {
            -webkit-perspective: 1200px;
            -moz-perspective: 1200px;
            -ms-perspective: 1200px;
            perspective: 1200px;
          }
          .swiper-slide {
            position: relative;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
           background-size:100% auto;
           overflow:hidden;
           text-align:center;
           line-height:300px;
          }
        .swiper-slide img{
            width:100%;
            height: 100%;
        }
        .tc{
            text-align: center;
        }
        .mc{
            margin: 0 auto;
        }
        .tl{
            text-align: left;
        }
        .tr{
            text-align: right;
        }
        .rel{position: relative;}
        .abs{position: absolute;}
        .l{float: left;}
        .r{float: right;}
        .abs-c{position: absolute;width:100%;left: 50%;margin-left: -50%;}
        .col-white{color: #fff;}
        .col-blue{color:blue;}
        .col-purple{color:purple;}
        .col-orange{color:orange;}
        .ft16{font-size: 2em;}
        .ft18{font-size: 3em;}
        .ft20{font-size: 4em;}
        .ft22{font-size: 5em;}
        .lineheight25{line-height: 2em;}

        </style>
    </head>
    <body>
    <div style="width:100%;margin:0 auto;">
    <div class="swiper-container">
      <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="img/zhiling1.jpg" >
            <h1 class="ani abs-c col-white ft22 " swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" style="top:0" >关于我们</h1>
            <p class=" ani abs-c col-white ft18  lineheight25" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"  style="top:300px;">
                赖家大院是集休闲娱乐、养老住宿、餐饮的一个休闲农庄，农庄内设有自动棋牌室、餐厅、可钓鱼、春天看桃花、夏季摘桃子。距离黄龙溪几分钟车程就能感受这座古老而有富有现代化气息的乡镇。 同时到本农庄也是非常方便，空气清新，景色宜人，这样好的空气和环境人都要多活好几年。受够了城市空气的你是不是也想来体验下，住了一次你就会爱上乡下的空气和氛围。同时本农庄的建筑 类似别野，每层单独设阳台可以喝茶聊天，早晨看日出，傍晚看日出，想想就有多惬意。如果你也想体验赶紧联系我们。
            </p>
      </div>
        <div class="swiper-slide"><img src="img/zhiling2.jpg" ></div>
        <div class="swiper-slide"><img src="img/zhiling3.jpg" ></div>
      </div>
    </div>
    </div>


     <script src="js/ziling.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

js


function fixPagesHeight() {
    $('.swiper-slide,.swiper-container').css({
        height: $(window).height(),
    })
}
$(window).on('resize', function() {
    fixPagesHeight();
})
fixPagesHeight();

var mySwiper = new Swiper('.swiper-container', {

    direction: 'vertical',
    lazyLoading : true,
    mousewheelControl: false,
    watchSlidesProgress: true,
    onInit: function(swiper) {
        swiper.myactive = 0;
        swiperAnimateCache(swiper); //隐藏动画元素 
        swiperAnimate(swiper); //初始化完成开始动画
    },
    onSlideChangeEnd: function(swiper){ 
        swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
    },
    onProgress: function(swiper) {
        for (var i = 0; i < swiper.slides.length; i++) {
            var slide = swiper.slides[i];
            var progress = slide.progress;
            var translate, boxShadow;

            translate = progress * swiper.height * 0.8;
            scale = 1 - Math.min(Math.abs(progress * 0.2), 1);
            boxShadowOpacity = 0;

            slide.style.boxShadow = '0px 0px 10px rgba(0,0,0,' + boxShadowOpacity + ')';

            if (i == swiper.myactive) {
                es = slide.style;
                es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')';
                es.zIndex=0;


            }else{
                es = slide.style;
                es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform ='';
                es.zIndex=1;

            }

        }

    },


    onTransitionEnd: function(swiper, speed) {
        for (var i = 0; i < swiper.slides.length; i++) {
        //  es = swiper.slides[i].style;
        //  es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = '';

        //  swiper.slides[i].style.zIndex = Math.abs(swiper.slides[i].progress);


        }

        swiper.myactive = swiper.activeIndex;

    },
    onSetTransition: function(swiper, speed) {

        for (var i = 0; i < swiper.slides.length; i++) {
            //if (i == swiper.myactive) {

                es = swiper.slides[i].style;
                es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';
            //}
        }

    }

});