jquery.fullPage新版網易郵箱用戶體驗界面動畫效果



165 656 219



特效描述:用戶體驗界面 界面動畫效果,

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/jquery.fullPage.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

3. HTML代碼

<div class="section section1">
	<div class="bg"><img src="images/section1.jpg" alt=""></div>
	<div class="bg11"></div>
	<div class="bg12"></div>
	<div class="bg13"></div>
	<div class="mail">
		<a class="mail-163" href="http://www.17sucai.com/">163郵箱</a>
		<a class="mail-126" href="http://www.17sucai.com/">126郵箱</a>
		<a class="mail-yeah" href="http://www.17sucai.com/">yeah郵箱</a>
	</div>
	<div class="hgroup">
		<h1><a href="http://www.17sucai.com/">網易郵箱6.0</a></h1>
		<h2>改變,不止所見。</h2>
	</div>
	<p class="p11">網易郵箱6.0版&mdash;&mdash;2014年最具創意氣質的重量級新郵箱,重生光華,為之矚目。唯美<br>的視覺設計和視覺化交互,無可替代的獨創動態情景皮膚,多項國內創意產品專利技術,<br>成就無與倫比的出眾品味,無可比擬的美妙體驗。</p>
</div>
<div class="section section2">
	<div class="bg"><img src="images/section2.jpg" alt=""></div>
	<div class="bg21"></div>
	<div class="bg22"></div>
	<div class="bg23"></div>
	<strong>[ 視覺·簡 ]</strong>
	<h3>華麗蛻變,盡享愉悅之美</h3>
	<p class="p1">秉承網易郵箱經典的清新簡潔的設計風格,郵箱 6.0 版帶來全新一代的設計理念,更追求極致唯美的視覺設計、傳承更多人文和藝術底蘊,華麗蛻變,帶來更舒服更爽心悅目的視覺享受。</p>
</div>
<div class="section section3">
	<div class="bg"><img src="images/section3.jpg" alt=""></div>
	<div class="bg31"></div>
	<div class="bg32"></div>
	<div class="bg33"></div>
	<strong>[ 視覺化交互設計 ]</strong>
	<h3>心隨眼動,感官直接體驗</h3>
	<p class="p3">郵箱 6.0 版采用了全新的視覺化交互設計,通過對界面的整體風格設計、重要信息的視覺化處理以及元素本身的視覺傳達優化,來實現產品流程設計和交互行為塑造。從視覺的角度出發,讓用戶無需多想,直接通過感官與產品進行交互。</p>
</div>
<div class="section section4">
	<div class="bg"><img src="images/section4.jpg" alt=""></div>
	<div class="bg41"></div>
	<div class="bg42"></div>
	<div class="bg43"></div>
	<strong>[ 動態情景皮膚 ]</strong>
	<h3>美輪美奐,百變盡隨你心</h3>
	<p class="p1">國內首創動態情景皮膚,可以隨著早晚時光,季節主題的變幻而自動切換,實現了在郵箱里也能感受天氣和心情的變化,帶來完全不同的頁面體驗并且呈現最佳視覺感受,還特別針對原有郵箱皮膚的對比度和色彩進行了微調,減少視覺疲勞感。</p>
</div>
<div class="section section5">
	<div class="bg"><img src="images/section5.jpg" alt=""></div>
	<strong>[ 功能·創 ]</strong>
	<h3>靈活機變,全面為你而生</h3>
	<div class="bg51">
		<h4>新語音視頻郵件</h4>
		<p>寫信不再枯燥!在線錄制和播放聲音和視頻郵件,比單純的文字郵件更感性、更方便,更好玩。</p>
	</div>
	<div class="bg52">
		<h4>虛擬場景寫信模式</h4>
		<p>寫信可以選擇自己喜歡的場景,配合美妙的背景音樂,讓寫信<br>變得更為有趣和生動。</p>
	</div>
	<div class="bg53">
		<h4>獨創智能體檢</h4>
		<p>網易郵箱6.0版幫你關注郵箱安全,提醒你及時清理郵件,打<br>造輕量級郵箱。</p>
	</div>
	<div class="bg54">
		<h4>全新多帳號關聯</h4>
		<p>一鍵關聯和切換多個網易郵箱,同時對于重要的郵箱帳號進行<br>密碼驗證保護。</p>
	</div>
</div>
<div class="section section6">
	<div class="bg"><img src="images/section6.jpg" alt=""></div>
	<div class="bg61"></div>
	<div class="bg62"></div>
	<strong>[ 待辦郵件 ]</strong>
	<h3>辦公利器,工作更高效順手</h3>
	<div class="txt6">
		<p>獨家首創郵件管理方式:待辦郵件<br>采用日程的方式第一時間分配和提醒郵件!</p>
		<p>對于需要后續處理的重要郵件,如果正忙來不及處理和回復,只需設置為待辦郵件,在待辦時間到期時,郵件會在文件夾置頂提示或采用短信方式提醒。</p>
		<p>如此高效迅速處理郵件,讓郵件處理過程變成更輕松和快捷。</p>
	</div>
</div>
<div class="section section7">
	<div class="bg"><img src="images/section7.jpg" alt=""></div>
	<div class="bg71"></div>
	<div class="bg72"></div>
	<div class="bg73"></div>
	<strong>[ 聯系人郵件 ]</strong>
	<h3>一目了然,來往郵件更清晰</h3>
	<div class="txt7">
		<p>郵箱6.0版帶來一種極其簡便的方式,管理你和聯系人的<br>郵件往來,幫助你精準定位到以聯系人為維度的郵件列表。</p>
		<p>同時支持以聯系組方式來管理郵件,方便以群或相同關系<br>的群體間的郵件管理,比如:同學組,客戶組,公司組等。</p>
	</div>
	<div class="bg74"><img src="images/bg74.png" alt=""></div>
</div>
<div class="section section8">
	<div class="bg"><img src="images/section8.jpg" alt=""></div>
	<div class="bg81"></div>
	<div class="bg82"></div>
	<div class="bg83"></div>
	<div class="bg84"></div>
	<strong>[ 科技.聚 ]</strong>
	<h3>厚積薄發,大幅度提速創新標</h3>
	<p class="p8">郵箱6.0版帶來“飛”一般的訪問體驗,速度提升達30%。采用全新base基礎庫bjs,更加輕量級,性能更加優化,完全兼容國內用戶使用的所有瀏覽器,以及基于"多核"多線程的核心js引擎,性能和訪問速度大幅提升。</p>
</div>
<div class="section section9">
	<div class="bg"><img src="images/section9.jpg" alt=""></div>
	<strong>[ 讓溝通更有趣 ]</strong>
	<h3><span></span>溝通無界,連接易信無縫整合</h3>
	<div class="bg91">
		<p>易信掃描二維碼即可登錄網易<br>郵箱6.0版,“掃一掃”讓郵<br>箱登錄更方便。</p>
	</div>
	<div class="bg92">
		<p>登錄郵箱后,可直接使用Web<br>易信和好友聊天,還可以發圖<br>片,讓聊天更有趣。</p>
	</div>
	<div class="bg93">
		<p>易信和郵箱新郵件同步提醒,<br>在易信可以直接查看和回復<br>郵件,手機收發郵件更快捷。</p>
	</div>
</div>
<div class="section section10">
	<div class="bg"><img src="images/section10.jpg" alt=""></div>
	<div class="bg101"></div>
	<div class="bg102"></div>
	<div class="bg103"></div>
	<a class="go" href="http://www.17sucai.com/">馬上體驗</a>
	<p class="copyright">
	</p>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 圖片滑動 圖片滑塊
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表