Srallax.js একটি জনপ্রিয় JavaScript লাইব্রেরি, যা প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে ব্যবহৃত হয়। এটি সহজে ওয়েবসাইটের ব্যাকগ্রাউন্ড বা কন্টেন্টের মধ্যে গতির পার্থক্য তৈরি করে, যা একটি গভীরতা এবং ডাইনামিক ইফেক্ট তৈরি করে। Srallax.js লাইব্রেরি ইন্টিগ্রেট করে আপনি সহজেই প্যারালাক্স স্ক্রলিং প্রজেক্টে উন্নত ইফেক্ট এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা যুক্ত করতে পারবেন।
Srallax.js লাইব্রেরি ইন্টিগ্রেশন
Srallax.js লাইব্রেরি ইন্টিগ্রেট করার জন্য প্রথমে লাইব্রেরি ডাউনলোড করতে হবে অথবা CDN থেকে যুক্ত করতে হবে।
১. Srallax.js লাইব্রেরি ডাউনলোড এবং ইন্টিগ্রেশন
Srallax.js লাইব্রেরি ইন্টিগ্রেট করতে আপনি CDN ব্যবহার করতে পারেন অথবা সরাসরি ফাইলটি ডাউনলোড করে আপনার প্রজেক্টে যুক্ত করতে পারেন।
CDN ব্যবহার করে:
<head>
<script src="https://cdn.jsdelivr.net/npm/srallax.js"></script>
</head>
এছাড়া আপনি লাইব্রেরিটি ডাউনলোড করে আপনার প্রজেক্ট ফোল্ডারে রাখতে পারেন এবং তারপর <script> ট্যাগের মাধ্যমে এটি লিঙ্ক করতে পারেন:
<head>
<script src="path/to/srallax.min.js"></script>
</head>
২. HTML ফাইলের প্রস্তুতি
Srallax.js লাইব্রেরি কাজ করার জন্য আপনাকে HTML ফাইলে এমন কিছু এলিমেন্ট তৈরি করতে হবে, যার উপর প্যারালাক্স ইফেক্ট প্রয়োগ করা হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Scrolling with Srallax.js</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/srallax.js"></script>
</head>
<body>
<div class="parallax-container">
<div class="parallax-background"></div>
<div class="content">
<h1>Welcome to Parallax Scrolling</h1>
<p>This is a simple example of Srallax.js in action!</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
৩. CSS ফাইল তৈরি
/* styles.css */
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.parallax-container {
position: relative;
height: 100vh; /* Full height */
overflow: hidden;
}
.parallax-background {
background-image: url('your-image.jpg');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Send background to back */
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
font-size: 2em;
}
Srallax.js ব্যবহার
Srallax.js লাইব্রেরি ইন্টিগ্রেট করার পর, JavaScript কোডের মাধ্যমে এটি সক্রিয় করতে হবে।
৪. JavaScript ফাইল তৈরি
// script.js
document.addEventListener('DOMContentLoaded', function() {
const srallax = new Srallax({
element: '.parallax-background', // Target the element to apply parallax
speed: 0.5, // Control the speed of scrolling effect
});
// Initialize the parallax effect
srallax.init();
});
Srallax.js এর কাস্টমাইজেশন
Srallax.js লাইব্রেরিতে আপনি কিছু কাস্টমাইজেশন করতে পারেন, যেমন:
- speed: প্যারালাক্স স্ক্রলিংয়ের গতি নিয়ন্ত্রণ করে। এটি ০ থেকে ১ পর্যন্ত মান নিতে পারে, যেখানে ১ বেশি গতি এবং ০ ধীর গতি নির্দেশ করে।
- direction: প্যারালাক্স স্ক্রলিংয়ের দিক নির্ধারণ করতে পারে। এটি 'vertical' অথবা 'horizontal' হতে পারে।
Srallax.js এর অতিরিক্ত বৈশিষ্ট্য
- Responsive: Srallax.js ওয়েবসাইটের রেসপন্সিভ ডিজাইনের সঙ্গে সহজেই কাজ করতে পারে। এটি বিভিন্ন স্ক্রীন সাইজের জন্য উপযুক্ত।
- Multiple Elements: একাধিক এলিমেন্টের উপর প্যারালাক্স ইফেক্ট প্রয়োগ করা যায়। যেমন, একাধিক ব্যাকগ্রাউন্ড ইমেজ বা কন্টেন্ট ব্লকগুলোর উপর।
- Event Triggers: কিছু ইভেন্ট ট্রিগার সেট করে বিশেষ ফিচার যোগ করা যেতে পারে, যেমন স্ক্রল করা অবস্থায় বিভিন্ন অ্যানিমেশন চালানো।
সারাংশ
Srallax.js লাইব্রেরি প্যারালাক্স স্ক্রলিং ইফেক্টকে সহজ করে তোলে এবং এটি ওয়েবসাইটে ডাইনামিক এবং আকর্ষণীয় অভিজ্ঞতা সৃষ্টি করে। লাইব্রেরিটি সহজেই ইন্টিগ্রেট করা যায় এবং JavaScript ও CSS এর মাধ্যমে কাস্টমাইজ করা সম্ভব। Srallax.js ব্যবহার করে আপনি আপনার ওয়েবসাইটে একাধিক কাস্টম প্যারালাক্স ইফেক্ট যুক্ত করতে পারবেন, যা আপনার সাইটের ভিজ্যুয়াল ইফেক্ট এবং ইউজার এক্সপিরিয়েন্সকে আরও উন্নত করবে।
Read more
