码迷,mamicode.com
首页 > Web开发 > 详细

fullpage.js与animate.css搭配使用

时间:2017-12-12 21:44:48      阅读:348      评论:0      收藏:0      [点我收藏+]

标签:src   ext   overflow   span   meta   页面   .com   title   page   

jquery的fullpage.js插件的使用

 

https://alvarotrigo.com/fullPage/#3rdPage   官网

https://github.com/alvarotrigo/fullPage.js   github源码 

 

http://www.jq22.com/jquery-info1124  使用

https://zhidao.baidu.com/question/2011521041627168428.html  子页面滚动

http://lib.csdn.net/article/css3/37060  fullpage.js的API

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ART000</title>
        <link rel="stylesheet" href="css/base.css" />
        <link rel="stylesheet" href="css/animate.min.css" />
        <link rel="stylesheet" href="css/jquery.fullpage.css" />
    </head>
    <body>
        <div id="fullpage">
            <div class="section">
            <div class="logo1">
                还好
            </div>
            <div class="logo2 animated fadeInDown">
                还好哈
            </div>
            </div>
            <div class="section">
                        第二屏
            </div>
            <div class="section">
                <div class="slide">第三屏的第一屏</div>
                <div class="slide">第三屏的第二屏</div>
                <div class="slide">第三屏的第三屏</div>
                <div class="slide">第三屏的第四屏</div>
            </div>
            <div class="section">第四屏</div>
        </div>
        
  
        <script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.min.js"></script>
        <script src="js/jquery.fullpage.js"></script>
        <script src="js/scrolloverflow.js"></script>
        <script>
            $(function(){
                $(#fullpage).fullpage({
                    //单个屏幕内可滚动
                    scrollOverflow: true,
                    /**
                     * 滚动前的回调函数
                     * @param {Object} index   index 是离开的“页面”的序号,从1开始计算;
                     * @param {Object} nextIndex   nextIndex 是滚动到的“页面”的序号,从1开始计算;
                     */
                    onLeave: function (index, nextIndex) {
                        if(index==1){
                            $(.logo1).removeClass(rollIn animated);
                            $(.logo1).addClass(animated fadeOut);
                        }
                  },
                   /**
                    * 滚动到某一屏后的回调函数
                    * @param {Object} anchorLink    锚链接的名称
                    * @param {Object} index   index 是序号,从1开始计算
                    */
                   afterLoad: function(anchorLink,index){
                           if(index==1){
                               $(.logo1).removeClass(animated fadeOut);
                              $(.logo1).addClass(rollIn animated);
                         }
                   }
                });
            });
        </script>
        
    </body>
</html>
        

 

fullpage.js与animate.css搭配使用

标签:src   ext   overflow   span   meta   页面   .com   title   page   

原文地址:http://www.cnblogs.com/stella1024/p/8027052.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!