仿百度全屏滑动年度总结插件-fullPage案例

所属分类:背景类

 5921次|    24次   点击收藏(3)

仿百度全屏滑动年度总结插件-fullPage案例

一、解释这个插件的理由

fullPage是一款不错的全屏插件,我自己觉得做全屏滑动插件,一个是swiper,一个是fullPage


二、fullPage使用

看了一下,我写的再详细,也不如其官方文档详细,下面就把官方文档的地址贴上:

http://www.bootcdn.cn/fullPage.js/readme/


核心说明:


主要配置项下:


$(document).ready(function() {
    $('#fullpage').fullpage({
        //Navigation
        menu: '#menu',
        lockAnchors: false,
        anchors:['firstPage', 'secondPage'],
        navigation: false,
        navigationPosition: 'right',
        navigationTooltips: ['firstSlide', 'secondSlide'],
        showActiveTooltip: false,
        slidesNavigation: true,
        slidesNavPosition: 'bottom',

        //Scrolling
        css3: true,
        scrollingSpeed: 700,
        autoScrolling: true,
        fitToSection: true,
        fitToSectionDelay: 1000,
        scrollBar: false,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: false,
        scrollOverflowOptions: null,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,

        //Accessibility
        keyboardScrolling: true,
        animateAnchor: true,
        recordHistory: true,

        //Design
        controlArrows: true,
        verticalCentered: true,
        sectionsColor : ['#ccc', '#fff'],
        paddingTop: '3em',
        paddingBottom: '10px',
        fixedElements: '#header, .footer',
        responsiveWidth: 0,
        responsiveHeight: 0,

        //Custom selectors
        sectionSelector: '.section',
        slideSelector: '.slide',

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
    });
});



三、本案例说明

本案例是用fullPage模仿百度大事记,有需要的可以下载一下看下!我自己觉得关键还是学会怎么用fullPage,案例只是参考!学会怎么用这个插件,怎么改写这个插件,对我们才更有用!


关于前端资源库

前端资源库是haorooms博主平时积累的前端资源,大部分来源于互联网。但经过博主调试和加工,集聚了博主的心血。

因此,资源库所有资源,仅供学习和参考,切勿下载下来用于商业用途或者转卖。转载请注明来自haorooms博客资源库!

联系方式
关键词搜索