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

০৩ রা ফেব্রুয়ারি, ২০১৩ রাত ৮:৪০

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

তো চলুন কোডগুলো দেখে নিই-

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

Real poetry is like

creating< ­/span>

breathtak ­ing moments

lovely sounds

incredibl ­e magic

unseen experiences

happy feelings

beautiful ­ butterflies

with a silent touch of

sugar

spice

colors

happiness ­

wonder

happiness ­

সিএসএস কোড-

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

.rw-wrapper{

width: 80%;

position: relative;

margin: 110px auto 0 auto;

font-family: 'Bree Serif';

padding: 10px;

}

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

.rw-sentence{

margin: 0;

text-align: left;

text-shadow: 1px 1px 1px rgba(255,255,25 ­5,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;}

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

.rw-words-1 span{

animation: rotateWordsFirs ­t 18s linear infinite 0s;

}

.rw-words-2 span{

animation: rotateWordsSeco ­nd 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;

}

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

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

@keyframes rotateWordsFirs ­t {

0% { opacity: 1; animation-timin ­g-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 ­ rotateWordsSeco ­nd {

0% { opacity: 1; animation-timin ­g-function: ease-in; width: 0px; }

10% { opacity: 0.3; width: 0px; }

20% { opacity: 1; width: 100%;}

27% { opacity: 0; width: 100%;}

100% { opacity: 0; }

}

০ টি +০/-০