首頁手記中秋節快到了打造屬于H5動畫頁面

中秋節快到了打造屬于H5動畫頁面

標簽：

Html5 JQuery CSS3

刚刚看了慕课的文章：http://www.xianlaiwan.cn/learn/514
感觉fullPage.js插件并不是很理想，所以推荐另外一个插件swiper。

现在H5广告已经是满天飞，各个公司的需求也是越来越大。特别是在微信里面推广的很多，目前也有很多在线制作的，但是都有各种尾巴，去掉也很麻烦。今天为大家推荐一款制作简单，同时自己定制源码，没有任何尾巴。
1、首先准备PSD设计图，然后准备开始制作了。
2、Swiper 插件，swiper同时提供一个 Swiper Animate
3、开始写代码了

（1）、html框架，并引入需要的js、css

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="path/to/swiper.min.css">
    <link rel="stylesheet" href="path/to/animate.min.css">
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="path/to/swiper.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="path/to/swiper.animate.min.js"></script>
</body>

</html>

（2）、设置样式(手机一屏一屏展示肯定都是100%)

.swiper-container {
    width: 600px;
    height: 300px;
}

（3）、初始化

<script>
var mySwiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    loop: true,

    // 如果需要分页器
    pagination: '.swiper-pagination',

    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
    onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
        swiperAnimateCache(swiper); //隐藏动画元素 
        swiperAnimate(swiper); //初始化完成开始动画
    },
    onSlideChangeEnd: function(swiper) {
        swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
    }
})
</script>

（4）、给元素添加动画

<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>

注意：在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：

swiper-animate-effect：切换效果，例如 fadeInUp 
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s    动画效果参考 [http://www.swiper.com.cn/usage/animate/index.html][1]

希望大家多多关注。

點擊查看更多內容