Skip to content
Shameem's Note
Shameem Reza JavaScript, WordPress & SwiftUI
Shameem's Note

JavaScript, WordPress & SwiftUI

BUY ME A COFFEE
  • Home
  • About
  • Now
Shameem's Note

JavaScript, WordPress & SwiftUI

July 4, 2017October 15, 2019

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

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

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

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

Typed.js

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

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

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

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

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

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

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

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

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

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

Bangla

Post navigation

Previous post
Next post

Woth to read

Bangla ৮০/২০ প্রিন্সিপ্যাল

৮০/২০ প্রিন্সিপ্যালঃ সাক্সেস রুল

June 20, 2017October 15, 2019

তোমার যতগুলো জামা আছে তার মধ্যে ২০% জামা আছে যা তুমি ৮০% সময় পরো। আবার…

Read More
Bangla ইনসার্শন সর্ট

সর্টিংঃ ইনসার্শন সর্ট

June 21, 2017October 15, 2019

সর্ট বা sort করার মানে হলো, একটি নির্দিষ্ট ক্রম অনুসারে সসাজানো। যদি আমরা কোন ক্লাসের…

Read More
Bangla ট্রাভেলিং সেলসম্যান সমস্যা

ট্রাভেলিং সেলসম্যান সমস্যা

June 25, 2017January 26, 2023

ডায়ানামিক প্রোগ্রামিং () একটি খুবই গুরুত্বপূর্ণ বিষয় এবং বলা যায় প্রোগ্রামিং প্রতিযোগিতায় সব থেকে কঠিন…

Read More

Comments (2)

  1. Tarik Billa says:
    July 5, 2017 at 7:30 am

    Thank you Sir

    1. Shameem Reza says:
      July 6, 2017 at 2:15 am

      You are welcome.

Comments are closed.

Shameem Reza

I am the Father of a son, blessed with a pious wife. I am a self-taught iOS developer, SwiftUI Addicted and WordPress Ninja.

Over 80,000+ Readers

Get fresh content from Shameem.

  • Twitter
  • GitHub
  • LinkedIn
SwiftUI
JavaScript
Wordpress
Tips & Tricks

Recommended Resources

WordHero: 50+ AI writing tool to write sales and marketing emails that sell.

Rytr: AI Writing Tool to generate high-quality content.

Wave.video: Live Streaming Studio, Video Editor, Thumbnail Maker, Video Hosting, Video Recording, and Stock Library combined in one platform.

Ocoya: An all-in-one marketing solution that helps you effortlessly create, automate, and manage high-converting campaigns.

Join 3500+ Developers Getting Early Access To My Posts!

I learned these in the past 10 years by building a digital product development agency, and dozens of different web & mobile applications for clients and myself. Sign up to get updates when I write something new. No spam ever.

© 2023 Shameem's Note | Contact - Privacy - Disclosure