查看: 2548|回复: 1

animate动画滑动加载???

[复制链接]
  • TA的每日心情

    2017-1-21 11:21
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    5

    主题

    17

    帖子

    130

    积分

    注册会员

    Rank: 2

    积分
    130
    发表于 2016-8-3 18:14:12 | 显示全部楼层 |阅读模式
    对于animate的应用,官网上面animate的介绍实例太少了,都有点懵圈了,不知道怎么使用才好,我写了一个demo,想要实现的效果是鼠标滑动的时候开始动画,但是动画不是一次性的全部加载,而是在距离屏幕可是区域一半的时候动画。接下去只要滑动就有动画,而不是动画一次性加载完毕。这要怎么破…………
    <!DOCTYPE html>
    <html lang="en">
            <head>
                    <meta charset="utf-8">
                    <link rel="stylesheet" href="css/swiper.min.css">
                    <link rel="stylesheet" href="css/animate.min.css">
                    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
                    <script type="text/javascript" src="js/swiper.min.js"></script>
                    <script type="text/javascript" src="js/swiper.animate.min.js"></script>
                    <style type="text/css">
                            body{
                                    background: #09f;
                            }
                            p{
                                    color: #fff;
                                    font-size: 24px;
                                    text-align: center;
                            }
                            img{
                                    width: 50%;
                                    margin: 0 auto;
                                    display: block;
                            }
                    </style>
            </head>
            <body>
                    <div class="swiper-container">
                            <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s">内容</p>
                                            <img src="images/1.png" alt="" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.0s" swiper-animate-delay="0.3s">
                                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.5s" swiper-animate-delay="0.3s">内容</p>
                                            <img src="images/1.png" alt="" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.8s" swiper-animate-delay="0.3s">
                                    </div>
                                    <div class="swiper-slide">
                                            <p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s">内容</p>
                                            <img src="images/1.png" alt="" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.0s" swiper-animate-delay="0.3s">
                                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.5s" swiper-animate-delay="0.3s">内容</p>
                                            <img src="images/1.png" alt="" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.8s" swiper-animate-delay="0.3s">
                                    </div>
                            </div>
                    </div>
                    <script>
                            var mySwiper = new Swiper ('.swiper-container', {
                                    onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
                                            swiperAnimateCache(swiper); //隐藏动画元素
                                            swiperAnimate(swiper); //初始化完成开始动画
                                    },
                                    onSlideChangeEnd: function(swiper){
                                            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
                                    }
                            })
                    </script>
            </body>
    </html>


    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    6

    帖子

    6

    积分

    新手上路

    Rank: 1

    积分
    6
    发表于 2016-8-4 14:53:15 | 显示全部楼层
    帮顶----------------
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-12-4 20:59 , Processed in 0.094048 second(s), 27 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表