全屏滚动插件FullPage的使用

最新推荐文章于 2022-09-16 11:29:47 发布

_Icecream

最新推荐文章于 2022-09-16 11:29:47 发布

阅读量503

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/leebe/article/details/45769243

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

更多博客：http://blog.ilibing.com/

fullPage.js是开源的JQuery插件库，GitHub 地址：https://github.com/alvarotrigo/fullPage.js

1、引入文件

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>

2、HTML

<body>
<div id="fullpage">
    <div class="section active">
        <h1>每一个section是一屏，这是第一屏</h1>

        <p>^</p>
    </div>
    <div class="section">
        <h1 class="a">每一个section是一屏，这是第二屏</h1>

        <p>^</p>
    </div>
    <div class="section">
        <h1 class="a">每一个section是一屏，这是第三屏</h1>

        <p>^</p>
    </div>
    <div class="section">
        <h1>每一个section是一屏，这是第四屏</h1>
    </div>
</div>
</body>

3、Css

<style type="text/css">
    body {
         color: #FFFFFF;
         text-align: center;
     }
    p {
        font-size: 20px;
        position: absolute;
        bottom: 0px;
        width: 100%;
        text-align: center;
        animation: top 3s infinite;
        -webkit-animation: top 1s infinite; /*Safari and Chrome*/
    }
    h1 {
        display: none;
    }
    
    
    .in {
        display: block;
        animation: in 3s;
        -webkit-animation: in 3s; /*Safari and Chrome*/
    }

    @keyframes top {
        0% {
            bottom: 0
        }
        25% {
            bottom: 300px
        }
        50% {
            bottom: 0
        }
        75% {
            bottom: 300px
        }
        100% {
            bottom: 0px
        }
    }

    @-webkit-keyframes top {
        0% {
            bottom: 0
        }
        90% {
            bottom: 20px
        }
        100% {
            bottom: 0px
        }
    }

    /*进入页面文字移动的动画*/
    @keyframes in {
        from {
            margin-left: -200px;
        }
        to {
            margin-left: 0px;
        }
    }

    @-webkit-keyframes in /*Safari and Chrome*/
    {
        from {
            margin-left: -200px;
        }
        to {
            margin-left: 0px;
        }
    }

</style>

4、JavaScript

<script type="text/javascript">
    $(function () {
        $("#fullpage").fullpage({
            //设置各个页面的颜色
            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
            //设置循环滚动 
            continuousVertical: true,
            //设置是否显示项目导航
            navigation: true,
            //页面初始化完成后的回调函数
            afterRender: function () {
                $('h1').addClass('in');
            },
            //滚动到某一屏后的回调函数
            afterLoad: function () {
                if (!$('h1').hasClass('in')) {
                    $('h1').addClass('in')
                }
            },
            //离开某一屏时的回调函数
            onLeave: function () {
                $('h1').removeClass('in')
            }
        });
    });
</script>