web前端

中秋节快到了打造属于自己的H5动画页面

导读

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

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

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 src="path/to/swiper.min.js"></script>
    <script src="path/to/swiper.animate.min.js"></script>
</body>

</html>

设置样式

(手机一屏一屏展示肯定都是100%)

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

初始化

<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>

给元素添加动画

<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]

希望大家多多关注。

(0)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注