সিএসএস টাইপিং ইফেক্ট তৈরি

কাজে বা বিনা কাজে তুমি বিভিন্ন ওয়েব সাইট ঘুরে ঘুরে দেখছো। এমনি সময় পরার এক পর্যায়ে একটি তুমি একটি ওয়েব সাইটে ঢুকেছো, ধরে নিলাম তুমি shameem.me ওয়েব সাইটে আসছো। এখন, ঢুকেই দেখলে কিছু টেক্সট একটার পর একটা ঠিক লেখার মত করে উঠে যাচ্ছে। মনে হচ্ছে কেউ একজন টাইপ করছে। কি দেখছো এমন কখনো?

টাইপিং ইফেক্ট এর কথা শুনে কি তোমার মনে হচ্ছে যে এটা করা খুব কঠিন, যে করতে পারে সে নিশ্চয় অনেক বড় মাপের ডেভলপার? আসলে বড় হোক বা ছোট হোক, এই টাইপিং ইফেক্ট তৈরি করা খুব বেশি কঠিন কিছু না। কয়েক লাইন সিএসএস কোড লিখেই তুমি চোখ জোড়ানো টাইপিং ইফেক্ট বানাতে পারবে।

টাইপিং ইফেক্ট আমরা সিএসএস দিয়ে করবো, কিন্তু সাথে আরেকটি ওপেন সোর্স জেকুয়েরি প্লাগিন Typed.js ব্যবহার করবো। তোমরা যারা বুটস্ট্র্যাপ ব্যবহার করতে পারো, তারা আশাকরি জানো যে কিভাবে জেকুয়েরি প্লাগিন ব্যবহার করতে হয়, আর না জানলেও সমস্যা নেই।

[caption id=“attachment_346” align=“aligncenter” width=“645”] Typed.js[/caption]

টাইপড জেএস প্লাগিন সেটাপ করা খুব সহজ। এই প্লাগিন ব্যবহার করার জন্য তোমাকে নিচের কোড গুলো তোমার টেমপ্লেটে বা অ্যাপ্লিকেশনে যোগ করে দাও। ভালো হবে যদি তুমি হেড ট্যাগের মধ্যে রাখো।

<script src="typed.js"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  });
</script>
...

<iv class="element"></div>

উপরের কোড গুলো যোগ করার পর যখনি তোমার সাইট বা টেমপ্লেট লোড হবে, প্রথমে প্রথম সেনটেন্স টাইপ শুরু হবে, এবং প্রথমটা শেষ হলে পরেরটা। তুমি চাইলে টাইপিং এর সময় কাস্টোমাইজ করতে পারবে, অর্থাৎ কত মিলিসেকেন্ড ধরে তোমার টাইপিং ইফেক্ট চলবে তা তুমি চাইলে সেট করতে পারবে।

বিষয়টি ভালো করে ক্লিয়ার হতে তুমি গিট মার্কেট সাইট দেখতে পারোঃ https://git.market/

টাইপড জেএস জেকুয়েরি প্লাগিন ব্যবহার করা খুব সহজ, কিন্তু একটা সমস্যা আছে। তুমি জানো কি না জানি না, তবে জেকুয়েরি প্লাগিন ব্যবহার করলে তোমাকে এটি বার বার লোড করতে হবে, মানে যতবার তোমার সাইট লোড হবে ঠিক ততো বার এই প্লাগিনও লোড হবে, যা তোমার সাইটের লোডিং স্পিড অনেক স্লো করে দিবে।

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

সিএসএস অ্যানিমেশন ব্যবহার করে আমরা অ্যানিমেশন টাইমিং ফাংশন ব্যবহার করতে পারি। কিভাবে অ্যানিমেশন হবে, কতক্ষণ ধরে হবে সবকিছু আমরা এই অ্যানিমেশন টাইমিং ফাংশন দিয়ে করতে পারি। অনেকগুলো টাইমিং অ্যানিমেশনের মধ্যে একটি হচ্ছে steps(), যা আমাদের কোন ফ্রেম কতটুকু অ্যানিমেট করবে, কত সময় ধরে তা নির্ধারন করতে দিবে।

প্রথমে আমাদের একটি এইচটিএমল প্যারাগ্রাফ নিতে হবে, এবং তার মধ্যে আমরা ঐ লেখা গুলো রাখবো, যার মধ্যে টাইপিং ইফেক্ট ব্যবহার করবো।

<p class="css-typing">This is a paragraph that is being typed by CSS animation.</p>

এবার ইফেক্ট তৈরি করার পালা। প্রথমে আমাদেরকে প্যারাগ্রাফের width ডিফাইন করতে হবে, তারপর ওভারফ্লো হিডেন, এবং সব শেষে অ্যানিমেশন ইফেক্ট।

.css-typing
{
    width: 30em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
}

@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}

অ্যানিমেশন ইফেক্ট প্যারাগ্রাফের সাইজ ৫০টি ফ্রেমের মধ্যে 0 থেকে বৃদ্ধি করে 30em, যার ফলে অ্যানিমেশন শুরু হলেই মনে হবে যে কেউ এক জন টাইপ করে দিচ্ছে।

তুমি চাইলে যে কোন ভাবেই অর্থাৎ জেকুয়েরি প্লাগিন বা সিএসএস ব্যবহার করে টাইপিং ইফেক্ট তৈরি করতে প্যাঁরও, তবে আমার সাজেশন হবে সিএসএস ব্যবহার করা। কেননা শুধু সিএসএস ব্যবহার করলে তোমাকে না ভাবতে হবে সাইটের স্পিড নিয়ে, না ব্রাউজার সাপোর্ট নিয়ে।