Parallax effect একটি জনপ্রিয় ডিজাইন প্রক্রিয়া যা ব্যাকগ্রাউন্ড এবং কনটেন্টের গতির মধ্যে পার্থক্য তৈরি করে, যার ফলে স্ক্রল করার সময় একটি ত্রিমাত্রিক বা ডিপথ ইফেক্ট তৈরি হয়। Materialize CSS-এ parallax ব্যাকগ্রাউন্ড ইমেজ খুব সহজেই কনফিগার করা যায়, যা আপনার ওয়েবসাইটের ডিজাইনকে আরো আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে।
এখানে আমরা Materialize CSS-এ Parallax Background Image কনফিগার করার প্রক্রিয়া বিস্তারিতভাবে আলোচনা করব।
Parallax Background Image তৈরি করা
Materialize CSS-এ parallax ব্যাকগ্রাউন্ড ইমেজ তৈরি করতে বেশ কয়েকটি স্টেপ অনুসরণ করতে হয়। এই প্রক্রিয়া অনেক সহজ এবং দ্রুত, কারণ Materialize CSS ইতোমধ্যেই parallax effect প্রয়োগের জন্য প্রস্তুত কম্পোনেন্ট এবং ক্লাস প্রদান করে।
১. HTML স্ট্রাকচার তৈরি করা
প্রথমে আপনাকে একটি parallax-container তৈরি করতে হবে, যেখানে ব্যাকগ্রাউন্ড ইমেজ থাকবে এবং কনটেন্ট থাকবে। এটি একটি নির্দিষ্ট উচ্চতা ধারণ করবে এবং ব্যাকগ্রাউন্ড ইমেজ স্ক্রল করার সময় একটি সুন্দর parallax effect দেখাবে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Parallax 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>
<!-- Parallax Section -->
<div class="parallax-container">
<div class="parallax"><img src="https://www.w3schools.com/w3images/mountains.jpg" alt="Parallax Image"></div>
</div>
<!-- Content Section -->
<div class="section white">
<div class="row container">
<h2 class="header">Welcome to Parallax Example</h2>
<p class="grey-text text-darken-3 lighten-3">Here you can add any content you want, and it will scroll over the parallax background.</p>
</div>
</div>
<!-- Another Parallax Section -->
<div class="parallax-container">
<div class="parallax"><img src="https://www.w3schools.com/w3images/forest.jpg" alt="Another Parallax Image"></div>
</div>
<script>
// Initialize Parallax Effect
$(document).ready(function(){
$('.parallax').parallax();
});
</script>
</body>
</html>
এখানে:
- parallax-container: এটি parallax effect এর জন্য কনটেইনার হিসেবে কাজ করে।
- parallax: এটি ব্যাকগ্রাউন্ড ইমেজ ধারণ করে এবং parallax effect প্রদর্শন করে।
- img src: এখানে আপনি আপনার ইচ্ছামত ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করতে পারেন। উদাহরণস্বরূপ, এখানে একটি পর্বত এবং একটি বন ছবি ব্যবহার করা হয়েছে।
- section white: এই ক্লাসটি সাদা ব্যাকগ্রাউন্ডের জন্য ব্যবহৃত হয়েছে, যা parallax এর উপরে কনটেন্টের জন্য ব্যবহার করা হয়েছে।
২. Parallax ক্লাস ইনিশিয়ালাইজ করা
Materialize CSS এ parallax effect কার্যকর করার জন্য আপনাকে JavaScript দিয়ে এটি ইনিশিয়ালাইজ করতে হয়। এটি করতে $('.parallax').parallax(); ব্যবহার করা হয়।
$(document).ready(function(){
$('.parallax').parallax(); // Initialize Parallax Effect
});
এটি parallax effect শুরু করার জন্য প্রয়োজনীয় স্ক্রিপ্ট।
৩. Parallax Background Image কাস্টমাইজেশন
Materialize CSS-এ parallax ব্যাকগ্রাউন্ড ইমেজের জন্য আপনি বিভিন্ন কাস্টমাইজেশন করতে পারেন, যেমন:
- বিভিন্ন ধরনের ব্যাকগ্রাউন্ড ইমেজ ব্যবহার: আপনি আপনার ইচ্ছামতো উচ্চমানের এবং আকর্ষণীয় ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করতে পারেন।
- কনটেন্ট স্টাইলিং: আপনি parallax এর উপরে যে কনটেন্ট থাকবে সেটি স্টাইল করতে পারেন, যেমন text-align, padding, font-size ইত্যাদি।
.parallax-container {
height: 500px; /* Height of the parallax container */
}
.parallax img {
opacity: 0.6; /* Slight opacity on the background image */
}
এখানে:
- height: 500px: parallax-container এর উচ্চতা নির্ধারণ করা হয়েছে।
- opacity: 0.6: ব্যাকগ্রাউন্ড ইমেজের স্বচ্ছতা নিয়ন্ত্রণ করা হয়েছে যাতে কনটেন্ট আরও স্পষ্টভাবে দৃশ্যমান থাকে।
Parallax Effect কিভাবে কাজ করে?
Parallax effect একটি ডিজাইন প্রযুক্তি যা ওয়েবসাইটের স্ক্রোলিং এর সময় ব্যাকগ্রাউন্ড এবং কনটেন্টের গতির মধ্যে পার্থক্য সৃষ্টি করে। Materialize CSS-এ এটি খুবই সহজভাবে বাস্তবায়ন করা যায়, যেখানে ব্যাকগ্রাউন্ড ইমেজ স্ট্যাটিক অবস্থান থেকে স্ক্রল করা কনটেন্টের তুলনায় ধীরে ধীরে চলে, ফলে একটি গভীরতা বা ত্রিমাত্রিক ইফেক্ট তৈরি হয়।
Materialize CSS-এর parallax ক্লাসটি image এবং scrolling content এর মধ্যে গতি পার্থক্য তৈরি করে এবং এটি স্ক্রল করার সময় স্বয়ংক্রিয়ভাবে ব্যাকগ্রাউন্ড ইমেজকে মুভ করে।
উপসংহার
Parallax background image একটি অত্যন্ত জনপ্রিয় এবং আকর্ষণীয় ওয়েব ডিজাইন ইফেক্ট, যা আপনার ওয়েবসাইটকে আরও আধুনিক ও ইন্টারঅ্যাকটিভ করে তোলে। Materialize CSS-এ এটি তৈরি করা খুব সহজ এবং সোজা, কারণ এটি প্রয়োজনীয় ক্লাস এবং JavaScript ফাংশনালিটি সরবরাহ করে। আপনি parallax-container এবং parallax ক্লাস ব্যবহার করে সহজে ব্যাকগ্রাউন্ড ইমেজের উপর parallax effect যোগ করতে পারেন এবং সেটি কাস্টমাইজ করতে পারেন।
Read more
