আজ আমি আপনাদের দেখাব কি করে সিএসএস৩ দিয়ে অনেক সুন্দর টেক্সট অ্যানিমেশন ইফেক্ট তৈরি করবেন ।
এর জন্য আপনাকে প্রথমে একটি এইচটিএমএল ফাইল তৈরি করতে হবে এবং একটি সিএসএস ফাইল তৈরি করতে হবে ।
আমি আপনাদের কে ৩ টি টেক্সট অ্যানিমেশন ইফেক্ট করে দেখাব আর এর জন্য আপনাকে ৩টি সিএসএস ফাইল তৈরি করতে হবে আপনারা নিশ্চয়ই সিএসএস ফাইল লিঙ্ক করাতে পারেন আর যদি না পারেন তাহলে আমি করে দেখাচ্ছি ।
যেহেতু আমি ৩টি অ্যানিমেশন ইফেক্ট দেখাব তাই আপনারা ৩টি সিএসএস ফাইল তৈরি করে নিবেন । সিএসএস ফাইল লিঙ্ক করানোর জন্য এই কোড টুকু ব্যাবহার করেন ।
<!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 } }
এখানে কোড লিখাটা আমার জন্য সমস্যা হচ্ছে পরের গুলু তাই সোর্স ফাইল দিয়ে দিলাম ।
পুরো সোর্স টুকু ডাউনলোড করতে এখানে ক্লিক করুন
ওয়েব ডিজাইন সম্পর্কিত আমাদের হেল্প পেজে যেতে এখানে ক্লিক করুন
আমি মাহমুদুল হাসান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 44 টি টিউন ও 25 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
ডিভাইন কোডার ভাই, দয়া করে সিএসএস ফাইলগুলো কোথাও আপলোড করে দিলে অনেক সুবিধা হত দেখতে।