fulpage插件的使用及其如何添加动画

一、引入 插件

　　　<script src="./js/jQuery.min.js"></script>

   　　 <script src="./js/jQuery.fullPage.min.js"></script>

二、html代码

<div id="fullpage">

        <!-- 第一屏 -->

        <div class="section first">

           

        </div>

        <!-- 第二屏 -->

        <div class="section second">

            

        </div>

        <!-- 第三屏 -->

        <div class="section third">

            

        </div>

        <!-- 第四屏 -->

        <div class="section fourth">

 

        </div>

        <!-- 第五屏 -->

        <div class="section fifth">

 

        </div>

    </div>

三、添加js代码

　　

 

　　$('#fullpage').fullpage({

            // 设置背景色

            sectionsColor : ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],

            afterLoad: function (anchorLink, index) {

                $('.section').removeClass('current');

                

                // 延时100毫秒执行

                setTimeout(function () {

                    $('.section').eq(index - 1).addClass('current');

                }, 100);

            }

        });

　　　

四、使用css3写动画

　　先给元素写动画初始位置  然后在 .third.current  再写动画的终止位置  

　　如：

　　.third .rocket {

    　　position: absolute;

    　　bottom: 0;

    　　left: 0;

    　　width: 204px;

    　　height: 204px;

    　　background: url(../images/rocket.png);

    　　transform: translate(500px, 210px);

　　}

　　.third.current .rocket {

    　　transition: all 1s ease-in-out;

    　　transform: translate(900px, -240px);

　　}

 

注意：这样写的目的是为了保证每一屏加载的时候显示动画