swiper 移动版滑屏动画

最新推荐文章于 2022-11-19 16:21:41 发布

敢问

最新推荐文章于 2022-11-19 16:21:41 发布

阅读量197

点赞数

分类专栏：移动端文章标签： css3 animation html javascript

本文链接：https://blog.csdn.net/weixin_41040445/article/details/110224198

版权

移动端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Swiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件，适用于Swiper2.x、Swiper3.x、Swiper4.x和Swiper5.x 。

不支持6以上版本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide page1">
                <div class="num">
                    <img src="images/2.png" alt="">
                    <img src="images/0.png" alt="">
                    <img src="images/2.png" alt="">
                    <img src="images/2.png" alt="">
                </div>
                <img src="images/page1_pic1.png" alt="" class="page1pic2">
                <img src="images/next.png" alt="" class="next">
            </div>
            <div class="swiper-slide  page2">
                <img src="images/page2_pic1.png" class="page2pic1" alt="">
                <div class="content">
                    <p>职位：职场总监</p>
                    <p>学历：硕士以上</p>
                    <p>薪资：百万以上</p>
                </div>
                <img src="images/next.png" alt="" class="next">
            </div>
            <div class="swiper-slide  page3">
                <div class="job job-requirements1">
                    <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.9s"
                        swiper-animate-delay="0.3s">手机app的开发与维护</p>
                    <p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.9s"
                        swiper-animate-delay="0.3s">手机app的开发与维护</p>
                    <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.9s"
                        swiper-animate-delay="0.3s">手机app的开发与维护</p>
                    <p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.9s"
                        swiper-animate-delay="0.3s">手机app的开发与维护</p>
                    <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.9s"
                        swiper-animate-delay="0.3s">手机app的开发与维护</p>
                </div>  
                <div class="job job-requirements2">
                    <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.9s"
                        swiper-animate-delay="0.3s">手机app的开发与维护</p>
                    <p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.9s"
                        swiper-animate-delay="0.3s">手机app的开发与维护</p>
                    <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.9s"
                        swiper-animate-delay="0.3s">手机app的开发与维护</p>
                    <p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.9s"
                        swiper-animate-delay="0.3s">手机app的开发与维护</p>
                    <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.9s"
                        swiper-animate-delay="0.3s">手机app的开发与维护</p>
                </div>
                <img src="images/next.png" alt="" class="next">
            </div>
            <div class="swiper-slide  page4">
                <div class="context ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.9s"
                    swiper-animate-delay="0.3s">
                    <p>
                        邮件地址
                    </p>
                    <p>
                        www.mashibing@163.com
                    </p>
                    <p>
                        欢迎投稿
                    </p>
                </div>
                <div class="code ani" swiper-animate-effect="tada" swiper-animate-duration="0.9s"
                    swiper-animate-delay="0.3s">
                    <img src="images/ewm.png" alt="">
                    <p>官网:www.maishibing.com</p>
                </div>
            </div>
        </div>
    </div>
    <script src='js/jquery-1.8.3.js'></script>
    <script src='js/swiper-4.3.5.min.js'></script>
    <script src='js/swiper.animate1.0.3.min.js'></script>
    <script src='js/index.js'></script>
    <script>
    </script>
</body>

</html>

.page1{
    background: url(../images/page1_bg.jpg) no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.page1 .num{
    position: absolute;
    width: 100%;
    left: 0;
    top:8%;
}
.page1 .num img:nth-child(1){
    position: absolute;
    left: 5%;
    top: 0;
}
.page1 .num img:nth-child(2) {
    position: absolute;
    left: 25%;
    top: 0;
}
.page1 .num img:nth-child(3) {
    position: absolute;
    left: 45%;
    top: 0;
}
.page1 .num img:nth-child(4) {
    position: absolute;
    left: 65%;
    top: 0;
}
.page1 .num.pag1ani1{
    animation: page1donghua1 1s linear 0s;
}
.page1 .num.pag1ani1 img{
    animation: page1donghua2 1s linear infinite alternate;
}
.page1 .num.pag1ani1 img:nth-child(1){
    animation-duration:0.8s ;
}
.page1 .num.pag1ani1 img:nth-child(2) {
    animation-duration: 1s;
}
.page1 .num.pag1ani1 img:nth-child(3) {
    animation-duration: 0.6s;
}
.page1 .num.pag1ani1 img:nth-child(4) {
    animation-duration: 1.2s;
}
.page1 .page1pic2{
    width: 60%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
}
.page1 .page1pic2.page2ani2{
    animation: page1donghua3 1s linear 1s forwards;
}
.next{
    width: 15%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5%;
}
.next.aniNext{
    animation: nextdonghua 800ms linear infinite alternate;
}
.page2{
    background: url(../images/page2_bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.page2 .page2pic1 {
    position: absolute;
    left: 50%;
    width: 70%;
    top: 20%;
    transform: translateX(-50%) rotate(-50deg);
}
.page2 .page2pic1.page2ani1 {
    animation: page2donghua1 1s linear 0s;
}
.content{
    width: 80%;
    background: rgba(255, 255, 255, .3);
    text-align: center;
    height: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10%;
}
.content p {
 color: #fff;
 font-size: 16px;
}

.page2 .content.page2ani2{
    animation:page2donghua2 1s linear 0s;
}
.page3{
    background: url(../images/page3_bg.png) no-repeat;
    background-size: 100% 100%;
}


.page3 .job {
    width: 70%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid #fff;
    height:30%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 2% 2% 2% 8%;
}
.page3 .job::before{
    content: "";
    width: 80px;
    height: 120px;
    position: absolute;
   
}
.page3 .job p{
    color: #fff;
    font-size: 16px;
    line-height: 20px;
}
.job-requirements1{
    top: 10%;
}
.job-requirements1::before {
    background: url(../images/page3_pic1.png) no-repeat;
    background-size: 100% 100%;
    top: -15%;
    left: -6%;
}
.job-requirements2 {
   bottom: 15%;
}
.job-requirements2::before{
    background: url(../images/page3_pic2.png) no-repeat;
    background-size: 100% 100%;
    top: -12%;
    right: -18%;
}
.job-requirements1.page3ani1::before{
    animation: page3donghua1 800ms linear 0s;
}
.job-requirements2.page3ani2::before {
    animation: page3donghua2 800ms linear 0s;
}


.page4{
    background: url(../images/page4_bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.page4 .context{
    width: 80%;
    position: absolute;
    left: 10%;
    top: 8%;
    height: 15%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: 5px solid #fff;
    padding: 2%;
    box-sizing: border-box;
}

.page4 .context p{
    color: #fff;
    font-size: 16px;
}
.page4 .code{
    width: 80%;
    position: absolute;
    left: 10%;
    bottom: 15%;
    padding-left: 2%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.page4 .code img{
    width: 100px;
    margin-right: 15px;
}
.page4 .code p{
    color: #fff;
    font-size: 16px;
}
@keyframes page1donghua1{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes page1donghua2{
    0%{
        transform: translateY(15%);
    }
    100%{
        transform: translateY(-15%);
    }
}
@keyframes page1donghua3{
    0%{
        transform: translateX(-50%) translateY(-50%) translateY(-500px);
        opacity: 0;
    }
    100%{
          transform: translateX(-50%) translateY(-50%) translateY(0px);
          opacity: 1;
    }
}
@keyframes nextdonghua{
    0%{
         transform: translateX(-50%) translateY(-35%);
    }
    100%{
         transform: translateX(-50%) translateY(35%);
    }
}
@keyframes page2donghua1{
    0%{
        transform:translateX(-50%) rotate(-50deg) scale(0);
    }
    100%{
        transform:translateX(-50%) rotate(-50deg) scale(1);
    }
}
@keyframes page2donghua2{
    0%{
        transform: translateX(-50%) translateY(500px);
    }
    100%{
          transform: translateX(-50%) translateY(0);
    }
}
@keyframes page3donghua1{
    0%{
        transform: translateY(-500px);
    }
    100%{
        transform: translateY(0);
    }
}
@keyframes page3donghua2 {
    0% {
        transform: translateY(500px);
    }

    100% {
        transform: translateY(0);
    }
}

var mySwiper = new Swiper ('.swiper-container', {
    height : window.innerHeight,
    direction: 'vertical',
    on:{
        init: function(){
            swiperAnimateCache(this); //隐藏动画元素 
            swiperAnimate(this); //初始化完成开始动画
        }, 
        slideChangeTransitionEnd: function(){ 
            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
        },
        slideChangeTransitionStart:function () {  
            if(this.activeIndex == 0){
                page1In();
                page2Out();
            }
            else if(this.activeIndex == 1){
                page1Out();
                page2In();
                page3Out();
            }
            else if(this.activeIndex == 2){
                page2Out();
                page3In();
            }
            else if(this.activeIndex == 3){
                page3Out();
                page4In();
            }
        }
    }
}) 

page1In()
function page1In() {
    $(".page1 .num").addClass("pag1ani1");
    $(".page1 .page1pic2").addClass("page2ani2");
    $(".page1 .next").addClass("aniNext");
}
function page1Out() {
    $(".page1 .page1pic2").removeClass("page2ani2");
    $(".page1 .num").removeClass("pag1ani1");
    $(".page1 .next").removeClass("aniNext");
}
function page2In() {
    $(".page2 .page2pic1").addClass("page2ani1");
    $(".page2 .content").addClass("page2ani2");
    $(".page2 .next").addClass("aniNext");
}
function page2Out() {
    $(".page2 .page2pic1").removeClass("page2ani1");
    $(".page2 .next").removeClass("aniNext");
    $(".page2 .content").removeClass("page2ani2");
}
function page3In() {
    $(".page3 .job-requirements1").addClass("page3ani1");
    $(".page3 .job-requirements2").addClass("page3ani2");
    $(".page3 .next").addClass("aniNext");

}
function page3Out() {
    $(".page3 .job-requirements1").removeClass("page3ani1");
    $(".page3 .job-requirements2").removeClass("page3ani2");
    $(".page3 .next").removeClass("aniNext");
}

function page4In() {

}
function page4Out() {
    
}

图片资源百度云网盘吧手机滚滚屏

敢问

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
swiper 移动版滑屏动画

Swiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件，适用于Swiper2.x、Swiper3.x、Swiper4.x和Swiper5.x 。不支持6以上版本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
复制链接

扫一扫