اسنیپت‌های طلایی برای افکت Parallax بدون استفاده از کتابخانه‌های سنگین

رفیق برنامه‌نویس، دنبال اون اسنیپت‌های جادویی هستی که وب‌سایتت رو بدون نیاز به حجم اضافی کتابخانه‌ها، جون‌دار و پویا کنی؟ اینجا دقیقاً همون جاییه که باید باشی! قراره با هم قدم به قدم پیش بریم و افکت‌های Parallax خفن رو فقط با CSS و جاوااسکریپت خالص بسازیم. اگه آماده‌ای که وب‌سایتت رو متحول کنی و بازدیدکننده‌هات رو حسابی به وجد بیاری، پس بزن بریم! راستی، اگه دنبال ابزارهای بیشتر برای پروژه‌هات هستی، یه سر به فروشگاه ابزارهای ما بزن، شاید همون چیزی رو پیدا کنی که مدت‌ها دنبالش بودی. اگه سوالی هم داری، کافیه با شماره 09202232789 با ما در تماس باشی.

فهرست مطالب

• 💡 چرا Parallax بدون کتابخانه سنگین؟
• 🛠️ اصول اولیه: CSS و JS در Parallax
  • افکت Parallax با CSS خالص
  • قلب تپنده Parallax: JavaScript
• 📝 اسنیپت‌های طلایی: پیاده‌سازی گام به گام
  • Parallax ساده با CSS و JS
  • Parallax با لایه‌های مختلف
  • Parallax افقی
  • Parallax مبتنی بر حرکت ماوس (پیشرفته)
• 🚀 بهینه‌سازی و نکات حرفه‌ای
  • مدیریت Performance: `throttle` و `debounce`
  • قدرت Intersection Observer API
  • دستکاری مستقیم DOM یا Transforms؟
  • قابلیت دسترسی (Accessibility)
  • رسپانسیو کردن Parallax
• 🚨 عیب‌یابی سریع: مشکلات رایج و راه‌حل‌ها
• 🌟 نتیجه‌گیری و آینده Parallax
• ❓ سوالات متداول (FAQ)

مثال: Parallax ساده با `background-attachment: fixed;`

این روش برای تصاویر پس‌زمینه جواب میده، اما برای کنترل دقیق‌تر عناصر و افکت‌های چند لایه، نیاز به JavaScript داری.

کپی کد
/* HTML */
<div class="parallax-section">
    <h2>این یک بخش با پس‌زمینه Parallax است</h2>
</div>
<div class="content-section">
    <p>متن ادامه دار وب‌سایت شما...</p>
</div>

/* CSS */
.parallax-section {
    background-image: url('your-background-image.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* magic happens here */
    height: 400px; /* or any height you want */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.content-section {
    padding: 50px;
    background-color: #f0f0f0;
    text-align: center;
}

HTML Structure

کپی کد
<div class="hero-section">
    <img src="path/to/your-image.png" alt="Parallax Element" class="parallax-element">
    <h1>به دنیای Parallax خوش آمدید</h1>
</div>

<div style="height: 800px; background-color: #f8f8f8; display: flex; justify-content: center; align-items: center;">
    <p>محتوای بیشتر برای اسکرول...</p>
</div>

<div class="another-section">
    <img src="path/to/another-image.png" alt="Another Parallax Element" class="parallax-element" data-speed="-0.3">
    <h2>همینطور ادامه میدیم...</h2>
</div>

<div style="height: 800px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center;">
    <p>پایان محتوا.</p>
</div>

CSS Styling

کپی کد
body {
    margin: 0;
    font-family: sans-serif;
    overflow-x: hidden; /* Prevent horizontal scrollbar from transforms */
}

.hero-section, .another-section {
    position: relative;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* To keep parallax elements within bounds initially */
    text-align: center;
}

.hero-section {
    background-color: #42A5F5;
    color: white;
}

.another-section {
    background-color: #81C784;
    color: white;
}

.parallax-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the element */
    width: 200px; /* Example size */
    height: auto;
    z-index: 1; /* Ensure it's above background but below text */
    will-change: transform; /* Hint to the browser for performance */
}

h1, h2 {
    position: relative;
    z-index: 2; /* Ensure text is above parallax elements */
}

JavaScript Logic

کپی کد
const parallaxElements = document.querySelectorAll('.parallax-element');
let ticking = false; // Flag to control requestAnimationFrame

function updateParallax() {
    parallaxElements.forEach(element => {
        const speed = parseFloat(element.dataset.speed) || -0.5; // Default speed
        const rect = element.parentElement.getBoundingClientRect(); // Parent section position
        const scrollY = window.scrollY || window.pageYOffset;
        
        // Calculate the element's position relative to its parent section
        // We want the element to move based on its parent's position in the viewport
        const offsetTop = rect.top + scrollY;
        const relativeScroll = scrollY - offsetTop;
        
        // Calculate translation
        const translateY = relativeScroll * speed;
        
        element.style.transform = `translate(-50%, calc(-50% + ${translateY}px))`;
    });
    ticking = false; // Reset flag
}

window.addEventListener('scroll', () => {
    if (!ticking) {
        window.requestAnimationFrame(() => {
            updateParallax();
        });
        ticking = true;
    }
});

// Initial update
updateParallax();

HTML Structure

کپی کد
<div class="multi-layer-parallax-section">
    <img src="layer1.png" alt="Foreground" class="parallax-layer" data-speed="0.8">
    <img src="layer2.png" alt="Midground" class="parallax-layer" data-speed="0.4">
    <img src="layer3.png" alt="Background" class="parallax-layer" data-speed="0.2">
    <h2>دنیای چند لایه!</h2>
</div>

<div style="height: 1000px; background-color: #e0e0e0; display: flex; justify-content: center; align-items: center;">
    <p>باز هم محتوای بیشتر...</p>
</div>

CSS Styling

کپی کد
.multi-layer-parallax-section {
    position: relative;
    height: 700px;
    overflow: hidden;
    background-color: #CE93D8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.parallax-layer {
    position: absolute;
    width: 100%; /* Or specific width */
    height: 100%; /* Or specific height */
    object-fit: cover;
    top: 0;
    left: 0;
    will-change: transform;
}

/* You might want to adjust z-index based on your layers for correct visual stacking */
.parallax-layer:nth-child(1) { z-index: 3; } /* Foreground */
.parallax-layer:nth-child(2) { z-index: 2; } /* Midground */
.parallax-layer:nth-child(3) { z-index: 1; } /* Background */

.multi-layer-parallax-section h2 {
    position: relative;
    z-index: 4;
    color: white;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

JavaScript Logic

کپی کد
const parallaxLayers = document.querySelectorAll('.parallax-layer');
let tickingMulti = false;

function updateMultiLayerParallax() {
    const scrollY = window.scrollY || window.pageYOffset;

    parallaxLayers.forEach(layer => {
        const speed = parseFloat(layer.dataset.speed) || 0.5;
        // The parent element (section) is usually the reference point for the scroll calculation
        const parentRect = layer.parentElement.getBoundingClientRect();
        const parentOffsetTop = parentRect.top + scrollY;
        
        // Calculate the scroll position relative to the section
        const relativeScroll = scrollY - parentOffsetTop;
        
        const translateY = relativeScroll * speed;
        layer.style.transform = `translateY(${translateY}px)`;
    });
    tickingMulti = false;
}

window.addEventListener('scroll', () => {
    if (!tickingMulti) {
        window.requestAnimationFrame(() => {
            updateMultiLayerParallax();
        });
        tickingMulti = true;
    }
});

updateMultiLayerParallax(); // Initial call

HTML Structure

کپی کد
<div class="horizontal-parallax-section">
    <div class="horizontal-content">
        <img src="item1.png" alt="Item 1" class="h-parallax-item" data-speed="0.6">
        <img src="item2.png" alt="Item 2" class="h-parallax-item" data-speed="-0.3">
        <h2>از چپ به راست!</h2>
    </div>
</div>

<div style="height: 1200px; background-color: #eee; display: flex; justify-content: center; align-items: center;">
    <p>بخش محتوای عادی...</p>
</div>

CSS Styling

کپی کد
.horizontal-parallax-section {
    position: relative;
    height: 600px; /* Height of the scrollable area */
    overflow: hidden;
    background-color: #FFCC80;
    display: flex;
    justify-content: center;
    align-items: center;
}

.horizontal-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* To arrange items horizontally */
    justify-content: space-around;
    align-items: center;
    padding: 0 50px;
}

.h-parallax-item {
    width: 150px; /* Example size */
    height: auto;
    will-change: transform;
    z-index: 1;
}

.horizontal-parallax-section h2 {
    position: relative;
    z-index: 2;
    color: #FFF;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

JavaScript Logic

کپی کد
const hParallaxItems = document.querySelectorAll('.h-parallax-item');
let tickingH = false;

function updateHorizontalParallax() {
    const scrollY = window.scrollY || window.pageYOffset;
    
    hParallaxItems.forEach(item => {
        const speed = parseFloat(item.dataset.speed) || 0.5;
        const parentRect = item.parentElement.parentElement.getBoundingClientRect(); // Horizontal section parent
        const parentOffsetTop = parentRect.top + scrollY;

        const relativeScroll = scrollY - parentOffsetTop;
        
        // Translate X instead of Y
        const translateX = relativeScroll * speed;
        item.style.transform = `translateX(${translateX}px)`;
    });
    tickingH = false;
}

window.addEventListener('scroll', () => {
    if (!tickingH) {
        window.requestAnimationFrame(() => {
            updateHorizontalParallax();
        });
        tickingH = true;
    }
});

updateHorizontalParallax(); // Initial call

HTML Structure

کپی کد
<div class="mouse-parallax-container">
    <img src="mouse-layer1.png" alt="Layer 1" class="mouse-parallax-item" data-depth="0.2">
    <img src="mouse-layer2.png" alt="Layer 2" class="mouse-parallax-item" data-depth="0.4">
    <div class="mouse-parallax-item" data-depth="0.6" style="background-color: rgba(255,255,255,0.3); padding: 20px; border-radius: 10px;">
        <h2>Parallax با ماوس!</h2>
    </div>
</div>

<div style="height: 500px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center;">
    <p>ادامه محتوای عادی...</p>
</div>

CSS Styling

کپی کد
.mouse-parallax-container {
    position: relative;
    width: 100%;
    height: 500px; /* Adjust height as needed */
    overflow: hidden;
    background-color: #80CBC4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mouse-parallax-item {
    position: absolute;
    transition: transform 0.1s linear; /* Smooth mouse movement */
    will-change: transform;
    pointer-events: none; /* Prevents items from interfering with mouse events on parent */
    z-index: 1;
}

.mouse-parallax-item:nth-child(1) { width: 400px; left: 20%; top: 30%; }
.mouse-parallax-item:nth-child(2) { width: 300px; right: 15%; bottom: 20%; }
.mouse-parallax-item:nth-child(3) { /* Text box */
    color: white; text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    font-size: 1.5em;
    z-index: 2;
}

JavaScript Logic

کپی کد
const mouseParallaxContainer = document.querySelector('.mouse-parallax-container');
const mouseParallaxItems = document.querySelectorAll('.mouse-parallax-item');

if (mouseParallaxContainer) { // Check if container exists
    mouseParallaxContainer.addEventListener('mousemove', (e) => {
        // Calculate mouse position relative to the center of the container
        const containerRect = mouseParallaxContainer.getBoundingClientRect();
        const centerX = containerRect.left + containerRect.width / 2;
        const centerY = containerRect.top + containerRect.height / 2;

        const mouseX = e.clientX - centerX;
        const mouseY = e.clientY - centerY;

        mouseParallaxItems.forEach(item => {
            const depth = parseFloat(item.dataset.depth) || 0.1;
            const translateX = -mouseX * depth;
            const translateY = -mouseY * depth;

            item.style.transform = `translate(${translateX}px, ${translateY}px)`;
        });
    });
}

جدول مقایسه‌ای: Throttle vs. Debounce

مثال: استفاده از Intersection Observer

کپی کد
const parallaxSections = document.querySelectorAll('.parallax-section, .multi-layer-parallax-section, .horizontal-parallax-section');

const observerOptions = {
    root: null, // viewport
    rootMargin: '0px',
    threshold: 0.1 // Trigger when 10% of the element is visible
};

const parallaxObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // Element is in view, enable parallax for its children
            entry.target.classList.add('is-parallax-active');
        } else {
            // Element is out of view, disable parallax for its children
            entry.target.classList.remove('is-parallax-active');
        }
    });
}, observerOptions);

parallaxSections.forEach(section => {
    parallaxObserver.observe(section);
});

// Modify your JS parallax logic to only run if parent has 'is-parallax-active' class
// Example:
// function updateParallax() {
//     parallaxElements.forEach(element => {
//         if (element.parentElement.classList.contains('is-parallax-active')) {
//             // ... existing parallax calculation ...
//         }
//     });
//     ticking = false;
// }

مشکل: انیمیشن پرش داره یا کند عمل می‌کنه (Jittery Animation)

اوه اوه! این بدترین کابوس هر انیمیشن‌سازیه. این مشکل معمولاً به خاطر اجرای بیش از حد کد جاوااسکریپت یا دستکاری مستقیم DOM در `scroll event` پیش میاد.

راه‌حل:

• • `requestAnimationFrame` همیشه اولین گزینه‌ست: اطمینان حاصل کن که تمام تغییرات بصری رو داخل `requestAnimationFrame` انجام می‌دی.
  • استفاده از `will-change`: به CSS عنصر Parallax شده `will-change: transform;` اضافه کن. این به مرورگر کمک می‌کنه تا خودش رو برای انیمیشن آماده کنه.
  • `throttle` کردن: اگه محاسبات سنگینی داری که خارج از `requestAnimationFrame` انجام می‌شن، اون‌ها رو `throttle` کن تا در بازه‌های زمانی مشخص (مثلاً هر 100 میلی‌ثانیه) اجرا بشن.
  • `passive` event listener: برای `scroll event` از `{ passive: true }` استفاده کن تا مرورگر بدونه که شما `preventDefault()` رو صدا نمی‌زنید و می‌تونه اسکرول رو سریع‌تر هندل کنه.

کپی کد
window.addEventListener('scroll', yourParallaxUpdateFunction, { passive: true });

مشکل: Parallax روی موبایل کار نمی‌کنه یا افت عملکرد داره

دستگاه‌های موبایل منابع کمتری دارن و `scroll event` روی اون‌ها گاهی اوقات متفاوت عمل می‌کنه.

راه‌حل:

• غیرفعال‌سازی هوشمندانه: بهترین کار اینه که کلاً Parallax رو روی دستگاه‌های موبایل غیرفعال کنی (یا حداقل تا حد زیادی سادش کنی). این کار رو با media query در CSS و بررسی `window.innerWidth` در جاوااسکریپت می‌تونی انجام بدی.
• تست گسترده: حتماً روی چند مدل گوشی و تبلت تست کن. گاهی اوقات مرورگرهای مختلف رفتارهای متفاوتی دارن.
• از `background-attachment: fixed` دوری کن: این خاصیت روی iOS و بعضی از مرورگرهای موبایل خوب کار نمی‌کنه.

مشکل: عناصر Parallax با هم یا با محتوای دیگه قاطی می‌شن (Overlapping Elements)

وقتی عناصر با سرعت‌های متفاوت حرکت می‌کنن، ممکنه ترتیب بصریشون بهم بخوره.

راه‌حل:

• `z-index` رو فراموش نکن: به هر لایه `z-index` مناسب بده. لایه‌هایی که می‌خوای جلوتر باشن، `z-index` بالاتری داشته باشن.
• `position: relative` یا `absolute`: مطمئن شو که عناصر Parallax شده `position: absolute` دارن و والدشون `position: relative` تا `z-index` به درستی کار کنه.
• `overflow: hidden` در والد: برای بخش Parallax اصلی، `overflow: hidden` رو تنظیم کن تا عناصری که از محدوده بیرون میرن، دیده نشن. این مورد میتونه به صورت نامحسوس به عنوان یه غلط املایی در نظر گرفته بشه.

آیا Parallax بدون کتابخانه برای همه پروژه‌ها مناسب است؟

پاسخ: برای پروژه‌هایی که به عملکرد بالا، سفارشی‌سازی دقیق و کنترل کامل نیاز دارند، بله! اما برای پروژه‌های کوچیک با نیازهای ساده، استفاده از یک کتابخانه سبک و بهینه می‌تونه زمان توسعه رو کاهش بده.

چگونه می‌توانم Parallax را برای موبایل بهینه کنم؟

پاسخ: بهترین راه این است که افکت Parallax را روی دستگاه‌های موبایل کاملاً غیرفعال کنید یا آن را به یک افکت ساده‌تر (مثلاً فقط تغییر opacity یا یک انیمیشن CSS ساده) کاهش دهید. استفاده از media queries در CSS و بررسی عرض صفحه در جاوااسکریپت به شما کمک می‌کند.

آیا استفاده از Parallax بر سئوی سایت تأثیر منفی می‌گذارد؟

پاسخ: اگر Parallax باعث کندی وب‌سایت یا مشکلات دسترسی شود، بله، می‌تواند تأثیر منفی داشته باشد. اما اگر بهینه و با رعایت اصول عملکرد و دسترسی پیاده‌سازی شود، تأثیر منفی نخواهد داشت و حتی می‌تواند با افزایش ماندگاری کاربر، به سئو کمک کند.

تفاوت اصلی بین `transform: translateY()` و تغییر `top` چیست؟

پاسخ: `transform: translateY()` از Compositor Thread مرورگر استفاده می‌کند و عملیاتش روی GPU انجام می‌شود که باعث انیمیشن‌های بسیار روان‌تر و بهینه‌تر می‌شود. در مقابل، تغییر `top` باعث `layout` و `paint` شدن مجدد صفحه توسط CPU می‌شود که می‌تواند به شدت کندی ایجاد کند. همیشه از `transform` برای انیمیشن‌ها استفاده کنید.