Swiper parallax effect case code display
<!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); //Hide animation elements swiperAnimate(this); //Initialization complete to start animation }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //The current slide animation is also run at the end of each slide switch } } }) </script> </body> </html>
.