html5 fullPage美团宣传动画页面滚屏特效



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

263 1051 351



特效描述: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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到