সিএসএস৩ দিয়ে তৈরি করুন টেক্সট অ্যানিমেশন ইফেক্ট

Awesome! টিউনস

সকল Awesome! টিউনস

এ মাসের টেকটিউনস সংবাদঃ ডিসেম্বর-২০০৯

রনি পারভেজ

এক সাথে যত খুশি ততো ই-মেইল চেক করুন ডেস্কটপ থেকে! প্রয়োজনীয় না হলে মূল্য ফেরত

হাসান যোবায়ের

হয়ে উঠুন পেনড্রাইভ ভাইরাস/ম্যালওয়্যার কিলার

এস বি মেহদি

ওয়েবসাইট তৈরী এবং হোস্টিং এর কয়েকটি ফ্রি অনলাইন টুল

দুঃসাহসী টিনটিন

1,979 দেখা 7 টিউমেন্টস জোসস

টিউন বিভাগ ওয়েব ডিজাইন

প্রকাশিত

Level 0

মাহমুদুল হাসান

44 টিউনস 25 টিউমেন্টস 0 ফলোয়ার

টিউমেন্ট ফলো জোসস

আজ আমি আপনাদের দেখাব কি করে সিএসএস৩ দিয়ে অনেক সুন্দর টেক্সট অ্যানিমেশন ইফেক্ট তৈরি করবেন ।

এর জন্য আপনাকে প্রথমে একটি এইচটিএমএল ফাইল তৈরি করতে হবে এবং একটি সিএসএস ফাইল তৈরি করতে হবে ।

আমি আপনাদের কে ৩ টি টেক্সট অ্যানিমেশন ইফেক্ট করে দেখাব আর এর জন্য আপনাকে ৩টি সিএসএস ফাইল তৈরি করতে হবে আপনারা নিশ্চয়ই সিএসএস ফাইল লিঙ্ক করাতে পারেন আর যদি না পারেন তাহলে আমি করে দেখাচ্ছি ।

যেহেতু আমি ৩টি অ্যানিমেশন ইফেক্ট দেখাব তাই আপনারা ৩টি সিএসএস ফাইল তৈরি করে নিবেন । সিএসএস ফাইল লিঙ্ক করানোর জন্য এই কোড টুকু ব্যাবহার করেন ।


 <!DOCTYPE html>
 <html>
 <head>

 <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>
 <body>

 </body>

 </html>

আমরা যে এইচটিএমএল কোড টুকু লেখলাম তার বডি ত্যাগ এর মাজে এই কোড টুকু অ্যাড করবো

 <ul>
             <li><h3>Text 1</h3></li>
             <li><h3>Text 2</h3></li>
             <li><h3>Text 3</h3></li>
             <li><h3>Text 4</h3></li>
    <li><h3>Text 5</h3></li>
 </ul>

এখন আমরা ৩টি আলদা আলদা সিএসএস ফাইল তৈরি করবো ।
সিএসএস ফাইল ১.


.text-animation,
.text-animation:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.text-animation li{
z-index: 1000;
position: absolute;
bottom: 295px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: textAnimation 20s linear infinite 0s;
-moz-animation: textAnimation 20s linear infinite 0s;
-o-animation: textAnimation 20s linear infinite 0s;
-ms-animation: textAnimation 20s linear infinite 0s;
animation: textAnimation 20s linear infinite 0s;
}
.text-animation li h3 {
font-family: 'Open Sans Condensed', sans-serif;
text-transform:uppercase;
font-size: 240px;
padding: 0;
line-height: 200px;
color:#390;
}
.text-animation li:nth-child(2){
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.text-animation li:nth-child(3){
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
.text-animation li:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.text-animation li:nth-child(5) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
.text-animation li:nth-child(6) {
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s;
}

/* Animation for the text */
@-webkit-keyframes textAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(200px);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}

20% {
opacity: 1;
-webkit-transform: scale(1);
}
23% { opacity: 0 }
27% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@-moz-keyframes textAnimation {
0% {
opacity: 0;
-moz-transform: translateY(200px);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
20% {
opacity: 1;
-moz-transform: scale(1);
}
23% { opacity: 0 }
27% {
opacity: 0;
-moz-transform: scale(10);
}
100% { opacity: 0 }
}
@-o-keyframes textAnimation {
0% {
opacity: 0;
-o-transform: translateY(200px);
}
10% {
opacity: 1;
-o-transform: translateY(0px);
}
20% {
opacity: 1;
-o-transform: scale(1);
}

23% { opacity: 0 }
27% {
opacity: 0;
-o-transform: scale(10);
}
100% { opacity: 0 }
}
@-ms-keyframes textAnimation {
0% {
opacity: 0;
-ms-transform: translateY(200px);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 1;
-ms-transform: scale(1);
}
23% { opacity: 0 }
27% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@keyframes textAnimation {
0% {
opacity: 0;
transform: translateY(200px);
}
10% {
opacity: 1;
transform: translateY(0px);
}
20% {
opacity: 1;
transform: scale(1);
}
23% { opacity: 0 }
27% {
opacity: 0;
transform: scale(10);
}
100% { opacity: 0 }
}

এখানে কোড লিখাটা আমার জন্য সমস্যা হচ্ছে পরের গুলু তাই সোর্স ফাইল দিয়ে দিলাম ।

পুরো সোর্স টুকু ডাউনলোড করতে এখানে ক্লিক করুন
ওয়েব ডিজাইন সম্পর্কিত আমাদের হেল্প পেজে যেতে এখানে ক্লিক করুন

টিউমেন্ট ফলো জোসস

Level 0

আমি মাহমুদুল হাসান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 44 টি টিউন ও 25 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।