Swiper视差效果Demo

Swiper视差效果案例代码展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>swiper测试</title>
    <link rel="stylesheet" href="./swiper.min.css">
    <link rel="stylesheet" href="./animate.min.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0
        }
        html, body {
            position: relative;
            height: 100%;
        }
        .swiper-slide{
            text-align: center;
            font-size: 18px;
            color: red;
            width: 100%;
            height: 300px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% auto;
            display: flex;

            justify-content: center;
            align-items: center;
        }
        #Swiper-one{
            width: 100%;
            height: 300px;
            overflow-y: hidden;
        }
        .back-img{
            background-image: url("03.jpg");
            position: absolute;
            left: 0;
            top: 0;
            width: 130%;
            height: 100%;
            -webkit-background-size: cover;
            background-size: cover;
            background-position: center;
        }

    </style>
</head>
<body>
<div class="swiper-container" id="Swiper-one">
    <div class="back-img" data-swiper-parallax="-23%" data-swiper-parallax-duration="300"></div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="fadeInUp">内容1</p>
        </div>
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="fadeInLeft">内容2</p>
        </div>
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="fadeInDown">内容3</p>
        </div>
    </div>
    <div class="swiper-scrollbar"></div>
</div>

<script src="jquery.min.js"></script>
<script src="./swiper.min.js"></script>
<script src="./swiper.animate.min.js"></script>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        parallax : true,
        keyboard: {
            enabled: true,
        },
        on:{
            init: function(){
                swiperAnimateCache(this); //隐藏动画元素
                swiperAnimate(this); //初始化完成开始动画
            },
            slideChangeTransitionEnd: function(){
                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            }
        }
    })
</script>
</body>
</html>
猜你喜欢
