লেখার প্রতিটি অক্ষর, শব্দ বা লাইনে স্বতন্ত্রভাবে ট্রানজিশন (Individual Transition) বা অ্যানিমেশন প্রয়োগ করার জন্য সাধারণত CSS (Web-এর জন্য) অথবা After Effects / Premiere Pro (Video Editing-এর জন্য) ব্যবহার করা হয়।
আপনি কোন মাধ্যমে এটি করতে চাচ্ছেন তা উল্লেখ করেননি, তাই বহুল ব্যবহৃত প্রধান দুটি মাধ্যমের সহজ উপায় নিচে দেওয়া হলো:
১. ওয়েব ডিজাইনে (HTML/CSS এবং JavaScript ব্যবহার করে)
ওয়েবসাইটে প্রতিটি অক্ষরের ওপর আলাদাভাবে ট্রানজিশন দিতে চাইলে, অক্ষরগুলোকে আলাদা আলাদা HTML ট্যাগে (যেমন <span>) ভাগ করে নিতে হয় এবং CSS-এর transition-delay ব্যবহার করতে হয়।
সহজ উদাহরণ (CSS & JS):
html
<!-- HTML -->
<h1 id="target-text">HELLO</h1>
Use code with caution.
css
/* CSS */
span {
display: inline-block;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s, transform 0.5s;
}
/* অ্যানিমেশন ট্রিগার হলে কেমন দেখাবে */
span.animate {
opacity: 1;
transform: translateY(0);
}
Use code with caution.
javascript
// JavaScript দিয়ে প্রতিটি অক্ষরকে <span> এ রূপান্তর এবং delay যোগ করা
const textElement = document.getElementById("target-text");
const letters = textElement.innerText.split("");
textElement.innerHTML = "";
letters.forEach((letter, index) => {
const span = document.createElement("span");
span.innerText = letter;
// প্রতিটি অক্ষরের ট্রানজিশনে সামান্য সময় বাড়িয়ে দেওয়া (Delay)
span.style.transitionDelay = `${index * 0.1}s`;
textElement.appendChild(span);
// অ্যানিমেশন ক্লাস যোগ করা
setTimeout(() => span.classList.add("animate"), 50);
});
Use code with caution.
ফলাফল: H-E-L-L-O অক্ষরগুলো একটির পর একটি নিচ থেকে ওপরে উঠে আসবে।
২. ভিডিও এডিটিংয়ে (Adobe After Effects)
ভিডিওতে টেক্সটের প্রতিটি অক্ষর বা শব্দ আলাদাভাবে ট্রানজিশন করানোর সবচেয়ে সহজ মাধ্যম হলো After Effects-এর Text Animators।
• ধাপ ১: After Effects-এ একটি Text Layer তৈরি করুন এবং আপনার লেখাটি লিখুন।
• ধাপ ②: টাইমলাইনে টেক্সট লেয়ারের বাম পাশের অ্যারো (>) চিহ্নে ক্লিক করে অপশনগুলো বের করুন। ডানপাশে Animate লেখা একটি বাটন পাবেন।
• ধাপ ৩: Animate বাটনে ক্লিক করে Position, Opacity বা Scale (যা আপনি পরিবর্তন করতে চান) সিলেক্ট করুন।
• ধাপ ৪: এখন লেয়ারের ভেতর Animator 1 এবং তার নিচে Range Selector দেখতে পাবেন।
• ধাপ ৫: Range Selector-এর ভেতর Start বা End প্রোপার্টিতে কীফ্রেম (Keyframe) ব্যবহার করে ০% থেকে ১০০% করুন।
• ধাপ ৬ (Advanced): Advanced অপশনে গিয়ে Based On-এ Characters (অক্ষর), Words (শব্দ) বা Lines (লাইন) সিলেক্ট করে দিন।