Create leaf effect | JavaScript Tutorial

 You can easily Create leaf effect using JavaScript.

Just Follow those step:-

 First copy those code.

<script language="Javascript"> <br /> <script><br />if (typeof jQuery == 'undefined') {<br />document.write('<' + 'script');<br />document.write(' language="javascript"');<br />document.write(' type="text/javascript"');<br />document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');<br />document.write('</' + 'script' + '>')<br />}<br /></script><br /><script><br />if (!image_urls) {<br />var image_urls = Array()<br />}<br />if (!flash_urls) {<br />var flash_urls = Array()<br />}<br />image_urls['rain1'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj29v_g4x-U2WnXZWmvMBW8OtbMJA_NhBX-Vul_8aulOwhsZIQpQB2YscKogv7u0v7YFW9UTxS7yNZ7XXpsLPnzD-hc1MsHMmbWLf__wvbRGfKo7SgrH1rBahiOGk8phC8nOTMP3KIG-0_E/s1600/Leaf1.png";<br />image_urls['rain2'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJf2WBMxq-SopJCxOzbmcoCOVCIY5IBsbqHGiDSoMHVEs-gTblpnXahufnVT3DlCgbK3RVFOYjYM0a6lqJ9KhkUBGL2fO6CQndd8ESV2XTs5syMqVgUaI71v29rg3NxZ5EHE0iK4YZmudj/s1600/Leaf2.png";<br />image_urls['rain3'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNluf2W_1zr_SNFMgi3Mr80tmZhBlCXuhIflPUf22sjH3e96jS4e23JEicuh0vnqT6nGPaFl9BFBPQc2-rdi9xLLSl_h6h907VVqXdJn6i3wKcYvEot0HyV8u05Lbb38OVzSyg6PT1APEn/s1600/Leaf6.png";<br />image_urls['rain4'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUMPe85sQfuy4zZIBtsIwWuodi6lD0FMZE02OJI7NMu6pYtF7lNObLIm7p_VftNv529BL7RaKthieaOMfhSkt65A3HWV89M3EnucU3AVVefgHaZTSgz1Fbmv9gisVVuW52AnM3YGC-nC2U/s1600/Leaf5.png";<br />$(document).ready(function () {<br />var c = $(window).width();<br />var d = $(window).height();<br />var e = function (a, b) {<br />return Math.round(a + (Math.random() * (b - a)))<br />};<br />var f = function (a) {<br />setTimeout(function () {<br />a.css({<br />left: e(0, c) + 'px',<br />top: '-30px',<br />display: 'block',<br />opacity: '0.' + e(10, 100)<br />}).animate({<br />top: (d - 10) + 'px'<br />}, e(7500, 8000), function () {<br />$(this).fadeOut('slow', function () {<br />f(a)<br />})<br />})<br />}, e(1, 8000))<br />};<br />$('<div> </div> ').attr('id', 'rainDiv')<br />.css({<br />position: 'fixed',<br />width: (c - 20) + 'px',<br />height: '1px',<br />left: '0px',<br />top: '-5px',<br />display: 'block'<br />}).appendTo('body');<br />for (var i = 1; i <= 20; i++) {<br />var g = $('<img/>').attr('src', image_urls['rain' + e(1, 4)])<br />.css({<br />position: 'absolute',<br />left: e(0, c) + 'px',<br />top: '-30px',<br />display: 'block',<br />opacity: '0.' + e(10, 100),<br />'margin-left': 0<br />}).addClass('rainDrop').appendTo('#rainDiv');<br />f(g);<br />g = null<br />};<br />var h = 0;<br />var j = 0;<br />$(window).resize(function () {<br />c = $(window).width();<br />d = $(window).height()<br />})<br />});<br /></script><br /><script><br />if (typeof jQuery == 'undefined') {<br />document.write('<' + 'script');<br />document.write(' language="javascript"');<br />document.write(' type="text/javascript"');<br />document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');<br />document.write('</' + 'script' + '>')<br />}<br /></script>
 
Past those code into your website.

Now enjoy leaf effect in your website. 

• Tweet
• Share
• Share
• Share
• Share