特效描述:jquery fullPage 整页面滚动 文字动画特效。jQuery.fullPage.js制作全屏整页滚动,文字内容动画展示特效。
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/jquery.fullPage.css">
2. 引入JS
<script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.fullPage.js"></script>
3. HTML代码
<div id="fullpage"> <div class="section one"> <div class="wrap"> <h1>Lorem ipsum</h1> <h2>Dolor sit amet</h2> <div class="cta"><span>shop now</span></div> </div> </div> <div class="section two"> <div class="wrap"> <h1>Lorem ipsum</h1> <h2>Dolor sit amet</h2> <div class="cta"><span>shop now</span></div> </div> </div> <div class="section three"> <div class="wrap"> <h1>Lorem ipsum</h1> <h2>Dolor sit amet</h2> <div class="cta"><span>shop now</span></div> </div> </div> </div> <script type="text/javascript"> (function() { $('#fullpage').fullpage({ navigation: true, }); })(); </script>