Hiệu ứng Lá Mùa Thu Rơi tuyệt đẹp cho Blogger

Beautiful Leaf Falling Effect For Blogger

Thu sang trong nắng hanh vàng
Gió lay mơn trớn nhẹ nhàng lá rơi
Mây thu ửng sắc lưng trời
Hồ thu soi nắng sáng ngời thủy tinh..

Thế là một mùa thu nữa lại đến. Một sắc thu đầy lãng mạn với là vàng rơi, tiếng chim gọi bầy... Hòa cùng không khí của mùa thu, hôm nay hãy cùng Iris Tips mang chút không khí của mùa thu vào Blogger của bạn bằng đoạn jQuery dưới đây.

• DEMO

Cách thực hiện

1Vào Bố cục >> Thêm tiện ích HTML/Javascript và đán vào đoạn code dưới đây

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFUYTZdCqSmTLAxXgx5c451vb4ih_1-fdXoj63IbkdOke2ttvW3HcYLALCTbYIDaweU9E3i9Ghk9a8uNaCtUuIuyi_drSjHGJpW3j7CFhb_yx4nChu6_y64RkLu0_taNZW7KOW_C-7dNXv/s1600/Leaf1.png";image_urls['rain2']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAPZnUo1kxrGkx29BUg5hZQQwvX72A3zpKj00EAQdStsfdeI3jGgNU-PkwFT-L2pXSh-e4kAypm7TkqdIFVlyZc_in5238V3gVnmRyHajDNAgyW26UZGz1sT_sKkEQrjUtQ17m_G4ritnQ/s1600/Leaf2.png";image_urls['rain3']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMq6W2zVESmEoqd10LGmhwniFtGIj5J9hrN6bBdh_tEk3HkZ9IHIn82eIirPZiqZHvTBWvUF8Fy9h5TPsXNLfEjcIU8jHfOOHkQX70L3T44Iu_EkUJdyvOdte-_PGUCHT_TKBJdjy5h0Df/s1600/Leaf6.png";image_urls['rain4']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBidhSQJvlqH1j22O0-zCBcp7fA09uVKtoZk7oPDPDNKC7zK8Exg-fzO_Zt1-wU6VWEmGwINptD4lQ_Eu2f3nBLNYY3FzPoSf2OtwE-K6GmWVzqUVh3nldwaFDebJ2TQywOk-wujFMUTdu/s1600/Leaf5.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script>

Chỉnh sửa: Bạn cũng có thể thêm lá rơi cho thủ thuật trên bằng cách thêm vào sau image_urls['rain4']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBidhSQJvlqH1j22O0-zCBcp7fA09uVKtoZk7oPDPDNKC7zK8Exg-fzO_Zt1-wU6VWEmGwINptD4lQ_Eu2f3nBLNYY3FzPoSf2OtwE-K6GmWVzqUVh3nldwaFDebJ2TQywOk-wujFMUTdu/s1600/Leaf5.png";

đoạn code
image_urls['rain5']="5th-image-url.png";

Và sửa image_urls['rain'+e(1,4)] thành image_urls['rain'+e(1,5)]

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by itc/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm