fullpage.js與animate.css搭配使用
阿新 • • 發佈：2017-12-12
滾動 blank function logo get user after wid dev
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搭配使用