Srallax.js, Stellar.js, এবং Rellax.js লাইব্রেরি ব্যবহার

প্যারালাক্স স্ক্রলিং একটি শক্তিশালী ডিজাইন টেকনিক, যা ওয়েবপেজে বিভিন্ন স্তরের স্ক্রলিং গতির পার্থক্য তৈরি করে এবং ব্যবহারকারীদের জন্য ডাইনামিক এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করে। JavaScript লাইব্রেরি ব্যবহার করে প্যারালাক্স স্ক্রলিং তৈরি করা সহজ হয় এবং ওয়েবসাইটের পারফরমেন্স উন্নত করা যায়।

এখানে তিনটি জনপ্রিয় লাইব্রেরি: Srallax.js, Stellar.js, এবং Rellax.js নিয়ে আলোচনা করা হবে এবং কিভাবে এগুলো ব্যবহার করে প্যারালাক্স স্ক্রলিং তৈরি করা যায় তা দেখানো হবে।

১. Srallax.js

Srallax.js একটি ছোট এবং সহজ লাইব্রেরি, যা প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করার জন্য ব্যবহৃত হয়। এটি যেকোনো স্ক্রলিং ওয়েবপেজে গভীরতা এবং ত্রিমাত্রিক অনুভূতি যোগ করতে সাহায্য করে।

Srallax.js ব্যবহার

1. লাইব্রেরি ইনস্টলেশন: Srallax.js ব্যবহার করতে, প্রথমে এটি ওয়েবপেজে যুক্ত করতে হবে:

<script src="https://cdn.jsdelivr.net/npm/srallax.js@1.0.0/srallax.min.js"></script>

2. HTML স্ট্রাকচার:

<div class="parallax" data-speed="0.5"></div>
<section class="content">
    <h1>Welcome to Srallax.js</h1>
    <p>This section will scroll with parallax effect using Srallax.js library.</p>
</section>

3. CSS কোড:

.parallax {
    height: 100vh;
    background-image: url('background-image.jpg');
    background-position: center;
    background-size: cover;
}

4. JavaScript:

var parallax = new Srallax();
parallax.init();

data-speed="0.5" এটিকে ব্যাকগ্রাউন্ডের গতির জন্য নিয়ন্ত্রণ করে, যেখানে 0.5 মানে ব্যাকগ্রাউন্ড ধীরে স্ক্রল হবে।

২. Stellar.js

Stellar.js একটি জনপ্রিয় JavaScript লাইব্রেরি যা প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে ব্যবহৃত হয়। এটি সাইটের বিভিন্ন স্তরের স্ক্রলিং গতির পার্থক্য তৈরি করতে সক্ষম।

Stellar.js ব্যবহার

1. লাইব্রেরি ইনস্টলেশন:

<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>

2. HTML স্ট্রাকচার:

<div class="parallax" data-stellar-background-ratio="0.5"></div>
<section class="content">
    <h1>Stellar.js Parallax</h1>
    <p>Scroll down to see the parallax effect powered by Stellar.js.</p>
</section>

3. CSS কোড:

.parallax {
    height: 100vh;
    background-image: url('background-image.jpg');
    background-position: center;
    background-size: cover;
}

4. JavaScript:

$(document).ready(function() {
    $(window).stellar();
});

data-stellar-background-ratio="0.5" ব্যাকগ্রাউন্ডের গতির হার নির্ধারণ করে, যেখানে 0.5 মানে ব্যাকগ্রাউন্ডটি ধীরে চলবে।

৩. Rellax.js

Rellax.js একটি হালকা এবং সহজ লাইব্রেরি যা প্যারালাক্স স্ক্রলিং তৈরি করতে ব্যবহৃত হয়। এটি যেকোনো ধরনের ওয়েবসাইটে দ্রুত এবং দক্ষভাবে প্যারালাক্স ইফেক্ট যোগ করতে সাহায্য করে।

Rellax.js ব্যবহার

1. লাইব্রেরি ইনস্টলেশন:

<script src="https://cdn.jsdelivr.net/npm/rellax@1.12.0/rellax.min.js"></script>

2. HTML স্ট্রাকচার:

<div class="rellax" data-rellax-speed="-3"></div>
<section class="content">
    <h1>Rellax.js Parallax</h1>
    <p>This is an example of parallax scrolling using Rellax.js.</p>
</section>

3. CSS কোড:

.rellax {
    height: 100vh;
    background-image: url('background-image.jpg');
    background-position: center;
    background-size: cover;
}

4. JavaScript:

var rellax = new Rellax('.rellax');

data-rellax-speed="-3" এ মান ব্যাকগ্রাউন্ডের গতিকে নিয়ন্ত্রণ করে। এখানে -3 মানে ব্যাকগ্রাউন্ড দ্রুত স্ক্রল হবে।

তুলনা

সারাংশ

• Srallax.js হল একটি ছোট এবং সহজ লাইব্রেরি যা দ্রুত প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে সাহায্য করে।
• Stellar.js আরও কাস্টমাইজেশন সুবিধা প্রদান করে এবং বড় প্রোজেক্টে উপযোগী।
• Rellax.js একটি হালকা এবং দ্রুত লাইব্রেরি যা কমপ্লেক্স ওয়েবসাইটেও দক্ষভাবে কাজ করে।

এই লাইব্রেরিগুলির মধ্যে যেকোনো একটি নির্বাচন করে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা যেতে পারে, যা আপনার ওয়েবসাইটে গভীরতা এবং ইন্টারঅ্যাকটিভ অনুভূতি আনবে।