特效描述:html5 fullPage 美团宣传动画 页面滚屏特效。html5 css3 宣传动画, fullPage页面滚屏特效,美团宣传页面。
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/jquery.fullPage.css"> <link rel="stylesheet" href="css/style.css">
2. 引入JS
<script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery-ui-1.10.3.min.js"></script> <script src="js/jquery.fullPage.min.js"></script>
3. HTML代码
<div class="section"> <div class="box1"> <img src="images/cl.png" style="position:relative; top:300px; z-index:999;"/> <img src="images/ph1.png" style="position:absolute; left:830px; z-index:99; top:250px;" class="ph1" class="ph2" /> <img src="images/wheel-1.png" style="position:relative; left:-130px; margin-top:-30px;" class="wheel" /> <img src="images/wheel-2.png" style="position:relative; left:100px; top:-100px;" class="wheel" /> <img src="images/wheel-3.png" style="position:absolute; margin-top:220px; margin-left:-30px;" class="wheel"/> <img src="images/wheel-4.png" style="position:absolute; margin-top:280px; margin-left:-30px;" class="wheel"/> </div> </div> <div class="section"> <div class="box2"> <img src="images/cloud.png" class="cloud" style="position:relative; top:-300px; left:180px;" /> <img src="images/map.png" style="position:relative; margin-top:200px; left:-300px;" /> <img src="images/nail.png" style="position:absolute; top:350px; left:880px;" class="nail" /> </div> </div> <div class="section"> <div class="box3"> <img src="images/fun.png" class="fun" style="margin-top:200px;"/> <img src="images/shop.png" style=" position:relative;top:60px; z-index:999;" class="shop" /> <img src="images/v-phone.png" style="position:relative; z-index:99; " /> </div> </div> <div class="section"> <div class="box4"> <img src="images/phone_1.png" style="position:absolute; top:305px; margin-left:-112px;transform:rotate(30deg); transform-origin:bottom right;" class="phone1" /> <img src="images/phone_2.png" style="position:absolute; top:405px; margin-left:-100px; z-index:999"/> <img src="images/gift_1.png" style="position:absolute; top:495px; left:700px; z-index:99" class="gift1"/> <img src="images/gift_2.png" style="position:absolute;top:550px; z-index:99; left:1100px;" class="gift2"/> <img src="images/ballon.png" style="position:absolute; z-index:9999; left:800px; top:70px;" class="ballon"/> </div> </div>