fullpage.js与animate.css搭配使用

最新推荐文章于 2022-04-28 16:01:14 发布

anmi7832

最新推荐文章于 2022-04-28 16:01:14 发布

阅读量224

点赞数

原文链接：http://www.cnblogs.com/stella1024/p/8027052.html

版权

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>

转载于:https://www.cnblogs.com/stella1024/p/8027052.html

anmi7832

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
fullpage.js与animate.css搭配使用

jquery的fullpage.js插件的使用https://alvarotrigo.com/fullPage/#3rdPage 官网https://github.com/alvarotrigo/fullPage.js github源码http://www.jq22.com/jquery-info1124 使用https://zhidao.baid...
复制链接

扫一扫