ওয়েব পেজের মেনুকে Sticky বা Fixed করে রাখার ১৫টি jQuery প্লাগইন

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

স্টিকি এলিমেনট সাধারনত css দিয়ে করা যায়। কিন্তু তা দিয়ে একাধিক ব্রাউজারে সাপোর্ট করানো খুব ঝামেলা।  এজন্য জেকুয়েরি প্লাগিন ব্যাবহার একটি সহজ ও নিরাপদ অপশন।  এখানে কয়েকটি জেকুয়েরি প্লাগিন নিয়ে এলাম স্টিকি এলিমেনট সহজে তৈরির জন্য।

 Waypoints

file-(26)

Waypoints দিয়ে খুব সহজেই স্টিকি করা যায়। আপনি স্ক্রলিং এর দিকনির্দেশনা সহজেই বদলাতে পারবেন। উপর নিচ বা ডানে বামে ইচ্ছে মতো কাস্টমাইজ করা যায়। ওয়েবসাইটের ঠিকানাঃ http://imakewebthings.com/waypoints/

Sticky Kit

sticky-stickykit

StickyKit দিয়ে একাধিক এলেমেনট কে স্টিকি করা যায়। এই প্লাগিনের আরও কিছু অ্যাডভানস সুবিধা আছে। জানতে চাইলে নিচের লিঙ্ক থেকে জানতে পারবেন। গিথাব ঠিকানাঃhttps://github.com/leafo/sticky-kit

StickyJS

file-(27)

StickyJS কে যতটা সহজ বলা হয় ত্ততা সহজ নয়। এটিকে কাস্টমাইজ করা একটু কঠিন। ওয়েবসাইটের ঠিকানাঃ http://stickyjs.com/

HeadRoom

sticky-headroom

Headroom এটি একটি জাভা স্ক্রিপ্ট লাইব্রেরী । এটি আপনার মেনুবারকে খুব স্মার্টভাবে উপস্থাপন করেবে। ইউজার যখন স্ক্রল করে নিচে চলে যাবে মেনুবার তখন দেখা যাবেনা। যখন স্ক্রল করে উপরে আসবে তখন এটি দেখা যাবে। নিচের লিংক থেকে ডাউনলোড করতে পারবেন। ওয়েবসাইটের ঠিকানাঃ http://wicky.nillia.ms/headroom.js/

MakefixedJS

sticky-makefixed

Makefixed  দিয়ে খুব দ্রুত ডাইনামিকভাবে এলিমেনটগুলিকে সেট করতে পারে। makeFixed() এই ফাংশনের মধ্য যে এলিমেনটকে ফিক্সড করতে চান সেটি কল করুন কাজ হয়ে যাবে।

https://github.com/guimadaleno/makefixed.js

MidnightJS

file-(28)

এটি একটি দারুন প্লাগিন। এটি ব্যাবহার করলে আপনার মেনুবারটিকে মনে হবে উড়ছে। অর্থাৎ উড়ন্ত মেনুবার ! গিথাব ঠিকানাঃ http://aerolab.github.io/midnight.js/

  ScrollMagic

file-(29)

পেজ স্ক্রলের সময় বিভিন্ন ধরনের অ্যাডভান্স ফিচার ব্যাবহার করতে পারবেন। আপনি যেকোনো এলিমেনটকে স্ক্রলিং এর সময় পিন করে রাখতে পারবেন, অ্যানিমেশন যোগ করতে পারবেন। এছাড়া parallax ইফেক্ট ও এড করতে পারবেন। গিথাব ঠিকানাঃ http://janpaepke.github.io/ScrollMagic/

  onScreen

sticky-onscreen

এই প্লাগিনটি Waypoints এর মতো কাজ করে।গিথাব ঠিকানাঃ http://silvestreh.github.io/onScreen/

 jQuery Pin

file-(30)

এটি একটি ছোট প্লাগিন। এটির মাধ্যমে পেজটি স্ক্রলের সময় এলিমেনটকে একটা পজিশনে পিন বা পিন ছাড়া করে রাখতে পারবেন। আপনি আপনার পেজের প্রিয় অংশটি সবসময় দেখার বেবস্থা করতে পারবেন। গিথাব ঠিকানাঃhttp://webpop.github.io/jquery.pin/

Sticky Float

file-(31)

Sticky Float এর মাধ্যমে আপনার প্রয়োজন অনুযায়ী প্রদত্ত প্যারামিটার ব্যাবহার করে ভেলু চেঞ্জ করতে পারবেন। অনেকগুলো ভাসমান এলেমেনট হ্যান্ডেল করতে পারবেন। গিথাব ঠিকানাঃ https://github.com/yairEO/stickyfloat

Zebra Pin

file-(32)

এটি একটি হালকা ধরনের প্লাগিন। এর সাহায্য আপনি যে কোন কিছু পিন করে রাখতে পারবেন। আপনি চাইলে আপনার প্রোজেক্টে “sticky-ness” এলিমেনট যোগ করতে পারবেন যার ফলে ন্যাভিগেশন, সাইডবার, ফুটারে, আপনার যা ইচ্চা পিন করে রাখতে পারবেন স্ক্রলিং এর সময়। ওয়েব এর ঠিকানাঃ http://stefangabos.ro/wp-content/demos/Zebra_Pin/examples/

 HC-Sticky

file-(33)

এই প্লাগিনটি ক্রস ব্রাউজার সাপোর্ট করে। এই প্লাগিন এ একটি সুন্দর অপশন আছে, আপনি আপনার প্রয়োজন অনুসারে যেমন কোথা থেকে ফ্লোতিং শুরু হবে উপর থেকে না নিচ থেকে তা অ্যাডজাস্ট করতে পারবেন। গিথাব ঠিকানাঃ https://github.com/somewebmedia/hc-sticky

 Sticky Mojo

sticky-mojo

Sticky Mojo এটি একটি হালকা, দ্রুত, এবং ফ্লেক্সিবল প্লাগিন যা অসাম স্টিকি সাইডবার তৈরি করে। এটি মডার্ন সব ব্রাউজারে কাজ করে। গিথাব ঠিকানাঃ

http://mojotech.github.io/stickymojo/

 Sticky Navbar

sticky-navbar

এই প্লাগিন পেজ স্ক্রলের সময় ন্যাভিগেশন বারকে পেজের টপে রাখতে সাহায্য করে। stickyNavbar.js  আপনাকে আপনার প্রিয় জেকুয়েরি ইফেক্ট এমনকি Animate.CSS যোগ করতে সাহায্য করবে। ওয়েব সাইটের থিকানাঃ http://www.jozefbutko.com/stickynavbar/

 StickyStack

file-(34)

আপনি যখন পেজের টপে পোঁছে যাবেন এই প্লাগিন sticking panels এর সাহায্য stack ইফেক্ট তৈরি করে । ওয়েবসাইটের ঠিকানাঃ http://codepen.io/mike-zarandona/full/Dasnw

আশা করি প্লাগিনগুলো আপনাদের কাজে লাগবে। আজ এই পর্যন্ত। ধন্যবাদ সবাইকে।

আরো পোস্ট দেখুন

comments