Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা ScrollSpy কম্পোনেন্ট প্রদান করে। ScrollSpy হল একটি ইন্টারঅ্যাকটিভ ফিচার যা ব্যবহারকারীর স্ক্রোলিং কার্যকলাপ ট্র্যাক করতে সহায়ক। এটি পেজের বিভিন্ন সেকশনের সাথে সম্পর্কিত লিঙ্কগুলোকে হাইলাইট বা অ্যাকটিভ করে, যখন ব্যবহারকারী পেজে স্ক্রল করে। এটি মূলত single-page applications (SPA) এবং long-scrolling websites এ ব্যবহৃত হয়, যেখানে একাধিক সেকশন থাকে এবং প্রতিটি সেকশনের জন্য আলাদা আলাদা নেভিগেশন লিঙ্ক থাকে।
এই টিউটোরিয়ালে Materialize CSS এর ScrollSpy ব্যবহার করে কিভাবে সেকশন ট্র্যাকিং এবং নেভিগেশন লিঙ্ক হাইলাইট করা যায়, সেটি আলোচনা করা হবে।
ScrollSpy কী?
ScrollSpy হল একটি ফিচার যা ওয়েব পেজের স্ক্রলিং অবস্থান অনুসারে নির্দিষ্ট সেকশনগুলোকে ট্র্যাক করে এবং সেগুলোর সাথে সম্পর্কিত নেভিগেশন লিঙ্কগুলোকে অ্যাকটিভ করে। এটি ব্যবহারকারীর স্ক্রলিংয়ের গতির সাথে ইন্টারঅ্যাকটিভ এবং ডায়নামিক নেভিগেশন প্রদান করতে সাহায্য করে।
ScrollSpy এর উপকারিতা
- সেকশন ট্র্যাকিং: ব্যবহারকারীর স্ক্রলিংয়ের সাথে সেকশনের অবস্থান ট্র্যাক করা হয়।
- নেভিগেশন হাইলাইটিং: যেসব সেকশন ব্যবহারকারী দেখছেন, সেগুলোর সম্পর্কিত লিঙ্কগুলো হাইলাইট হয়।
- ইউজার ফ্রেন্ডলি: ব্যবহারকারীর জন্য আরও সহজ এবং দ্রুত নেভিগেশন করার সুযোগ তৈরি হয়।
ScrollSpy সেটআপ এবং কনফিগারেশন
১. HTML স্ট্রাকচার তৈরি করা
প্রথমে, ওয়েব পেজের সেকশন এবং নেভিগেশন লিঙ্কগুলো তৈরি করতে হবে। এখানে প্রতিটি সেকশন একটি id সহ থাকবে, যা ScrollSpy কে সাহায্য করবে সেগুলোর অবস্থান ট্র্যাক করতে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize ScrollSpy Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<!-- Navigation Bar -->
<ul id="slide-out" class="sidenav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<!-- Main Content -->
<div class="container">
<div id="section1" class="section scrollspy">
<h2>Section 1</h2>
<p>Content for Section 1...</p>
</div>
<div id="section2" class="section scrollspy">
<h2>Section 2</h2>
<p>Content for Section 2...</p>
</div>
<div id="section3" class="section scrollspy">
<h2>Section 3</h2>
<p>Content for Section 3...</p>
</div>
<div id="section4" class="section scrollspy">
<h2>Section 4</h2>
<p>Content for Section 4...</p>
</div>
</div>
<script>
$(document).ready(function(){
// Initialize ScrollSpy
$('.scrollspy').scrollSpy();
// Initialize Sidenav
$('.sidenav').sidenav();
});
</script>
</body>
</html>
এখানে:
- section ক্লাসের মাধ্যমে প্রতিটি সেকশন নির্ধারণ করা হয়েছে।
- scrollspy ক্লাসটি প্রতিটি সেকশনে যোগ করা হয়েছে, যা ScrollSpy ফিচারটিকে সক্রিয় করবে।
- সাইডনেভের জন্য Materialize এর sidenav ব্যবহার করা হয়েছে।
- প্রতিটি নেভিগেশন লিঙ্কে সেকশনগুলোর সাথে সম্পর্কিত
href="#sectionX"আছেঃ যেখানেsectionXহলো সেকশনেরid।
২. JavaScript কোড
এখানে scrollSpy ফিচারটি সক্রিয় করতে JQuery ব্যবহার করা হয়েছে। $('.scrollspy').scrollSpy(); লাইনটি স্ক্রোল স্পাইয়ের জন্য প্রয়োজনীয় কনফিগারেশন এবং কার্যক্রম পরিচালনা করবে।
$(document).ready(function(){
// Initialize ScrollSpy
$('.scrollspy').scrollSpy();
// Initialize Sidenav (Optional)
$('.sidenav').sidenav();
});
এটি ওয়েব পেজের স্ক্রলিং অবস্থান অনুসারে প্রতিটি সেকশনকে ট্র্যাক করবে এবং সম্পর্কিত নেভিগেশন লিঙ্কগুলোকে হাইলাইট করবে।
ScrollSpy কনফিগারেশন
Materialize CSS ScrollSpy এর জন্য বিভিন্ন কনফিগারেশন অপশন প্রদান করে। আপনি নিচের মতো কনফিগারেশন অপশন ব্যবহার করতে পারেন:
- scrollOffset: এটি স্ক্রলিংয়ের জন্য একটি নির্দিষ্ট অফসেট নির্ধারণ করে, যাতে সেকশন যখন স্ক্রিনের কিছু অংশ দেখায় তখন ট্র্যাকিং শুরু হয়।
- throttle: স্ক্রলিং ইভেন্টের ফ্রিকোয়েন্সি নিয়ন্ত্রণ করে।
উদাহরণ:
$('.scrollspy').scrollSpy({
scrollOffset: 100, // 100px স্ক্রোল করার পর সেকশন হাইলাইট হবে
throttle: 200 // থ্রটলিং 200 মিলিসেকেন্ডে হবে
});
এখানে:
- scrollOffset: 100: এর মানে হচ্ছে স্ক্রল করার পর সেকশন যখন স্ক্রীনে 100px পৌঁছাবে, তখন সেটি ট্র্যাক হবে।
- throttle: 200: স্ক্রলিং ইভেন্টে 200 মিলিসেকেন্ডের বিরতি দেবে।
উপসংহার
ScrollSpy হল একটি অত্যন্ত কার্যকরী এবং ইন্টারঅ্যাকটিভ ফিচার, যা ব্যবহারকারীর স্ক্রলিং অভিজ্ঞতাকে উন্নত করে এবং সাইটের বিভিন্ন সেকশনের সাথে সম্পর্কিত নেভিগেশন লিঙ্কগুলোকে স্বয়ংক্রিয়ভাবে হাইলাইট করে। Materialize CSS এর মাধ্যমে এটি খুব সহজেই ইমপ্লিমেন্ট করা যায়, এবং আপনি এটি বিভিন্ন কনফিগারেশন দিয়ে কাস্টমাইজ করতে পারেন। ScrollSpy ব্যবহার করে আপনার ওয়েবসাইটে স্ক্রলিং নেভিগেশন আরো কার্যকরী এবং আকর্ষণীয় করা যায়।
Read more
