fulpage插件的使用及其如何添加動畫

1、引入 插件

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

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

2、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>

3、添加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);

            }

        });

　　　

4、使用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);

　　}

 

注意：這樣寫的目的是爲了保證每一屏加載的時候顯示動畫