সুন্দর একটি লেটার জুম ইফেক্ট

নিজেও একজন ব্লগার তাই মনে করলাম ব্লগে এমন কিছু কি দেয়া জায় জা ব্লগের চেহারা আর ও বাড়াতে পারে।এমন এক সময় পাইলাম এই টা ।দেখুন ভাল লাগে কি না...

কোড গুলো কপি করে ব্লজ্ঞাররা Html/JavaScript উইগেট নিয়ে পেস্ট করে সেভ করুন, আর ওয়ার্ডপ্রেস এর জন্য Text উইগেট নিয়ে পেস্ট করে সেভ করুন ।

১ ম ইফেক্ট  ঃ




<style>

02
h1 {

03
font-size: 75px;

04
font-family:medula one;

05
color:fff;

06
text-shadow: 0 1px 0 #ccc,

07
               0 2px 0 #c9c9c9,

08
               0 3px 0 #bbb,

09
               0 4px 0 #b9b9b9,

10
               0 5px 0 #aaa,

11
               0 6px 1px rgba(0,0,0,.1),

12
               0 0 5px rgba(0,0,0,.1),

13
               0 1px 3px rgba(0,0,0,.3),

14
               0 3px 5px rgba(0,0,0,.2),

15
               0 5px 10px rgba(0,0,0,.25),

16
               0 10px 10px rgba(0,0,0,.2),

17
               0 20px 20px rgba(0,0,0,.15);

18
-webkit-transition: all .3s ease-out;

19
   -moz-transition: all .3s ease-out;

20
   -o-transition: all .3s ease-out;

21
   transition: all .3s ease-out;

22
}

23


24
h1:hover{

25
 -moz-transform: scale(1.2);

26
   -webkit-transform: scale(1.2);

27
   -o-transform: scale(1.2);

28
   transform: scale(1.2);

29
}

30


31


32
</style>

33
<div align="center" style="width:600px;">

34
<h1>যে লেখাকে আপনি ইফেক্ট দিতে চান ।</h1></div>






২ য় ইফেক্ট  ঃ
<script type="text/javascript" src="http://andreashommel.net/sandbox/lettering/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://andreashommel.net/sandbox/lettering/jquery.lettering-0.6.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Medula+One' rel='stylesheet' type='text/css'>
<style>
 
h1 {
font-size: 75px;
font-family:medula one;
color:fff;
text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
 
h1 span {
 display:inline-block;
 -webkit-transition:all 0.2s ease-out;
}
 
h1 span:hover {
 -moz-transform:scale(1.3);
 -webkit-transform:scale(1.3);
}
 
</style>
 
<h1 class="sexy">http://www.freelancingtutorials.blogspot.com<;/h1>
 
<script language="javascript">
$(document).ready(function() {
  $(".sexy").lettering();
});
</script> </link>

৩ য় ইফেক্ট ঃ
<style>
h1 {
font-size: 75px;
font-family:medula one;
color:fff;
text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
#vibrate h1 span {
display: inline-block;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
}
 
#vibrate h1:hover span {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-webkit-animation: amaz 0.2s linear infinite 0.3s;
-moz-animation: amaz 0.2s linear infinite 0.3s;
}
 
 
 
@-webkit-keyframes amaz {
 0% {
 -webkit-transform: rotate(0) scale(1.3);
 }
 25% {
 -webkit-transform: rotate(5deg) scale(1.3);
 }
 50% {
 -webkit-transform: rotate(0deg) scale(1.3);
 }
 75% {
 -webkit-transform: rotate(-5deg) scale(1.3);
 }
 100% {
 -webkit-transform: rotate(0) scale(1.3);
 }
}
 
@-moz-keyframes amaz {
 0% {
 -moz-transform: rotate(0) scale(1.3);
 }
 25% {
 -moz-transform: rotate(5deg) scale(1.3);
 }
 50% {
 -moz-transform: rotate(0deg) scale(1.3);
 }
 75% {
 -moz-transform: rotate(-5deg) scale(1.3);
 }
 100% {
 -moz-transform: rotate(0) scale(1.3);
 }
}
</style>
<div id="vibrate" style="width:600px;">
<h1>What <span>R</span> you doing here ?</h1></div>

৪র্থ ইফেক্ট ঃ
<style>
h1 {
font-size: 75px;
font-family:medula one;
color:fff;
text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
 
span
{
cursor:pointer;
-webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
}
 
span#char1:hover {
color: red;
 
}
 
span#char2:hover {
  color: yellow;
 
}
 
span#char3:hover {
  color: Green;
 
}
 
span#char4:hover {
  color: maroon;
 
}
 
span#char5:hover {
  color: blue;
 
}
 
span#char6:hover {
  color: pink;
 
}
 
span#char7:hover {
  color: orange;
 
}
 
span#char8:hover {
  color: purple;
 
}
 
</style>
<div style="width:600px;">
<h1>
<span id="char1">F</span>
<span id="char2">r</span>
<span id="char3">e</span>
<span id="char4">e</span>
<span id="char5">l</span>
<span id="char6">a</span>
<span id="char7">n</span>
<span id="char8">c</span>
<span id="char1">i</span>
<span id="char2">n</span>
<span id="char3">g</span>
<span id="char4">t</span>
<span id="char5">u</span>
<span id="char6">t</span>
<span id="char7">o</span>
<span id="char8">r</span>
</h1></div>