Web Development Custom Srallax Scrolling তৈরি করা গাইড ও নোট

247

প্যারালাক্স স্ক্রলিং (Srallax Scrolling) একটি শক্তিশালী ওয়েব ডিজাইন টেকনিক যা স্ক্রলিংয়ের মাধ্যমে ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির মধ্যে পার্থক্য তৈরি করে একটি গভীরতা এবং ত্রিমাত্রিক (3D) ইফেক্ট তৈরি করে। এই টিউটোরিয়ালে, আমরা একটি Custom Parallax Scrolling তৈরি করার প্রক্রিয়া জানব যা HTML, CSS এবং JavaScript ব্যবহার করে তৈরি করা হবে। এটি আপনাকে আপনার পছন্দ অনুযায়ী স্ক্রলিং ইফেক্ট কাস্টমাইজ করতে সাহায্য করবে।

Step 1: HTML Structure

প্রথমে একটি সাধারণ HTML স্ট্রাকচার তৈরি করুন, যেখানে আপনার প্যারালাক্স স্ক্রলিং ইফেক্টের জন্য একাধিক লেয়ার থাকবে।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Parallax Scrolling</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Parallax Sections -->
    <div class="parallax-layer" id="layer1">
        <h1>Parallax Effect Layer 1</h1>
    </div>
    
    <div class="content">
        <p>This is some content between the parallax layers.</p>
    </div>
    
    <div class="parallax-layer" id="layer2">
        <h1>Parallax Effect Layer 2</h1>
    </div>
    
    <div class="content">
        <p>More content goes here.</p>
    </div>
    
    <div class="parallax-layer" id="layer3">
        <h1>Parallax Effect Layer 3</h1>
    </div>

    <script src="script.js"></script>
</body>
</html>

এখানে, আমরা তিনটি parallax-layer তৈরি করেছি, এবং এর মধ্যে কিছু কন্টেন্ট রেখেছি। প্রতিটি লেয়ারে আলাদা প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি হবে।

Step 2: CSS for Styling

এখন, CSS ব্যবহার করে আমাদের প্যারালাক্স লেয়ারের স্টাইল তৈরি করবো। এতে ব্যাকগ্রাউন্ড ইমেজ এবং স্ক্রলিং স্টাইলিং থাকবে।

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

/* Parallax Layer Styling */
.parallax-layer {
    position: relative;
    height: 100vh; /* Full viewport height */
    background-size: cover;
    background-position: center;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

#layer1 {
    background-image: url('layer1.jpg');
}

#layer2 {
    background-image: url('layer2.jpg');
}

#layer3 {
    background-image: url('layer3.jpg');
}

/* Content Section Styling */
.content {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    text-align: center;
}

.content p {
    font-size: 1.5rem;
}

এখানে, আমরা তিনটি প্যারালাক্স লেয়ারের জন্য ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করেছি। প্রত্যেকটি লেয়ারের জন্য ব্যাকগ্রাউন্ড ইমেজ আলাদা। এছাড়া, কন্টেন্টের জন্য স্টাইলিং দেওয়া হয়েছে যাতে প্যারালাক্স লেয়ারের মধ্যে সেটা স্পষ্টভাবে দেখা যায়।

Step 3: JavaScript for Custom Parallax Effect

এখন আমরা JavaScript ব্যবহার করে আমাদের কাস্টম প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করব। এটি স্ক্রল ইভেন্ট ট্র্যাক করবে এবং প্রতিটি লেয়ারের গতির পার্থক্য তৈরি করবে।

// JavaScript for Custom Parallax Effect
window.addEventListener('scroll', function() {
    var scrollPosition = window.scrollY;

    // Custom Parallax Effect for each layer
    var layer1 = document.getElementById('layer1');
    var layer2 = document.getElementById('layer2');
    var layer3 = document.getElementById('layer3');
    
    layer1.style.transform = 'translateY(' + scrollPosition * 0.5 + 'px)';
    layer2.style.transform = 'translateY(' + scrollPosition * 0.3 + 'px)';
    layer3.style.transform = 'translateY(' + scrollPosition * 0.1 + 'px)';
});

এখানে, আমরা স্ক্রল পজিশন ট্র্যাক করেছি এবং প্রতিটি লেয়ারের জন্য আলাদা গতির পার্থক্য তৈরি করেছি:

layer1: ব্যাকগ্রাউন্ডের জন্য স্লো স্ক্রলিং (0.5 গুণ স্ক্রল পজিশন)।
layer2: মিডিয়াম স্ক্রলিং (0.3 গুণ স্ক্রল পজিশন)।
layer3: দ্রুত স্ক্রলিং (0.1 গুণ স্ক্রল পজিশন)।

এভাবে, আপনি লেয়ারগুলির গতির পার্থক্য তৈরি করে একটি ডাইনামিক প্যারালাক্স ইফেক্ট তৈরি করতে পারবেন।

Step 4: Testing and Debugging

Testing: সাইটের স্ক্রলিং ইফেক্ট চেক করুন এবং নিশ্চিত করুন যে প্যারালাক্স ইফেক্ট প্রত্যেক লেয়ারের জন্য সঠিকভাবে কাজ করছে।
Debugging: যদি স্ক্রলিং ইফেক্ট সঠিকভাবে কাজ না করে, তাহলে ব্রাউজারের DevTools (Developer Tools) ব্যবহার করে JavaScript এবং CSS কোড পরীক্ষা করুন।

আপনি console.log() ব্যবহার করে স্ক্রল পজিশন দেখতে পারেন:

window.addEventListener('scroll', function() {
    var scrollPosition = window.scrollY;
    console.log('Scroll Position: ' + scrollPosition);
    
    // Apply parallax effect as before...
});

এভাবে, স্ক্রল পজিশন এবং অন্যান্য প্যারামিটার পরীক্ষা করে কোড ডিবাগ করতে পারেন।

সারাংশ

এখন আপনি জানেন কীভাবে Custom Parallax Scrolling তৈরি করতে হয়:

HTML দিয়ে প্যারালাক্স লেয়ারের স্ট্রাকচার তৈরি করা।
CSS দিয়ে ব্যাকগ্রাউন্ড ইমেজ এবং স্টাইলিং করা।
JavaScript দিয়ে স্ক্রল পজিশন ট্র্যাক করে কাস্টম প্যারালাক্স ইফেক্ট তৈরি করা।
স্ক্রল ইভেন্টের জন্য পারফরম্যান্স এবং স্টাইলিং নিশ্চিত করতে টেস্টিং এবং ডিবাগিং করা।

এই পদ্ধতি অনুসরণ করে আপনি আপনার সাইটের জন্য ইন্টারঅ্যাকটিভ এবং কাস্টম প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে পারবেন, যা ইউজারদের জন্য একটি আকর্ষণীয় অভিজ্ঞতা সৃষ্টি করবে।

Content added By

Rezwan Siddiki Tamim

কাস্টম Srallax Scrolling এর জন্য CSS এবং JavaScript ব্যবহার

263

প্যারালাক্স স্ক্রলিং (Srallax Scrolling) একটি অত্যন্ত জনপ্রিয় ওয়েব ডিজাইন টেকনিক, যা স্ক্রলিংয়ের মাধ্যমে ব্যাকগ্রাউন্ড এবং কন্টেন্টের মধ্যে গতির পার্থক্য তৈরি করে। আপনি CSS এবং JavaScript ব্যবহার করে কাস্টম প্যারালাক্স স্ক্রলিং তৈরি করতে পারেন, যেখানে আপনি বিভিন্ন লেয়ারের গতির পার্থক্য তৈরি করতে পারবেন এবং স্ক্রলিংয়ের অভিজ্ঞতাকে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করতে পারবেন।

এই টিউটোরিয়ালে, আমরা দেখব কিভাবে CSS এবং JavaScript ব্যবহার করে একটি কাস্টম প্যারালাক্স স্ক্রলিং তৈরি করা যায়।

কাস্টম প্যারালাক্স স্ক্রলিং তৈরি করার জন্য প্রয়োজনীয় উপাদান

HTML স্ট্রাকচার: ওয়েবপেজের বিভিন্ন অংশ তৈরি করা হবে, যেমন প্যারালাক্স লেয়ার এবং কন্টেন্ট সেকশন।
CSS স্টাইলিং: প্যারালাক্স লেয়ার এবং কন্টেন্ট সেকশন স্টাইল করা হবে।
JavaScript: স্ক্রল ইভেন্ট ট্র্যাক করতে এবং কাস্টম স্ক্রলিং প্রভাব তৈরি করতে JavaScript ব্যবহার করা হবে।

১. HTML স্ট্রাকচার

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Parallax Scrolling</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Parallax Section -->
    <div class="parallax-layer" id="parallax-layer-1"></div>
    
    <!-- Content Section -->
    <div class="content">
        <h1>Welcome to My Custom Parallax Website</h1>
        <p>This is an example of custom parallax scrolling using CSS and JavaScript.</p>
    </div>

    <!-- Another Parallax Layer -->
    <div class="parallax-layer" id="parallax-layer-2"></div>

    <script src="script.js"></script>
</body>
</html>

২. CSS স্টাইলিং

এখন, প্যারালাক্স লেয়ার এবং কন্টেন্ট সেকশনগুলোর জন্য কিছু বেসিক CSS স্টাইলিং করতে হবে। এখানে, আমরা ব্যাকগ্রাউন্ড ইমেজ যোগ করব এবং স্ক্রলিংয়ের সময় লেয়ারগুলির গতির পার্থক্য তৈরি করব।

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    height: 2000px; /* Set a tall height for scrolling */
}

/* Parallax Layer Styling */
.parallax-layer {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1; /* Ensure layers stay behind content */
}

/* First Parallax Layer (Background) */
#parallax-layer-1 {
    background-image: url('https://via.placeholder.com/1920x1080?text=Layer+1');
}

/* Second Parallax Layer */
#parallax-layer-2 {
    background-image: url('https://via.placeholder.com/1920x1080?text=Layer+2');
}

/* Content Section */
.content {
    position: relative;
    text-align: center;
    padding: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    z-index: 1;
}

.content h1 {
    font-size: 3rem;
}

.content p {
    font-size: 1.5rem;
}

৩. JavaScript ব্যবহার করা

এখন, আমরা JavaScript ব্যবহার করে প্যারালাক্স স্ক্রলিং প্রভাব তৈরি করব। আমরা স্ক্রল ইভেন্ট ট্র্যাক করে প্রতিটি লেয়ারের গতির পার্থক্য তৈরি করব।

JavaScript কোড:

window.addEventListener('scroll', function() {
    var scrollPosition = window.scrollY; // Get the current scroll position

    // Apply parallax effect to the first layer (move slower)
    var layer1 = document.getElementById('parallax-layer-1');
    layer1.style.transform = 'translateY(' + scrollPosition * 0.3 + 'px)'; // Slow movement

    // Apply parallax effect to the second layer (move faster)
    var layer2 = document.getElementById('parallax-layer-2');
    layer2.style.transform = 'translateY(' + scrollPosition * 0.6 + 'px)'; // Faster movement
});

কোড ব্যাখ্যা:

scrollY: scrollY ব্যবহার করে স্ক্রল পজিশন ট্র্যাক করা হচ্ছে, যাতে স্ক্রলিংয়ের সময় প্যারালাক্স লেয়ারগুলির গতির পার্থক্য তৈরি করা যায়।
translateY(): translateY() ব্যবহার করে, আমরা প্যারালাক্স লেয়ারগুলির অবস্থান পরিবর্তন করছি। এখানে, Layer 1 ধীরে (0.3 গুণ স্ক্রল পজিশন) এবং Layer 2 দ্রুত (0.6 গুণ স্ক্রল পজিশন) স্ক্রল হবে।
transform: transform প্রপার্টি দিয়ে লেয়ারগুলির স্থান পরিবর্তন করা হচ্ছে, যাতে পারফরম্যান্সে কোন প্রভাব না পড়ে। এটি GPU-accelerated রেন্ডারিং নিশ্চিত করে।

৪. Responsive Design নিশ্চিত করা

এখন, আমরা মিডিয়া কুয়েরি ব্যবহার করে নিশ্চিত করব যে প্যারালাক্স স্ক্রলিং মোবাইল এবং ট্যাবলেট ডিভাইসে সঠিকভাবে কাজ করছে।

/* Disable Parallax on Mobile Devices */
@media only screen and (max-width: 768px) {
    #parallax-layer-1, #parallax-layer-2 {
        background-attachment: scroll; /* Disable parallax effect on small screens */
    }
}

এই মিডিয়া কুয়েরি মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিং বন্ধ করবে, যাতে মোবাইল ডিভাইসে পারফরম্যান্স সমস্যা না হয় এবং স্ক্রলিং সঠিকভাবে কাজ করে।

সারাংশ

কাস্টম প্যারালাক্স স্ক্রলিং তৈরি করতে CSS এবং JavaScript ব্যবহার করা যেতে পারে। আমরা এখানে দুটি লেয়ার তৈরি করেছি, যেখানে একটির গতি কম এবং আরেকটির গতি বেশি, স্ক্রল পজিশনের উপর ভিত্তি করে। JavaScript ব্যবহার করে স্ক্রল ইভেন্ট ট্র্যাক করার মাধ্যমে আমরা প্যারালাক্স প্রভাব সৃষ্টি করেছি। এছাড়া, media queries ব্যবহার করে মোবাইল ডিভাইসে স্ক্রলিং বন্ধ করার ব্যবস্থা রাখা হয়েছে, যাতে পারফরম্যান্স উন্নত হয়।

এভাবে, আপনি CSS এবং JavaScript এর সাহায্যে কাস্টম প্যারালাক্স স্ক্রলিং তৈরি করতে পারেন এবং এটি বিভিন্ন ডিভাইসে সমানভাবে সঠিকভাবে কাজ করবে।

Content added By

Rezwan Siddiki Tamim

Different Speed Layers এবং Elements যোগ করা

191

প্যারালাক্স স্ক্রলিং একটি অত্যন্ত জনপ্রিয় এবং চিত্তাকর্ষক ওয়েব ডিজাইন টেকনিক, যেখানে স্ক্রল করার সময় ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির মধ্যে পার্থক্য তৈরি করা হয়। এর মাধ্যমে ওয়েবপেজে একটি ত্রিমাত্রিক অনুভূতি সৃষ্টি করা হয়, যেখানে ব্যাকগ্রাউন্ড ধীরে স্ক্রল হয় এবং ফরওয়ার্ড কন্টেন্ট দ্রুত স্ক্রল হয়।

Different Speed Layers এবং Elements যোগ করে প্যারালাক্স স্ক্রলিং আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করা যায়। এখানে দেখানো হবে কিভাবে বিভিন্ন গতির স্তর (layers) এবং উপাদান যোগ করা যায়।

প্যারালাক্স স্ক্রলিংয়ে Different Speed Layers এবং Elements যোগ করার জন্য পদক্ষেপ

১. HTML স্ট্রাকচার তৈরি করা

প্রথমে, একটি বেসিক HTML স্ট্রাকচার তৈরি করতে হবে যেখানে একাধিক লেয়ার থাকবে, এবং প্রতিটি লেয়ারে বিভিন্ন গতির স্ক্রলিং হবে।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Speed Layers Parallax</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="parallax-layer layer1"></div>
    <div class="content">
        <h1>Parallax with Different Speed Layers</h1>
        <p>This is an example of parallax scrolling with layers having different speeds.</p>
    </div>
    <div class="parallax-layer layer2"></div>
    <div class="parallax-layer layer3"></div>

    <script src="script.js"></script>
</body>
</html>

২. CSS স্টাইলিং

এখন, প্যারালাক্স লেয়ারের জন্য CSS স্টাইলিং করতে হবে। প্রতিটি লেয়ারের স্ক্রলিং স্পিড আলাদা হবে, যা JavaScript এর মাধ্যমে নিয়ন্ত্রণ করা হবে।

/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and overall layout */
body {
    font-family: Arial, sans-serif;
    height: 3000px; /* Allow for scrolling */
}

/* Content section */
.content {
    position: relative;
    padding: 100px;
    background-color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.content h1 {
    font-size: 3rem;
}

.content p {
    font-size: 1.5rem;
}

/* Parallax layers with different speeds */
.parallax-layer {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.layer1 {
    background-image: url('layer1.jpg'); /* Replace with your background image */
    z-index: -3;
}

.layer2 {
    background-image: url('layer2.jpg'); /* Replace with your background image */
    z-index: -2;
}

.layer3 {
    background-image: url('layer3.jpg'); /* Replace with your background image */
    z-index: -1;
}

৩. JavaScript দিয়ে Speed Control

JavaScript এর মাধ্যমে প্রতিটি লেয়ারের স্ক্রলিং স্পিড নিয়ন্ত্রণ করা হবে। এই ক্ষেত্রে, প্রতিটি লেয়ারের জন্য ভিন্ন ভিন্ন স্কেল এবং ট্রান্সফর্ম ভ্যালু দেওয়া হবে, যাতে বিভিন্ন গতির স্ক্রলিং এফেক্ট তৈরি হয়।

window.addEventListener('scroll', function() {
    var scrollPosition = window.scrollY; // Get current scroll position

    // Adjust the speed of each layer using translateY
    var layer1 = document.querySelector('.layer1');
    var layer2 = document.querySelector('.layer2');
    var layer3 = document.querySelector('.layer3');

    // Different speeds for each layer
    layer1.style.transform = 'translateY(' + (scrollPosition * 0.2) + 'px)';
    layer2.style.transform = 'translateY(' + (scrollPosition * 0.4) + 'px)';
    layer3.style.transform = 'translateY(' + (scrollPosition * 0.8) + 'px)';
});

৪. JavaScript Explanation

scrollY: স্ক্রল পজিশন ট্র্যাক করার জন্য window.scrollY ব্যবহার করা হয়েছে।
transform: translateY(): প্রতিটি লেয়ারের translateY প্রপার্টি ব্যবহার করা হয়েছে স্ক্রলিংয়ের জন্য, যাতে ব্যাকগ্রাউন্ড এবং কন্টেন্ট আলাদা গতিতে স্ক্রল হয়। এখানে:
- layer1 (ব্যাকগ্রাউন্ড) খুব ধীরে স্ক্রল হবে (0.2 গুণ)
- layer2 মাঝারি গতিতে স্ক্রল হবে (0.4 গুণ)
- layer3 দ্রুত স্ক্রল হবে (0.8 গুণ)

৫. ফলস্বরূপ

যখন ব্যবহারকারী স্ক্রল করবে, তখন layer1 (ব্যাকগ্রাউন্ড) ধীরে স্ক্রল হবে, layer2 মাঝারি গতিতে এবং layer3 দ্রুত স্ক্রল হবে।
এর মাধ্যমে একটি ত্রিমাত্রিক অনুভূতি সৃষ্টি হবে যেখানে ব্যাকগ্রাউন্ড এবং কন্টেন্ট বিভিন্ন গতিতে স্ক্রল হয়ে একটি ডাইনামিক ইফেক্ট তৈরি করবে।

৬. Mobile Devices এর জন্য Optimization

মোবাইল ডিভাইসে অতিরিক্ত স্ক্রলিং বা ভারী গ্রাফিক্স পারফরম্যান্স ইস্যু সৃষ্টি করতে পারে। তাই মোবাইল ডিভাইসের জন্য প্যারালাক্স স্ক্রলিং কিছুটা নিষ্ক্রিয় করা যেতে পারে।

@media only screen and (max-width: 600px) {
    .parallax-layer {
        background-attachment: scroll; /* Disable parallax effect on mobile */
    }
}

এভাবে, মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিংটি সাধারণ ব্যাকগ্রাউন্ড স্ক্রলিংয়ে রূপান্তরিত হবে, যাতে পারফরম্যান্স আরও উন্নত হয়।

সারাংশ

Different Speed Layers এবং Elements যোগ করা প্যারালাক্স স্ক্রলিংকে আরও ডাইনামিক এবং আকর্ষণীয় করে তোলে। JavaScript এবং CSS এর মাধ্যমে আমরা বিভিন্ন গতির লেয়ার তৈরি করতে পারি, যেখানে ব্যাকগ্রাউন্ড ধীরে স্ক্রল হবে এবং কন্টেন্ট দ্রুত স্ক্রল হবে। এছাড়া, মোবাইল ডিভাইসে পারফরম্যান্স নিশ্চিত করতে প্যারালাক্স স্ক্রলিংকে অপটিমাইজ করা উচিত।

এই টেকনিকটি ওয়েব ডিজাইনকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করতে সাহায্য করে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করবে।

Content added By

Rezwan Siddiki Tamim

Complex Srallax Effects তৈরি এবং কাস্টমাইজ করা

279

প্যারালাক্স স্ক্রলিং (Srallax Scrolling) একটি অত্যন্ত শক্তিশালী ওয়েব ডিজাইন টেকনিক যা ব্যাকগ্রাউন্ড এবং কন্টেন্টের মধ্যে গতির পার্থক্য তৈরি করে। এটি ওয়েবপেজে ডাইনামিক এবং 3D ইফেক্ট তৈরি করতে ব্যবহৃত হয়। তবে, কখনও কখনও একটি সাধারণ প্যারালাক্স স্ক্রলিং প্রভাবের চাইতে বেশি জটিল এবং কাস্টমাইজড প্যারালাক্স ইফেক্ট তৈরি করতে হয়, যা আপনার ডিজাইনকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে।

এই টিউটোরিয়ালে, আমরা দেখবো কিভাবে Complex Parallax Effects তৈরি এবং কাস্টমাইজ করা যায়।

১. Multiple Layers Parallax Effects

একাধিক স্তরের প্যারালাক্স ইফেক্ট (Multiple Layers Parallax) তৈরি করা অনেক বেশি জটিল এবং আকর্ষণীয় হতে পারে। এখানে, বিভিন্ন লেয়ারের স্ক্রলিং গতির মধ্যে পার্থক্য সৃষ্টি করা হয়, যেমন ব্যাকগ্রাউন্ড ধীরে, মিডগ্রাউন্ড মাঝারি গতিতে এবং ফরওয়ার্ড কন্টেন্ট দ্রুত স্ক্রল হয়।

কৌশল:

CSS3 Transforms এবং JavaScript ব্যবহার করে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করুন, যাতে একাধিক লেয়ার আলাদা গতিতে স্ক্রল করে।

উদাহরণ:

<div class="parallax-container">
    <div class="parallax-background"></div>
    <div class="parallax-foreground">
        <h1>Dynamic Parallax Effect</h1>
        <p>This is a complex parallax effect with multiple layers.</p>
    </div>
</div>

.parallax-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.parallax-background, .parallax-foreground {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.parallax-background {
    background-image: url('background.jpg');
    background-position: center;
    background-size: cover;
    transform: translateZ(-1px) scale(2); /* Slower speed */
}

.parallax-foreground {
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

h1, p {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// JavaScript for Scroll Event
window.addEventListener('scroll', function() {
    var scrollPosition = window.scrollY;
    document.querySelector('.parallax-background').style.transform = 'translateY(' + scrollPosition * 0.5 + 'px)';
    document.querySelector('.parallax-foreground').style.transform = 'translateY(' + scrollPosition * 1.5 + 'px)';
});

এখানে, .parallax-background এবং .parallax-foreground দুটি আলাদা গতিতে স্ক্রল করছে। প্রথমটি ধীরে এবং দ্বিতীয়টি দ্রুত স্ক্রল হচ্ছে, যা একটি জটিল প্যারালাক্স ইফেক্ট তৈরি করছে।

২. Speed and Direction Customization

আপনি যদি প্যারালাক্স স্ক্রলিংয়ের গতির সাথে আরও কাস্টমাইজেশন করতে চান, তাহলে প্রতিটি লেয়ারের জন্য আলাদা স্পিড এবং দিক নির্ধারণ করতে পারবেন। বিভিন্ন লেয়ার আলাদা আলাদা গতিতে স্ক্রল করতে পারে, অথবা একাধিক লেয়ারের মধ্যে reverse parallax effect তৈরি করতে পারেন।

কৌশল:

Speed Control: বিভিন্ন লেয়ারের জন্য আলাদা স্পিড নির্ধারণ করা।
Direction Control: স্ক্রলিংয়ের দিক নিয়ন্ত্রণ করা, যেমন reverse direction।

উদাহরণ:

window.addEventListener('scroll', function() {
    var scrollPosition = window.scrollY;
    var backgroundSpeed = 0.3;
    var foregroundSpeed = 1.5;

    // Apply reverse direction for background
    document.querySelector('.parallax-background').style.transform = 'translateY(' + scrollPosition * backgroundSpeed + 'px)';
    document.querySelector('.parallax-foreground').style.transform = 'translateY(' + -scrollPosition * foregroundSpeed + 'px)';
});

এখানে, ব্যাকগ্রাউন্ডটি সাধারণ গতিতে স্ক্রল করবে, তবে ফরওয়ার্ড কন্টেন্টটি রিভার্স গতি দিয়ে স্ক্রল হবে, যা একটি নতুন ধরনের reverse parallax effect তৈরি করবে।

৩. 3D Parallax Effect

একটি 3D Parallax ইফেক্ট তৈরি করে আপনি আরও জটিল এবং গভীরতা পূর্ণ প্রভাব তৈরি করতে পারেন, যেখানে স্ক্রলিংয়ের সময় ব্যাকগ্রাউন্ড এবং কন্টেন্ট আরো বাস্তবসম্মতভাবে আলাদা গতিতে চলে।

কৌশল:

3D Transforms: perspective এবং translate3d ব্যবহার করে আরও গভীরতা এবং বাস্তবসম্মত প্রভাব তৈরি করুন।

উদাহরণ:

.parallax-container {
    position: relative;
    height: 100vh;
    perspective: 1000px; /* Add perspective for 3D effect */
}

.parallax-background {
    background-image: url('background.jpg');
    background-position: center;
    background-size: cover;
    transform: translate3d(0, 0, -200px); /* Apply 3D translation */
}

.parallax-foreground {
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1;
    transform: translate3d(0, 0, 100px); /* Apply 3D translation in the opposite direction */
}

window.addEventListener('scroll', function() {
    var scrollPosition = window.scrollY;
    document.querySelector('.parallax-background').style.transform = 'translate3d(0, ' + scrollPosition * 0.3 + 'px, -200px)';
    document.querySelector('.parallax-foreground').style.transform = 'translate3d(0, ' + scrollPosition * 1.5 + 'px, 100px)';
});

এখানে, translate3d() এবং perspective ব্যবহার করে একটি 3D Parallax Effect তৈরি করা হয়েছে, যা ব্যবহারকারীদের স্ক্রলিংয়ের সময় গভীরতার অনুভূতি প্রদান করবে।

৪. Interactive Parallax with JavaScript Libraries

আপনি যদি আরও জটিল এবং ইন্টারঅ্যাকটিভ প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে চান, তবে কিছু JavaScript লাইব্রেরি ব্যবহার করা যেতে পারে। যেমন Rellax.js, ScrollMagic বা Parallax.js এগুলি বেশ কাস্টমাইজেবল এবং ইন্টারঅ্যাকটিভ প্যারালাক্স ইফেক্ট তৈরি করতে সহায়তা করে।

উদাহরণ: Rellax.js লাইব্রেরি ব্যবহার

<script src="https://cdn.jsdelivr.net/npm/rellax"></script>

<div class="rellax" data-rellax-speed="-7">
    <img src="background.jpg" alt="Parallax Image">
</div>

<script>
    var rellax = new Rellax('.rellax');
</script>

এখানে, Rellax.js লাইব্রেরি ব্যবহার করে সহজেই প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা হয়েছে। data-rellax-speed প্রপার্টি দিয়ে আপনি প্রতিটি এলিমেন্টের স্ক্রলিং স্পিড কাস্টমাইজ করতে পারেন।

৫. Animation and Scroll Effects Integration

প্যারালাক্স স্ক্রলিংয়ের সাথে অ্যানিমেশন ইফেক্ট যোগ করতে পারেন যাতে স্ক্রলিংয়ের সময় অ্যানিমেশন হয়। এটি আরো আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করে।

কৌশল:

CSS Animations এবং JavaScript এর মাধ্যমে স্ক্রলিংয়ের সাথে অ্যানিমেশন প্রয়োগ করুন।

উদাহরণ:

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.parallax-background {
    animation: fadeIn 2s ease-in-out;
}

এখানে, fadeIn অ্যানিমেশন ব্যবহার করে প্যারালাক্স স্ক্রলিংয়ের সাথে একযোগে কন্টেন্ট ধীরে ধীরে প্রদর্শিত হবে।

সারাংশ

Complex Parallax Effects তৈরি এবং কাস্টমাইজ করার মাধ্যমে আপনি আপনার ওয়েবসাইটে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করতে পারেন। একাধিক লেয়ার, 3D ইফেক্ট, স্পিড এবং দিক নিয়ন্ত্রণ, এবং JavaScript লাইব্রেরির সাহায্যে প্যারালাক্স স্ক্রলিংকে আরও জটিল এবং আকর্ষণীয় করা যায়। উপরোক্ত কৌশলগুলি অনুসরণ করে আপনি সাইটের ডিজাইন এবং ইউজার এক্সপিরিয়েন্সের মান উন্নত করতে পারবেন।

Content added By

Rezwan Siddiki Tamim

Real-world Examples এবং Custom Designs

226

প্যারালাক্স স্ক্রলিং ওয়েব ডিজাইনে একটি অত্যন্ত জনপ্রিয় এবং আকর্ষণীয় টেকনিক যা ওয়েবসাইটের ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির মধ্যে পার্থক্য তৈরি করে একটি ত্রিমাত্রিক (3D) বা গভীরতার অনুভূতি সৃষ্টি করে। এটি প্রাথমিকভাবে ইউজারদের জন্য একটি ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করে এবং ওয়েব ডিজাইনকে আরও জীবন্ত ও আকর্ষণীয় করে তোলে।

এই টিউটোরিয়ালে, আমরা কিছু real-world examples এবং custom designs পর্যালোচনা করব, যেখানে প্যারালাক্স স্ক্রলিং টেকনিক ব্যবহার করা হয়েছে এবং কিভাবে এই টেকনিক ব্যবহার করে creative এবং dynamic web experiences তৈরি করা যায়।

১. Real-world Examples of Parallax Scrolling

1.1. Nike: "Find Your Greatness" Campaign

Nike তাদের "Find Your Greatness" ক্যাম্পেইনে প্যারালাক্স স্ক্রলিং ব্যবহার করেছে। এই ক্যাম্পেইনে প্যারালাক্স স্ক্রলিংয়ের মাধ্যমে প্রতিটি সেকশনের সাথে স্পোর্টস ইমেজ এবং কন্টেন্ট সরাসরি স্ক্রল করে এবং ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করে।

Feature: ওয়েবসাইটে প্যারালাক্স স্ক্রলিংয়ের মাধ্যমে ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির পার্থক্য তৈরি করা হয়েছে। পৃষ্ঠার স্ক্রলিংয়ের সাথে সাথে ব্যাকগ্রাউন্ডে ছবি পরিবর্তিত হয়, যা একটি ডাইনামিক এবং আকর্ষণীয় অনুভূতি দেয়।
Why it works: এটি ব্যবহারকারীদের মনে গভীরতা এবং ব্র্যান্ডের সাথে আরও ইন্টারঅ্যাকটিভ সম্পর্ক সৃষ্টি করে, যা ক্যাম্পেইনকে আরও আকর্ষণীয় এবং মনে রাখার মতো করে তোলে।

1.2. Toyota: "The New Prius" Landing Page

Toyota তাদের "The New Prius" ল্যান্ডিং পেজে প্যারালাক্স স্ক্রলিং ব্যবহার করে। এখানে, প্রোডাক্টের বিভিন্ন দিক এবং ফিচারগুলো ইন্টারঅ্যাকটিভ স্ক্রলিংয়ের মাধ্যমে প্রেজেন্ট করা হয়েছে।

Feature: প্যারালাক্স স্ক্রলিংয়ের মাধ্যমে প্রতিটি ফিচারের সাথে তার ব্যাকগ্রাউন্ড এবং টেক্সট পরিবর্তিত হয়, যা ব্যবহারকারীকে প্রতিটি ফিচারের মধ্যে ইন্টারঅ্যাক্ট করতে উৎসাহিত করে।
Why it works: এই ধরনের স্ক্রলিং ব্যবহারকারীর আগ্রহ ধরে রাখে এবং তাদেরকে প্রোডাক্টের প্রতি আকৃষ্ট করে। এটি প্রোডাক্টের বর্ণনা করার জন্য একটি নতুন এবং আকর্ষণীয় উপায়।

1.3. Apple: "MacBook Pro" Landing Page

Apple তাদের "MacBook Pro" ল্যান্ডিং পেজে প্যারালাক্স স্ক্রলিংয়ের মাধ্যমে ভিজ্যুয়াল ফিচার প্রদর্শন করেছে। এটি প্রোডাক্টের ইমেজ এবং টেক্সট সঠিকভাবে প্রেজেন্ট করার জন্য প্যারালাক্স স্ক্রলিং ব্যবহার করেছে।

Feature: স্ক্রলিংয়ের সাথে সাথে ইমেজ এবং টেক্সটের গতির পার্থক্য তৈরি করা হয়েছে, যা ডিভাইসের ফিচারগুলিকে আরও উদ্ভাবনীভাবে উপস্থাপন করে।
Why it works: এই ধরনের ইন্টারঅ্যাকশন ব্যবহারকারীদের অভিজ্ঞতাকে আরও উন্নত করে এবং তাদেরকে ব্র্যান্ডের সাথে আরও যুক্ত করে।

২. Custom Designs Using Parallax Scrolling

2.1. One-Page Websites

একটি একক পৃষ্ঠার ওয়েবসাইটের জন্য প্যারালাক্স স্ক্রলিং একটি খুবই জনপ্রিয় টেকনিক, যেখানে একটি ল্যান্ডিং পেজ বা প্রেজেন্টেশন পেজ তৈরি করা হয়, যা ওয়েবসাইটের কন্টেন্ট সরাসরি স্ক্রল করার মাধ্যমে প্রদর্শন করে।

Feature: প্যারালাক্স স্ক্রলিংয়ের মাধ্যমে বিভিন্ন সেকশন একে অপরের সাথে যুক্ত থাকে এবং ব্যাকগ্রাউন্ড ও কন্টেন্টের গতির পার্থক্য তৈরি হয়। এটি ইউজারকে কন্টেন্টের মধ্যে আরও ডুবিয়ে দেয়।
Example: পোর্টফোলিও ওয়েবসাইট বা একক পৃষ্ঠার প্রোডাক্ট পেজ। যেমন, web developer portfolio বা art portfolio websites।

2.2. Creative Agency Websites

ক্রিয়েটিভ এজেন্সি ওয়েবসাইটগুলি প্যারালাক্স স্ক্রলিং ব্যবহার করে তাদের কাজ এবং সেবা প্রদর্শন করে। এটি তাদের প্রোফাইল এবং ব্র্যান্ডের উপর ইন্টারঅ্যাকটিভ প্রভাব তৈরি করে।

Feature: ডিজাইন এবং অ্যানিমেশন সহকারে প্যারালাক্স স্ক্রলিং ব্যবহার করা হয়, যা ওয়েবসাইটে দর্শকদের আকৃষ্ট করে।
Example: ডিজাইন এজেন্সির ওয়েবসাইট যা স্ক্রলিং এর মাধ্যমে তাদের প্রজেক্ট এবং সেবার বিবরণ প্রদান করে।

2.3. E-commerce Websites

একমাত্র পণ্য বা বিভিন্ন পণ্যের জন্য ইকমার্স সাইটেও প্যারালাক্স স্ক্রলিং ব্যবহার করা যেতে পারে। এখানে প্যারালাক্স স্ক্রলিংয়ের মাধ্যমে পণ্যের বিভিন্ন দিক উপস্থাপন করা হয়, যেমন ইমেজ, ফিচার, এবং প্রাইজ চেঞ্জ করা।

Feature: স্ক্রলিংয়ের সাথে পণ্যের ছবি এবং বৈশিষ্ট্য পরিবর্তিত হয়। ইন্টারঅ্যাকটিভ প্রোডাক্ট প্রদর্শন এবং ডিটেইলসসহ স্ক্রলিং ইফেক্ট তৈরি করা হয়।
Example: Furniture stores বা Fashion e-commerce websites যেখানে বিভিন্ন পণ্যের বিভিন্ন ভিউ প্রদর্শন করা হয়।

৩. How to Create Custom Parallax Scrolling Designs

প্যারালাক্স স্ক্রলিংয়ের জন্য একটি কাস্টম ডিজাইন তৈরি করতে, কিছু ধাপ অনুসরণ করা যায়। এখানে কিভাবে একটি custom parallax scrolling website তৈরি করা যায়, তা ব্যাখ্যা করা হলো।

Step 1: Define the Structure

প্রথমে, ওয়েবসাইটের স্ট্রাকচার তৈরি করুন যেখানে আপনি বিভিন্ন সেকশন তৈরি করবেন যা প্যারালাক্স স্ক্রলিংয়ের মাধ্যমে বদলাবে।

<section class="parallax" id="section1">
    <div class="content">
        <h1>Welcome to Our Creative Agency</h1>
    </div>
</section>

<section class="parallax" id="section2">
    <div class="content">
        <h1>Explore Our Work</h1>
    </div>
</section>

Step 2: Add Background Images and Effects

পরবর্তী স্টেপে, CSS ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ এবং প্যারালাক্স স্ক্রলিং এফেক্ট প্রয়োগ করুন।

.parallax {
    background-image: url('background.jpg');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: 100vh;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

#section1 {
    background-image: url('section1.jpg');
}

#section2 {
    background-image: url('section2.jpg');
}

Step 3: Add Parallax Effect with JavaScript

JavaScript ব্যবহার করে স্ক্রলিং ইফেক্ট কাস্টমাইজ করুন। যখন ব্যবহারকারী স্ক্রল করবে, তখন ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির পার্থক্য তৈরি হবে।

window.addEventListener('scroll', function() {
    var parallax = document.querySelectorAll('.parallax');
    parallax.forEach(function(element) {
        var speed = element.getAttribute('data-speed');
        element.style.transform = 'translateY(' + window.scrollY * speed + 'px)';
    });
});

Step 4: Optimize for Mobile

মোবাইল ডিভাইসের জন্য প্যারালাক্স স্ক্রলিংয়ের পারফরম্যান্স অপ্টিমাইজ করতে CSS media queries ব্যবহার করুন এবং মোবাইল ডিভাইসে স্ক্রলিং ইফেক্টটি ডisable করুন।

@media (max-width: 768px) {
    .parallax {
        background-attachment: scroll;
    }
}

Conclusion

Real-world examples এবং custom designs এর মাধ্যমে প্যারালাক্স স্ক্রলিং ব্যবহার করে একটি ওয়েবসাইটে আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করা যেতে পারে। প্যারালাক্স স্ক্রলিংয়ের মাধ্যমে বিভিন্ন প্রোডাক্ট, সেবা, অথবা কন্টেন্ট আরও জীবন্ত এবং মনোমুগ্ধকর হয়ে ওঠে। যখন প্যারালাক্স স্ক্রলিংয়ের জন্য কাস্টম ডিজাইন তৈরি করেন, তখন JavaScript, CSS, এবং media queries ব্যবহার করে ডিভাইস অনুযায়ী উপযুক্ত স্ক্রলিং ইফেক্ট নিশ্চিত করা উচিত।

Content added By

Rezwan Siddiki Tamim

Srallax Scrolling পরিচিতি Srallax Scrolling এর বেসিক কনসেপ্ট Srallax Scrolling সেটআপ এবং ইনস্টলেশন CSS এর মাধ্যমে Srallax Scrolling তৈরি JavaScript এবং jQuery এর মাধ্যমে Srallax Scrolling

Web Development Custom Srallax Scrolling তৈরি করা গাইড ও নোট

Step 1: HTML Structure

Step 2: CSS for Styling

Step 3: JavaScript for Custom Parallax Effect

Step 4: Testing and Debugging

সারাংশ

কাস্টম Srallax Scrolling এর জন্য CSS এবং JavaScript ব্যবহার

কাস্টম প্যারালাক্স স্ক্রলিং তৈরি করার জন্য প্রয়োজনীয় উপাদান

১. HTML স্ট্রাকচার

২. CSS স্টাইলিং

৩. JavaScript ব্যবহার করা

JavaScript কোড:

কোড ব্যাখ্যা:

৪. Responsive Design নিশ্চিত করা

সারাংশ

Different Speed Layers এবং Elements যোগ করা

প্যারালাক্স স্ক্রলিংয়ে Different Speed Layers এবং Elements যোগ করার জন্য পদক্ষেপ

১. HTML স্ট্রাকচার তৈরি করা

২. CSS স্টাইলিং

৩. JavaScript দিয়ে Speed Control

৪. JavaScript Explanation

৫. ফলস্বরূপ

৬. Mobile Devices এর জন্য Optimization

সারাংশ

Complex Srallax Effects তৈরি এবং কাস্টমাইজ করা

১. Multiple Layers Parallax Effects

কৌশল:

উদাহরণ:

২. Speed and Direction Customization

কৌশল:

উদাহরণ:

৩. 3D Parallax Effect

কৌশল:

উদাহরণ:

৪. Interactive Parallax with JavaScript Libraries

উদাহরণ: Rellax.js লাইব্রেরি ব্যবহার

৫. Animation and Scroll Effects Integration

কৌশল:

উদাহরণ:

সারাংশ

Real-world Examples এবং Custom Designs

১. Real-world Examples of Parallax Scrolling

1.1. Nike: "Find Your Greatness" Campaign

1.2. Toyota: "The New Prius" Landing Page

1.3. Apple: "MacBook Pro" Landing Page

২. Custom Designs Using Parallax Scrolling

2.1. One-Page Websites

2.2. Creative Agency Websites

2.3. E-commerce Websites

৩. How to Create Custom Parallax Scrolling Designs

Step 1: Define the Structure

Step 2: Add Background Images and Effects

Step 3: Add Parallax Effect with JavaScript

Step 4: Optimize for Mobile

Conclusion

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!