js實(shí)現(xiàn)超酷的照片墻展示效果圖附源碼下載
這是一個(gè)超酷的照片墻展示效果,很多照片結(jié)合淡入淡出、旋轉(zhuǎn)、縮放、傾斜及3D效果,照片快速從左側(cè)切入,做旋轉(zhuǎn)3D效果,最后在照片墻上整齊排列,為用戶展示了超酷的照片墻展示效果。
HTML
本文結(jié)合實(shí)例給大家分享超酷的照片墻效果,該效果依賴jQuery和easing插件,因此首先載入這兩個(gè)文件。
<script src="jquery.min.js"></script> <script src="jquery.easing.1.3.js"></script>
接著,我們在需要展示照片墻的位置放置如下代碼:
<div class="grid"></div> <div class="animate">點(diǎn)擊看效果</div>
CSS
CSS定義了照片墻基本樣式,照片排列以及按鈕樣式。
.grid { width: 600px; height: 300px; margin: 100px auto 50px auto; perspective: 500px; /*For 3d*/ } .grid img {width: 60px; height: 60px; display: block; float: left;} .animate { text-transform: uppercase; background: rgb(0, 100, 0); color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer;margin:10px auto;width:100px;text-align:center; } .animate:hover {background: rgb(0, 75, 0);}
JS
首先我們在頁面上動態(tài)載入50張照片,照片源來自網(wǎng)絡(luò)。
var images = "", count = 50; for(var i = 1; i <= count; i++) images += '<img src="http://thecodeplayer.com/u/uifaces/'+i+'.jpg" />'; $(".grid").append(images);
當(dāng)點(diǎn)擊按鈕時(shí),50張圖片做不同程度的變形縮放轉(zhuǎn)換淡出效果,因?yàn)橐腥胂乱粋€(gè)照片墻了,當(dāng)這些動作全部完成時(shí),開始切入照片墻動畫效果,調(diào)用了storm()函數(shù)。
var d = 0; //延時(shí) var ry, tz, s; //定義轉(zhuǎn)換參數(shù) $(".animate").on("click", function(){ $("img").each(function(){ d = Math.random()*1000; //1ms to 1000ms delay $(this).delay(d).animate({opacity: 0}, { step: function(n){ s = 1-n; //scale - will animate from 0 to 1 $(this).css("transform", "scale("+s+")"); }, duration: 1000 }) }).promise().done(function(){ storm(); //淡出效果全部完成時(shí)調(diào)用 }) })
自定義函數(shù)storm()完成了將每張照片進(jìn)行角度旋轉(zhuǎn)和Z軸位移動作,結(jié)合CSS3使得產(chǎn)生3D效果,然后調(diào)用easing實(shí)現(xiàn)緩沖效果,讓整個(gè)照片墻切入十分流暢,請看代碼:
function storm(){ $("img").each(function(){ d = Math.random()*1000; $(this).delay(d).animate({opacity: 1}, { step: function(n){ //rotating the images on the Y axis from 360deg to 0deg ry = (1-n)*360; //translating the images from 1000px to 0px tz = (1-n)*1000; //applying the transformation $(this).css("transform", "rotateY("+ry+"deg) translateZ("+tz+"px)"); }, duration: 3000, easing: 'easeOutQuint' }) }) }
相關(guān)文章
JS+CSS實(shí)現(xiàn)帶關(guān)閉按鈕DIV彈出窗口的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)帶關(guān)閉按鈕DIV彈出窗口的方法,實(shí)例分析了div彈出層窗口的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JS實(shí)現(xiàn)拖拽進(jìn)度條改變元素透明度
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖拽進(jìn)度條改變元素透明度,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10下載站常用的點(diǎn)擊下載地址提示設(shè)hao123為首頁的js代碼
最近很多下載站下載文件的時(shí)候都提示設(shè)置hao123為首頁,這里我們來分享下具體的實(shí)現(xiàn)方法,需要的朋友可以參考下2013-10-10JavaScript仿淘寶頁面圖片滾動加載及刷新回頂部的方法解析
這篇文章主要介紹了JavaScript仿淘寶頁面圖片滾動加載及刷新回頂部的方法解析,包括懶加載和onbeforeunload等要點(diǎn)的理解,需要的朋友可以參考下2016-05-05js實(shí)現(xiàn)網(wǎng)頁倒計(jì)時(shí)、網(wǎng)站已運(yùn)行時(shí)間功能的代碼3例
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)頁倒計(jì)時(shí)、網(wǎng)站已運(yùn)行時(shí)間功能的代碼3例,需要的朋友可以參考下2014-04-04分享兩個(gè)手機(jī)訪問pc網(wǎng)站自動跳轉(zhuǎn)手機(jī)端網(wǎng)站代碼
這篇文章主要介紹了分享兩個(gè)手機(jī)訪問pc網(wǎng)站自動跳轉(zhuǎn)手機(jī)端網(wǎng)站代碼,需要的朋友可以參考下2015-01-01JS實(shí)現(xiàn)的簡單表單驗(yàn)證功能完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡單表單驗(yàn)證功能,結(jié)合完整實(shí)例形式分析了javascript基于字符串長度判定、數(shù)據(jù)類型判定及正則判斷等操作進(jìn)行表單驗(yàn)證的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10