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

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

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

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

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

Typed.js

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

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

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

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

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

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

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

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

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

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

You can check also

Shameem Reza

IELTS এর লিসেনিং এমন একটি স্কিল টেস্ট, যেখানে ৯ এ ৯ পাওয়া সম্ভব। কেননা IELTS Reading এ আপনাকে ১ ঘন্টাতে ৩টি প্যাসেজ সল্ভ করতে হবে, খুবই কঠিন। Speaking এ টিচা...

Shameem Reza

বিশ্বায়নের এই যুগে ইন্ডাস্ট্রির সংখ্যা ক্রমশই বাড়ছে। আর এ কারণে বাড়ছে ইঞ্জিনিয়ারিং শিক্ষার গুরুত্ব। নিশ্চিত কর্মসংস্থানের একমাত্র এবং পরীক্ষিত মাধ্যম হচ্ছে ই...

Shameem Reza

হীপ (Heap) হচ্ছে এক ধরনের বাইনারি ট্রি। আরো ভালো করে বলতে গেলে কমপ্লিট বাইনারি ট্রি (Complete Binary Tree)। এই ট্রি এর শেষ লেভেল বাদে প্রতিটি লেভেলে সর্বোচ্চ...

Shameem Reza

ডায়ানামিক প্রোগ্রামিং () একটি খুবই গুরুত্বপূর্ণ বিষয় এবং বলা যায় প্রোগ্রামিং প্রতিযোগিতায় সব থেকে কঠিন বিষয়। এটিকে আমি কঠিন বলছি, এর কারন হলো এতে ভালো করার এ...

Shameem Reza

গ্রীড অ্যালগরিদমের জন্য ফ্র্যাকশনাল ন্যাপস্যাক (Fractional Knapsack) খুব পরিচিত একটি সমস্যা। অনেকের কাছে এই অ্যালগরিদম কঠিন মনে হলেও, এটি অনেক সহজ একটি অ্যাল...

Shameem Reza

বাইনারি সার্চ ট্রি এর প্রতিটি নোডে একটি করে মান থাকে। এখানে মান গুলো এমন ভাবে থাকে যেন, ট্রি এর লেফট সাবট্রি (Left subtree) এর সকল মান রুট নোডে থাকা মান থেকে...

Shameem Reza

সর্টিং মানেই যে কোন কিছু সাজানো, তা আমরা কম বেশি সবাই জানি। কম্পিউটার সায়েন্সের একটি গুরুত্বপূর্ণ বিষয় হচ্ছে অ্যালগরিদম, আর এই অ্যালগরিদমের মধ্যে সর্টিং অনেক...

Shameem Reza

সর্টিং অ্যালগোরিদমের মুল কাজই হচ্ছে অ্যারেতে থাকা দুটি উপাদানের অবস্থান সোয়াপ(swap) বা বিনিময় করা। সিলেকশন সর্ট অ্যারের সুচকগুলোকে প্রতিটি ইন্ডেক্সের জন্য লু...

Shameem Reza

সর্ট বা sort করার মানে হলো, একটি নির্দিষ্ট ক্রম অনুসারে সসাজানো। যদি আমরা কোন ক্লাসের পরীক্ষার খাতা ১ রোল থেকে ৬০ রোল পর্যন্ত ক্রম অনুসারে সাজাই, তাহলে এটাকে...

Shameem Reza

তোমার যতগুলো জামা আছে তার মধ্যে ২০% জামা আছে যা তুমি ৮০% সময় পরো। আবার একটি দোকানে যতগুলো পন্য আছে, তার মধ্যে ২০% পন্য এই রকম থাকে যা ৮০% সময় বিক্রয় হয়। তোমা...

2 Comments

  • Leave Your Comment