经典全屏滚动插件fullPage.js

最新推荐文章于 2024-05-23 23:33:04 发布

aizhanqian5077

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量80

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zcynine/p/5426176.html

版权

要写简单可以写的很简单，对着github上面的参数和注释随便写了个demo。这个插件十分高端大气上档次，配上良好的配色和布局，简单几笔就可以把网站装扮得十分洋气。

唯一的缺点就是，感觉对移动端的兼容性略有不足。

下面是我的demo。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>fullPage</title>
    <link rel="stylesheet" type="text/css" href="./js/fullpage/jquery.fullPage.css" />
    <style type="text/css">
        body {
            font-family: arial,helvetica;
            color: #F2F2F2;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: normal;
            font-size: 100%;
            margin: 0;
            padding: 0;
            color: #444;
        }

        h1{
            font-size: 6rem;
        }

        p{
            font-size: 2rem;
        }

        .section{
            text-align: center;
        }

        .section h1{
            color: #fff;
        }
        .section p{
            opacity: 0.8;
        }

        #section1 h1{
            color: #444;
        }

        #section1 p{
            color: #333;
            opacity: 0.4;
        }

        
    </style>
</head>
<body>
    <div id="fullpage">
        <div class="section" id="section1">
            <h1>fullPage.js</h1>
            <p>jQuery Version</p>
        </div>
        <div class="section" id="section2">
            <h1>So Convinient</h1>
            <p>so small after gzipped</p>
            <p>Amazing ！！！</p>
        </div>
        <div class="section" id="section3">
            <div class="slide">
                <h1>It's a Nice Tool ！</h1>
                <p>It's neccessary</p>
                <p>when we do the work</p>
            </div>
            <div class="slide">
                <h1>Beautiful ！</h1>
            </div>
            <div class="slide">
                <h1>Neatly ！</h1>
            </div>
        </div>
        <div class="section" id="section4">
            <h1>I like it ！</h1>
        </div>
    </div>


    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
    <script src="./js/fullpage/vendors/jquery.easings.min.js"></script>
    <script type="text/javascript" src="./js/fullpage/vendors/jquery.slimscroll.min.js"></script>
    <script type="text/javascript" src="./js/fullpage/jquery.fullpage.js"></script>
    <script type="text/javascript">
        $(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,
                touchSensitivity: 15,
                normalScrollElementTouchThreshold: 5,

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

                //Design
                controlArrows: true,
                verticalCentered: true,
                resize : false,
                sectionsColor : ['#BFDA00', '#2C3E50', '#1F9377', '#AC4F2C'],
                paddingTop: '3em',
                paddingBottom: '10px',
                fixedElements: '#header, .footer',
                responsiveWidth: 0,
                responsiveHeight: 0,

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

                //events
                onLeave: function(index, nextIndex, direction){
                    console.log("onLeave");
                },
                afterLoad: function(anchorLink, index){
                    console.log("afterLoad");
                },
                afterRender: function(){
                    console.log("afterRender");
                },
                afterResize: function(){
                    console.log("afterResize");
                },
                afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
                    console.log("afterSlideLoad");
                },
                onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
                    console.log("onSlideLeave");
                }
            });
        });
    </script>
</body>
</html>

github

https://github.com/zcynine/fullPage.js

API

http://www.dowebok.com/77.html

转载于:https://www.cnblogs.com/zcynine/p/5426176.html

aizhanqian5077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
经典全屏滚动插件fullPage.js

要写简单可以写的很简单，对着github上面的参数和注释随便写了个demo。这个插件十分高端大气上档次，配上良好的配色和布局，简单几笔就可以把网站装扮得十分洋气。唯一的缺点就是，感觉对移动端的兼容性略有不足。下面是我的demo。<!DOCTYPE html><html><head> <meta ...
复制链接

扫一扫