শীত আসছে এইবার সব পাতাই ঝরে পড়বে। আর এই ঝরা পাতা উপর থেকে পড়া দেখতে অনেকেরেই হয়তো বা ভাল লাগে। আজকে আমি আপনাদের ঝরা পাতার ইফেক্ট কিভাবে দিবেন তা দেখাবে। যদিও শীতের শেষ এটা রিমূভ করে দিতে পারেন। আর পছন্দ হলে রাখতেও পারেন, তবে সবচেয়ে বেশি যা রাখবেন তা হচ্ছে কোড গুলো এর কোড গুলো অবশ্যই ব্যাকআপ রাখবেন যাতে পরের বছর ব্যবহার করতে পারেন :p

ডিমো

ঝরা পাতার ইফেক্টটি দিতে প্রথমেই আপনার ব্লগার লগইন করুন। তারপর Layout এবং তারপর Add Gadget এরপরে HTML/JavaScript সিলেক্ট করুন। এবং নিচের কোডটুকু পেষ্ট করুন।

<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'] = "http://3.bp.blogspot.com/-bH72rAXHnLA/UMG5q0ZKQ_I/AAAAAAAAFQM/J8cQ6cP_1ks/s1600/Leaf1.png";
image_urls['rain2'] = "http://2.bp.blogspot.com/-sYEBH-PlRjw/UMG5tAbpx6I/AAAAAAAAFQU/z343xo80F8k/s1600/Leaf2.png";
image_urls['rain3'] = "http://2.bp.blogspot.com/-vc1D74L_B3k/UMG5xW3F0FI/AAAAAAAAFQk/BuhLTp4lpl8/s1600/Leaf6.png";
image_urls['rain4'] = "http://1.bp.blogspot.com/-6ITYtjlpbog/UMG5vGq29-I/AAAAAAAAFQc/eee_PBRaQ8k/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>

আশা করি আপনারা সবাই সফল ভাবে করতে পেরেছেন। ভাল লাগলে মন্তব্য করবেন।

আমার ব্লগ          আমার ফেইসবুক