Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

কীভাবে জেকুয়েরী দিয়ে কোনও কনটেন্ট লোড এবং অ্যানিমেট করবেন

by
Read Time:6 minsLanguages:

Bengali (বাংলা) translation by Bint Salim (you can also view the original English article)

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




তাহলে সবার প্রথমে, এই উদাহরণটির জন্য আমি খুব সাধারণ একটি লেআউট ব্যবহার করবো। এখানে যেই HTML কোড আমরা ব্যবহার করবো, তার স্ক্রিনশট দেয়া হলো।


ধাপ ১

প্রথম কাজ প্রথমে, জেকুয়েরী ওয়েবসাইটে গিয়ে জেকুয়েরীর সর্বশেষ স্টেবল ভার্শনটি নামিয়ে আপনার প্রজেক্ট ফোল্ডারে রাখুন , এবং আপনার ডকুমেন্টের সাথে লিংক তৈরি করুনঃ

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

প্রথমে জেকুয়েরী লাইব্রেরী লোড করতে হবে, তারপর ডকুমেন্টটি প্রস্তুত হলে একটি ফাংশন তৈরি করতে হবে (যখন DOM লোড হবে)।


ধাপ ২

এখন আমরা এটাকে এমনভাবে তৈরি করতে চাচ্ছি, যাতে করে ব্যবহারকারী যদি আমাদের পেইজের ন্যাভিগেশন মেনু থেকে একটি লিঙ্কে ক্লিক করে তাহলে ব্রাউজার ব্যবহারকারীকে ক্লিক করা পেইজে প্রেরণ করবে না, কিন্তু তার পরিবর্তে বর্তমান পেইজের মধ্যেই ঐ পেইজের কনটেন্ট বা বিষয়বস্তুগুলো লোড করবে। 

এজন্য আমরা ন্যাভিগেশন মেনুর লিংকগুলোকে টার্গেট করতে চাচ্ছি এবং যখনই এগুলো ক্লিক করা হবে তখন একটি ফাংশন চালু করতে চাচ্ছিঃ

বিশেষ ঘটনা বা ইভেন্টের পরিপ্রেক্ষিতে এই ফাংশনটি ক্রমান্বয়ে কি করবে তার একটি সংক্ষিপ্ত বিবরনঃ

  1. বর্তমান পেইজের কনটেন্ট মুছে ফেলবে।
  2. নতুন পেইজের কনটেন্ট এনে তা কন্টেন্ট DIV বা নির্দিষ্ট জায়গায় যোগ করবে।

এখন আমাদেরকে ঠিক করতে হবে, যখন কোনও লিঙ্কে ক্লিক করা হবে তখন কোন পেইজ থেকে তথ্য নিয়ে আসবে। এখানে আমরা যা করতে পারি তা হচ্ছে লিঙ্কের 'href' এট্রিবিউটটি নিয়ে তা নির্দিষ্ট পেইজের তথ্য আনার কাজে ব্যবহার করতে পারি, একই সাথে রিকুয়েস্ট করা পেইজের কোন অংশ থেকে তথ্য নিয়ে আসবে তাও ঠিক করে দিতে পারি- যেহেতু, আমরা সমস্ত তথ্য আনতে চাই না, শুধুমাত্র 'content' ডিভিশনের তথ্যটুকু ছাড়া, তাহলেঃ

উপরের কোডটি কিভাবে কাজ করবে তা চিত্রায়ন করতে, ধরি, একজন ব্যবহারকারী 'about লিঙ্কে ক্লিক করেছেন যা 'about.html' পেইজের সাথে লিংক করা হয়েছে – এই ক্ষেত্রে এই ভেরিয়েবলটি হবেঃ 'about.html #content'। এই ভেরিয়েবল ব্যবহার করেই আমরা অ্যাজাক্স কলের মাধ্যমে নির্দিষ্ট তথ্যের অনুরোধ জানাবো। প্রথমে, আমরা বর্তমান পেইজ কন্টেন্টের জন্য একটি চমৎকার ইফেক্ট তৈরি করবো। হঠাৎ করে উধাও হয়ে যাওয়ার পরিবর্তে আমরা জেকুয়েরীর 'hide' ফাংশনটি নিচের মত করে ব্যবহার করবোঃ 

উপরের ফাংশনটি অতি দ্রুত #content ডিভিশনটি লুকিয়ে ফেলে, এবং যখন ইফেক্টটি শেষ হয়ে যায় তারপর "loadContent" ফাংশনটি শুরু করে ([অ্যাজাক্সের মাধ্যমে] নতুন কনটেন্ট লোড করে) একটি ফাংশন যেটা পরে (৪ নং ধাপে) আমরা সংজ্ঞায়িত করবো)।


ধাপ ৩ 

যখন আগের কনটেন্টটি একটি অসাধারণ ইফেক্টসহ সরে যাবে, তখন আমরা নতুন কনটেন্ট আসা পর্যন্ত পাঠকদেরকে খালি জায়গা প্রদর্শন করতে চাই না।(বিশেষ করে আপনার যদি ধীর গতির ইন্টারনেট সংযোগ থাকে) তাই আমরা একটি ছোট্ট লোডীং গ্রাফিক তৈরি করবো যাতে তাঁরা বুঝতে পারে ব্যাকগ্রাউণ্ডে কিছু একটা ঘটছে:

নতুন তৈরিকৃত #load ডিভিশনের জন্য নিচের CSS টি প্রয়োগ করা হয়েছে:

তাহলে, স্বাভাবিক ভাবে এই 'load' span টি display:none হিসেবে সেট করা হয়েছে, কিন্তু যখন (উপরের কোডের) fadeIn ফাংশনটি শুরু হবে এটা ওয়েবসাইটের উপরের ডান দিকের কর্নার থেকে ধীরে ধীরে মিলিয়ে যাবে এবং আমাদের অ্যানিমেটেড GIF ইমেজটি দেখাবে যতক্ষন না পুনরায় নতুন কণ্টেণ্ট দেখা যায়।


ধাপ ৪

এখন পর্যন্ত, যখন কোনও ব্যবহারকারী নিম্নলিখিত লিঙ্কগুলির উপর ক্লিক করেন তখন ঘটবে:

  1. বর্তমান কনটেন্ট টি একটি অসাধারণ ইফেক্টসহ মিলিয়ে যাবে।
  2. একটি লোডিং বার্তা প্রদর্শন করবে। 

এবার, লোড loadContent ফাংশনটি লিখবো যা আমরা আগেই কল করেছি:

loadContent ফাংশনটি রিকুয়েস্ট করা পেইজটি কল করবে, তারপর এটি সম্পন্ন হয়ে গেলে 'showNewContent' ফাংশন কল করবে:

showNewContent জেকুয়েরীর show ফাংশন ব্যবহার করবে (যেটা আসলে অসাধারণ ইফেক্টের জন্য একটি বিরক্তিকর নাম) যাতে রিকুয়েস্ট করা কনটেন্টটি '#content' ডিভিশনের মধ্যে দেখা যায়। কনটেন্ট কল করা হয়ে গেলে এটা  'hideLoader' ফাংশন শুরু করে দেয়ঃ

ক্লিক ফাংশনের শেষে "return false" অবশ্যই মনে করে দিতে হবে- যাতে করে ব্রাউজার নির্দিষ্ট পেইজে যেতে না পারে।

এখন এটা সুন্দরভাবে কাজ করছে। আপনি এখান থেকে এটার উদাহরণ দেখতে পারেনঃ [লিংক]

এই পর্যন্ত কোডটি হচ্ছেঃ


ধাপ ৫

আপনি এখানেই থেমে যেতে পারেন কিন্তু আপনি যদি ব্যবহার সক্ষমতা বিবেচনা করেন (যেটা অবশ্যই করা উচিৎ) তাহলে আরও কিছু কাজ করা প্রয়োজন। আমাদের এই কনটেন্ট সল্যুশনের সমস্যা হচ্ছে এটা URL উপেক্ষা করে। যদি একজন ব্যবহারকারী এই পেইজগুলোর কোনও একটি লিংক করতে চায়, তাহলে কি করবে? – তাঁদের জন্য এটা করার কোনও উপায়ই নেই কারণ URL সর্বদা একইরকম থাকবে।

তাই, এটা করার একটি ভালো উপায় হচ্ছে URL এ একটি 'hash' এর মান যোগ করা যা ব্যবহারকারী কোন পেইজটি দেখছে তা নির্দেশ করবে। তাহলে, ব্যবহারকারী যদি 'about' কনটেন্ট টি দেখে তাহলে URL টি হবে: 'www.website.com/#about'। এ জন্য আমরা 'click' ফাংশনে এক লাইনের একটি কোড যুক্ত করবো। যাতে কোনও ব্যবহারকারী ন্যাভিগেশন লিঙ্কে ক্লিক করার সাথে সাথে একটি হ্যাশ যুক্ত হবেঃ

উপরের কোডটি আসলে হ্যাশ ট্যাগের মান পরিবর্তন করে ক্লিক করা লিঙ্কের  'href'  অ্যাট্রিবিউট অনুযায়ী মান বসায়  ('.html' এক্সটেনশনটিকেও বিয়োগ করে)। তাই যখন কোনও ব্যবহারকারী ‘হোম’ লিংক (href=index.html) এ ক্লিক করে তখন হ্যাশের মান দেখাবে '#index'।

একইসাথে আমরা ব্যবহারকারীদের জন্য এই URL ব্যবহার করে নির্দিষ্ট পেইজ দেখাও সম্ভব করে তুলবো। এ জন্য আমরা প্রথমে হ্যাশের মান চেক করে সে অনুসারে কনটেন্ট পরিবর্তন করে দিতে পারি: 

এখানে প্রয়োজনীয় সমস্ত জাভাস্ক্রিপ্ট কোড অন্তর্ভুক্ত করা হয়েছেঃ (একইসাথে জেকুয়েরী লাইব্রেরীও)


সমাপ্ত...

এই পদ্ধতিটির সুবিধা হচ্ছে এটি যেকোন সাইটেই মিনিটের মধ্যে ব্যবহার করা যাবে।  এটা খুবই পরিচ্ছন্ন এবং যদি ব্যবহারকারী JS অচল করে রাখে, তবে ওয়েবসাইটটি সাধারণভাবে কাজ করবে।

হাতে কলমে চূড়ান্ত ফলাফলটি দেখুন।

HTML, JS, CSS এবং ইমেজগুলো ডাউনলোড করুন।

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.