Awesome! টিউনস
সকল Awesome! টিউনস

ব্লগস্পর্ট ব্লগে দিন ঝরা পাতার ইফেক্ট

3,050 দেখা 6 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডিজাইন
প্রকাশিত
Level 0

41 টিউনস 268 টিউমেন্টস 1 ফলোয়ার

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

ডিমো

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<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>

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

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

Level 0

আমি Readul Haque। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 41 টি টিউন ও 268 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

সুন্দর ??? পাটিয়ে দিলাম প্রিয়তে।

Level 0

Kiso din jabot ami blogsot er kono site a dhokte parsi na.plz amake help koron vhaia ra.
ami GP dea net use kori.

    Level 0

    @লাভলু৫০: এইটা শুধু আপনার সমস্যা না অনেকেরেই সমস্যা, আপনি প্রক্সি সাইট দিয়ে দেখতে পারেন। ভাল ভাবেই দেখতে পারবেন।

Level 2

ইফেক্টের সাথে পোস্টটি ও সুন্দর ।সাধারন্ত নতুন ব্লগস্পট ব্লগ ইউজাররাই এই ধরনের ইফেক্ট তাদের ব্লগে বেশি ব্যবহার করে থাকে।ধন্যবাদ শেয়ার করার জন্য ।

Level 0

কাজ করে না।