সিএসএস এ টেক্সট এনিমেশন তৈরী

0
227
সিএসএস এ টেক্সট এনিমেশন তৈরী

টিউটো হোস্ট

টিউটোহোস্ট (TutoHost.com)বাংলাদেশের একটি জনপ্রিয় ওয়েব হোস্টিং সেবাদানকারী প্রতিষ্ঠান। যুক্তরাস্ট্রভিত্তিক দ্রুতগতির বেশ কিছু ওয়েব সারভারে গুরুত্বপূর্ণ তথ্যগুলো নিরাপদে সংরক্ষণ করা হয়। আমরা এদেশে ২৪ ঘন্টা এবং বছরে ৩৬৫ দিন অনলাইন এবং ফোন সাপোর্টের ব্যবস্থা রেখেছে। যোগাযোগ- ০১৯১৫৬৩৪৩২৮ ও ০১৯৭৫৬৩৪৩২৮
সিএসএস এ টেক্সট এনিমেশন তৈরী

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

এইচটিএমএল কোড-

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

[css]

Real poetry is like
creating
breathtaking moments
lovely sounds
incredible magic
unseen experiences
happy feelings
beautiful butterflies

with a silent touch of

sugar
spice
colors
happiness
wonder
happiness

[/css]

সিএসএস কোড-
মেইন wrapper এর জন্য কোড-

[css].rw-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: ‘Bree Serif’;
padding: 10px;
}[/css]

টেক্সট এর বিভিন্ন ইফেক্টের জন্য কোড-

[css].rw-sentence{
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.rw-sentence span{
color: #444;
white-space: nowrap;
font-size: 200%;
font-weight: normal;
}

.rw-words{
display: inline;
text-indent: 10px;
}

.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #6b969d;}[/css]

এখন এনিমেশনের কোড লিখব-

[css].rw-words-1 span{
animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
animation-delay: 3s;
color: #6b889d;
}
.rw-words span:nth-child(3) {
animation-delay: 6s;
color: #6b739d;
}
.rw-words span:nth-child(4) {
animation-delay: 9s;
color: #7a6b9d;
}
.rw-words span:nth-child(5) {
animation-delay: 12s;
color: #8d6b9d;
}
.rw-words span:nth-child(6) {
animation-delay: 15s;
color: #9b6b9d;
}[/css]

এনিমেশন শব্দটি প্রতি ৩ সেকেন্ড পর পর পরিবর্তন হবে। এভাবে ৬টি শব্দ ১৮ সেকেন্ডে পরিবর্তন হলে পূর্বের শব্দ আসবে চক্রা-কারে।

শব্দগুলোকে বিবর্ণ করে দিব এবং এদের হাইট ও এনিমেট করব।এর জন্য নিচের কোড লিখতে হবে-

[css]@keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
[/css]

একই ভাবে width কেও এনিমেট করব।এর জন্য নিচের কোড লিখতে হবে-

[css]@keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}[/css]

নিচে ডেমো এবং সোর্স কোড দেওয়া আছে।
সিএসএস এ টেক্সট এনিমেশন তৈরী

সিএসএস এ টেক্সট এনিমেশন তৈরী
আজ এই পর্যন্ত। সবাই ভালো থাকুন।
আল্লাহ হাফেয।

পোস্ট লিখেছেন-ডোমেইন হোস্টিং সেবাদান কারী প্রতিষ্ঠান টিউটোহোস্ট সাপোর্ট বিভাগের নিলুফার ইয়াসমিন।

একসাথে প্রকাশিত টিউটোরিয়ালবিডি ব্লগে

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

15 + two =