阿灯的个人小站

越努力越幸运~


移动端的单页滚动效果zepto.fullpage

发布时间:2018-10-18 作者:阿灯 阅读量:55

最近单页滚动的效果非常流行,这种效果的视觉冲击感很强烈,特别是对于活动页面,因为需求的迫切,在pc端诞生了 fullPage.js和onepage-scroll这样的库,在移动的浪潮下,我们自然需要把这种效果搬到移动设备上,但当我在想实现类似效果时,却找不到一个这样的库(fullpage.js对于移动端来说太大了,还要依赖jquery),所以我就开发了一个,先是用于自己项目中,后来抽了出来,就有了这个项目。


HTML

<div class="wp">
    <div class="wp-inner">
        <div class="page page1">1</div>
        <div class="page page2">2</div>
        <div class="page page3">3</div>
        <div class="page page4">4</div>
    </div>
</div> 

CSS

父容器需是固定高度,并且溢出为隐藏,fullpage会使用父元素的宽度和高度。

.wp{
    overflow: hidden;            
} 

js

一行代码即可完成,如此简单:

$('.wp-inner').fullpage(); 

注意:是在.wp-inner上调用的。


更多例子,请移步这里

https://github.com/yanhaijing/zepto.fullpage


JQ版本:http://www.jq22.com/demo/fullpage-141201214949/ 

JQ版本github:https://github.com/alvarotrigo/fullPage.js





标签云

© adeng.y 粤ICP备17049299号
Catfish Blog | 后台