快捷導(dǎo)航

jquery+css3實(shí)現(xiàn)網(wǎng)頁背景花瓣隨機(jī)飄落特效

更新時(shí)間：2015年08月17日 11:17:20 作者：一點(diǎn)點(diǎn)白

在qq空間可以自定義一些插件，裝飾空間，大家通常就是復(fù)制代碼到空間粘貼，會(huì)實(shí)現(xiàn)非常美觀的效果，有的會(huì)隨機(jī)飄落一些花瓣，那么這種效果用代碼怎么實(shí)現(xiàn)的呢，下面小編給大家詳解jquery實(shí)現(xiàn)網(wǎng)頁背景花瓣隨機(jī)飄落特效，需要的朋友可以參考下

飄花效果的實(shí)現(xiàn)——效果圖：

查看演示源碼下載

需求：

一個(gè)jquery，，，這個(gè)看標(biāo)題么就知道了

jQuery Transit還有這個(gè)東西

http://github.com/rstacruz/jquery.transit

jquery對(duì)一些效果的擴(kuò)展

飄花的效果稍微復(fù)雜一點(diǎn)，有一定量的JavaScript代碼，通過JS+CSS3的組合實(shí)現(xiàn)的。觀察右邊效果，可以大致分解飄花的實(shí)現(xiàn)

      飄花比人物的層級(jí)都高
      飄花數(shù)量非常多
      飄花會(huì)有一定的軌跡運(yùn)動(dòng)
      飄花帶有漸變的效果
      飄花帶有旋轉(zhuǎn)的效果
      飄花落到地面會(huì)消失

這里采用的JS+CSS3的結(jié)合實(shí)現(xiàn)，CSS3實(shí)現(xiàn)旋轉(zhuǎn)部分，首先從布局上來說，飄花是要比所有內(nèi)部元素層級(jí)都要高，所以布局上是要與頁面li平級(jí)才可以

實(shí)現(xiàn)原理：

通過定時(shí)器調(diào)用JS代碼不斷的動(dòng)態(tài)創(chuàng)建雪花節(jié)點(diǎn)，隨機(jī)選擇一個(gè)圖片作為其背景，賦予三個(gè)初始的樣式屬性top,left與opacity，通過transition動(dòng)畫過度的方式執(zhí)行這3個(gè)屬性的動(dòng)畫變化。整個(gè)原理其實(shí)也是很簡單的，主要涉及了一些細(xì)節(jié)的問題：例如元素的創(chuàng)建、圖片的隨機(jī)、開始的left與opacity的隨機(jī)處理、最終值的計(jì)算等等

執(zhí)行的流程：

getImagesName隨機(jī)6張圖片，snowflakeURl定義一個(gè)地址的范圍

createSnowBox創(chuàng)建雪花元素的節(jié)點(diǎn)，并且增加一個(gè)snowRoll的樣式，也就是旋轉(zhuǎn)的關(guān)鍵幀實(shí)現(xiàn)

定時(shí)器設(shè)置200ms不斷的生成雪花對(duì)象，計(jì)算出3個(gè)屬性的初始值，通過createSnowBox創(chuàng)建雪花元素，并且附上初始值，然后執(zhí)行transition附上最終值，執(zhí)行動(dòng)畫

動(dòng)畫結(jié)束后執(zhí)行$(this).remove() 刪除這個(gè)對(duì)象

然后精簡一下代碼，因?yàn)槲抑灰h花效果

 <div id='content'>
 <!-- 飄花 -->
 <div id="snowflake"></div>
 </div>

獲取外面#content的寬高

然后#snowflake里面做效果

#content { width: 100%; height: 100%; top: 42px;
overflow: hidden; position: absolute; }

然后么css么就是這樣了，top：42px是因?yàn)槲业膶?dǎo)航高度

#snowflake { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.snowRoll { position: absolute; opacity: 0; -webkit-animation-name: mysnow; -webkit-animation-duration: 20s; -moz-animation-name: mysnow; -moz-animation-duration: 20s; height: 80px; }
 @-webkit-keyframes mysnow { 0% {
 bottom: 100%;
}
 50% {
 -webkit-transform: rotate(1080deg);
}
 100% {
 -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}
 @-moz-keyframes mysnow { 0% {
 bottom: 100%;
}
 50% {
 -moz-transform: rotate(1080deg);
}
 100% {
 -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}

這里是給飄花加旋轉(zhuǎn)之類的css3特技

<script type="text/javascript">
$(function() {

 var snowflakeURl = [
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_1.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_2.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_3.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_4.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_5.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_6.png'
 ] //js設(shè)置數(shù)組存儲(chǔ)6張花瓣的圖片
　　
 var container = $("#content");
 visualWidth = container.width();
 visualHeight = container.height();
　　//獲取content的寬高
 ///////
 //飄雪花 //
 ///////
 function snowflake() {
 // 雪花容器
 var $flakeContainer = $('#snowflake');
　　　　　　
 // 隨機(jī)六張圖
 function getImagesName() {
 return snowflakeURl[[Math.floor(Math.random() * 6)]];
 }
 // 創(chuàng)建一個(gè)雪花元素
 function createSnowBox() {
 var url = getImagesName();
 return $('<div class="snowbox" />').css({
 'width': 41,
 'height': 41,
 'position': 'absolute',
 'backgroundSize': 'cover',
 'zIndex': 100000,
 'top': '-41px',
 'backgroundImage': 'url(' + url + ')'
 }).addClass('snowRoll');
 }
 // 開始飄花
 setInterval(function() {
 // 運(yùn)動(dòng)的軌跡
 var startPositionLeft = Math.random() * visualWidth - 100,
 startOpacity = 1,
 endPositionTop = visualHeight - 40,
 endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
 duration = visualHeight * 10 + Math.random() * 5000;

 // 隨機(jī)透明度，不小于0.5
 var randomStart = Math.random();
 randomStart = randomStart < 0.5 ? startOpacity : randomStart;
 // 創(chuàng)建一個(gè)雪花
 var $flake = createSnowBox();
 // 設(shè)計(jì)起點(diǎn)位置
 $flake.css({
 left: startPositionLeft,
 opacity : randomStart
 });
 // 加入到容器
 $flakeContainer.append($flake);
 // 開始執(zhí)行動(dòng)畫
 $flake.transition({
 top: endPositionTop,
 left: endPositionLeft,
 opacity: 0.7
 }, duration, 'ease-out', function() {
 $(this).remove() //結(jié)束后刪除
 });
 
 }, 200);
 } 　　
 snowflake()
　　　//執(zhí)行函數(shù)

})
</script>

以上代碼就是本文使用jquery實(shí)現(xiàn)網(wǎng)頁背景花瓣隨機(jī)飄落特效，希望大家喜歡。

您可能感興趣的文章: