সিএসএস এ টেক্সট এনিমেশন!

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

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

[css]<section>
<h2>
<span>Real poetry is like</span>
<span>creating</span>
<div>
<span>breathtaking moments</span>
<span>lovely sounds</span>
<span>incredible magic</span>
<span>unseen experiences</span>
<span>happy feelings</span>
<span>beautiful butterflies</span>
</div>
<br />
<span>with a silent touch of</span>
<div>
<span>sugar</span>
<span>spice</span>
<span>colors</span>
<span>happiness</span>
<span>wonder</span>
<span>happiness</span>
</div>
</h2>
</section>[/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]

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


আজ এই পর্যন্ত। সবাই ভালো থাকুন।
আল্লাহ হাফেয।

নিলুফার ইয়াসমিন

লেখিকা নিলুফার ইয়াসমিন সম্মান ৪র্থ বর্ষের শিক্ষার্থী। ইংরেজীতে ব্লগিং এর মাধ্যমে ব্লগিং হাতেকড়ি। বাংলা ব্লগেও তিনি বেশ কিছু তথ্যপূর্ণ পোস্ট লিখেন। বর্তমানে তিনি টিউটোহোস্টের সাপোর্ট ম্যানেজার পদে কর্মরত আছেন। 

Tags:


ফেসবুকের মাধ্যমে মন্তব্য লিখুন

Leave a Reply