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

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

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

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

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


 <!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 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 44 টি টিউন ও 25 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


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


টিউমেন্টস

ডিভাইন কোডার ভাই, দয়া করে সিএসএস ফাইলগুলো কোথাও আপলোড করে দিলে অনেক সুবিধা হত দেখতে।

উল্লাস ভাই সোর্স ফাইল এ দিয়ে দিয়েছি আপনি একটু ডাউনলোড করে নিন ।

ভাই কোডগুলো পেষ্টবিনে আপলোড করে দিলে ভালো হবে ।

ভাই আমি বুঝিনা আপনার সাইট এ ঢুকতে পারিনা কেন !!! আপনার সাইট আগেও ঢুকতে পারিনাই !!! আর ডাউনলোড ও করতে পারতেছিনা !

valo laglo!

ভাই আমি ওয়ার্ডপ্রেস এ theme চেঞ্জ করলে পর আর এডমিন প্যানেল এ ডুখতে পারি না সমস্যা তা কি একটু বলে পারবেন আর এইটা কিভাবে থিক করব

ভালো লাগলো বস… 😀