全屏/整屏滚动组件fullPage

演示地址  下载源码

之前介绍了全屏滚动插件 fullPage.js,也用该插件制作了一些例子。今天介绍另一款全屏滚动组件,名字也叫 fullpage,只是少了 “.js”。

与 fullPage.js 相比,fullpage 不依赖任何 js 库,可独立使用。功能上虽然不如 fullPage.js 强大,但一般使用已经足够了,尤其是它的动画效果,你可以自由设定缩放、旋转以产生各种各样的动画效果。同时它还支持 fullPage.js 所没有的水平滚动。

使用方法

1、引入文件

<script src="http://www.dowebok.com/fullPage.min.js"></script>

2、HTML

<div id="pageContain">
    <div class="page page1 current">
        <div class="contain">
            <p class="txt">第一屏</p>
        </div>
    </div>
 
    <div class="page page2">
        <div class="contain">
            <p class="txt">第二屏</p>
        </div>
    </div>
 
    <div class="page page3">
        <div class="contain">
            <p class="txt">第三屏</p>
        </div>
    </div>
 
    <div class="page page4">
        <div class="contain">
            <p class="txt">第四屏</p>
        </div>
    </div>
 
    <div class="page page5">
        <div class="contain">
            <p class="txt">第五屏</p>
        </div>
    </div>
</div>
 
<ul id="navBar">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

3、JavaScript

var runPage;
runPage = new FullPage({
    id: 'pageContain',
    slideTime: 800,
    effect: {
        transform: {
            translate: 'Y'
        },
        opacity: [0, 1]
    },
    mode: 'wheel, touch, nav:navBar',
    easing: 'ease'
});

配置

属性/方法类型默认值说明
id字符串
外层包裹 id(必须)
slideTime整数800每页切换时间,单位为毫秒
effect对象
切换效果
mode字符串转换模式
callback函数滑动结束后的回调函数
prev()

向上滚动一页/一屏
next()

向下滚动一页/一屏
thisPage()

返回当前的页码
go(num)

滚动到第 num 页

 

原文链接:HelloWeb前端网 » 全屏/整屏滚动组件fullPage » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享