Parallax Scrolling একটি জনপ্রিয় ভিজ্যুয়াল ইফেক্ট যা ওয়েব ডিজাইন এবং গেমসের জন্য ব্যবহৃত হয়। এতে ওয়েব পেজের ব্যাকগ্রাউন্ড এবং ফরওয়ার্ড কন্টেন্ট দুটি আলাদা গতিতে স্ক্রল হয়, যার ফলে একটি ৩ডি (threedimensional) ইফেক্ট তৈরি হয়। এই ইফেক্ট ব্যবহারকারীর জন্য একটি ইন্টারঅ্যাকটিভ এবং দৃষ্টি আকর্ষণকারী অভিজ্ঞতা তৈরি করে। Materialize CSS ফ্রেমওয়ার্কে Parallax সহজেই ব্যবহার করা যায় এবং এটি একটি সুন্দর, সজীব ইফেক্ট প্রদান করে যা ওয়েবসাইটকে আরও আকর্ষণীয় করে তোলে।
এখানে Materialize CSS-এ Parallax Scrolling কী এবং এটি কিভাবে কাজ করে, তা বিস্তারিতভাবে আলোচনা করা হলো।
Parallax Scrolling কী?
Parallax Scrolling হল একটি ভিজ্যুয়াল ইফেক্ট যেখানে ওয়েব পেজের ব্যাকগ্রাউন্ড এবং কন্টেন্ট দুটি আলাদা গতিতে স্ক্রল হয়। এর ফলে এটি একটি গভীরতার অনুভূতি তৈরি করে, যেখানে ব্যাকগ্রাউন্ডের এলিমেন্টগুলি ফরওয়ার্ড কন্টেন্টের তুলনায় ধীরে স্ক্রল হয়। এটি একটি ৩ডি ইফেক্ট তৈরি করে যা ব্যবহারকারীকে একটি নতুন এবং আকর্ষণীয় অভিজ্ঞতা প্রদান করে। সাধারণত এটি scrolling এর মাধ্যমে অর্জিত হয় এবং এটি ওয়েবসাইটে সুন্দর ভিজ্যুয়াল ইফেক্ট এবং ইউজার ইন্টারফেস (UI) এর জন্য ব্যবহৃত হয়।
Parallax Scrolling কিভাবে কাজ করে?
Parallax Scrolling সাধারণত দুটি উপাদানের মাধ্যমে কাজ করে:
- Foreground Content: এটি ওয়েব পেজের মূল কন্টেন্ট, যেমন টেক্সট, ছবি বা অন্যান্য উপাদান, যা দ্রুত স্ক্রল হয়।
- Background Content: এটি পেজের ব্যাকগ্রাউন্ড বা অন্যান্য স্থির উপাদান, যা ধীরে স্ক্রল হয়।
এই দুটি উপাদান একসাথে স্ক্রল করা হয়, তবে তাদের গতির মধ্যে একটি পার্থক্য থাকে। ফলে ব্যবহারকারীরা একটি ৩ডি ইফেক্ট দেখতে পায় যেখানে ব্যাকগ্রাউন্ড এবং ফরওয়ার্ড কন্টেন্ট আলাদা গতিতে স্ক্রল হয়।
Materialize CSS-এ Parallax ব্যবহার করা
Materialize CSS ফ্রেমওয়ার্কে Parallax Scrolling ব্যবহার করা খুবই সহজ। Materialize এর মধ্যে Parallax container এবং Parallax ক্লাস আছে, যা সহজে এই ইফেক্ট ইমপ্লিমেন্ট করতে সাহায্য করে। নিচে Parallax Scrolling ব্যবহার করার একটি উদাহরণ দেওয়া হলো।
১. Parallax Scrolling উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Example</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Parallax Container -->
<div class="parallax-container">
<div class="parallax"><img src="https://via.placeholder.com/1600x900" alt="Background Image"></div>
</div>
<!-- Content -->
<div class="section white">
<div class="row container">
<h2 class="header">Parallax Scrolling Example</h2>
<p>This is a simple example of Parallax Scrolling using Materialize CSS.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="https://via.placeholder.com/1600x900" alt="Another Background Image"></div>
</div>
<!-- Materialize JS Link -->
<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>
<script>
// Initialize Parallax
$(document).ready(function(){
$('.parallax').parallax();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
<div class="parallax-container">: এটি parallax এর জন্য একটি কন্টেইনার তৈরি করে, যা ওয়েব পেজের একটি সেকশন হিসেবে কাজ করে।<div class="parallax"><img src="..."></div>: এই ডিভ ট্যাগের মধ্যে একটি ব্যাকগ্রাউন্ড ইমেজ নির্ধারণ করা হয়, যা ধীরে স্ক্রল হবে এবং parallax ইফেক্ট তৈরি করবে।- Materialize JS:
$('.parallax').parallax();কোডটি parallax ইফেক্টকে কার্যকর করতে ব্যবহৃত হয়।
কাস্টমাইজেশন:
- Parallax Image: আপনি যেকোনো ইমেজ ব্যবহার করতে পারেন যেটি পেজের ব্যাকগ্রাউন্ড হিসেবে দেখানো হবে। ইমেজের রেজোলিউশন উচ্চ হওয়া উচিত, যাতে স্ক্রিনের সাইজ অনুযায়ী এটি স্পষ্টভাবে দেখানো যায়।
- Multiple Parallax Sections: আপনি একাধিক parallax-container ব্যবহার করে পেজের বিভিন্ন সেকশনে পারালাক্স ইফেক্ট তৈরি করতে পারেন, যেমন উপরের উদাহরণে দুইটি ব্যাকগ্রাউন্ড ইমেজ দেওয়া হয়েছে।
Parallax Scrolling এর সুবিধা
- দৃষ্টি আকর্ষণকারী অভিজ্ঞতা: Parallax scrolling একটি আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করে, যা ব্যবহারকারীদের ওয়েবসাইটে বেশি সময় ধরে রাখতে সাহায্য করে।
- তিন-dimensional অনুভূতি: এটি ওয়েব পেজে ৩ডি অনুভূতি প্রদান করে, যেখানে ব্যাকগ্রাউন্ড এবং ফরওয়ার্ড কন্টেন্ট দুটি আলাদা গতিতে স্ক্রল হয়।
- ভিজ্যুয়াল আকর্ষণ: এটি ওয়েবসাইটের ডিজাইনের জন্য একটি আধুনিক এবং ভিজ্যুয়াল আকর্ষণ তৈরি করে, যা ব্যবহারকারীদের কাছে আরো বেশি আকর্ষণীয় হয়ে ওঠে।
উপসংহার
Parallax Scrolling একটি জনপ্রিয় ভিজ্যুয়াল ইফেক্ট যা ওয়েব ডিজাইন এবং ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে। Materialize CSS ফ্রেমওয়ার্কে Parallax Scrolling ব্যবহার করা সহজ এবং এটি একটি সুন্দর, সজীব এবং ৩ডি অনুভূতি প্রদান করে। এই ইফেক্টটি ওয়েবসাইটে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে, বিশেষত যখন আপনি একটি সুন্দর ব্যাকগ্রাউন্ড বা দৃষ্টিনন্দন ইফেক্ট যোগ করতে চান।
Read more
