Back to Gallery

PARALLAX

Scroll down to see multi-layer depth effects in action

How It Works

Parallax scrolling creates an illusion of depth by moving background layers at different speeds relative to the foreground. This technique uses the CSS transform property combined with JavaScript scroll event listeners to calculate and apply different movement speeds to each layer.

Key Features

Multi-Layer Depth

Each layer moves at a different speed creating realistic depth perception

Smooth Performance

Optimized with requestAnimationFrame for 60fps scrolling

Responsive Design

Automatically adjusts to different screen sizes and devices

Implementation Code

// Parallax Scroll Effect
const parallaxElements = document.querySelectorAll('.parallax-layer');

window.addEventListener('scroll', () => {
    const scrolled = window.pageYOffset;
    
    parallaxElements.forEach(element => {
        const speed = element.dataset.speed || 0.5;
        const yPos = -(scrolled * speed);
        
        element.style.transform = `translateY(${yPos}px)`;
    });
});

// Optimize with requestAnimationFrame
let ticking = false;
function updateParallax() {
    if (!ticking) {
        window.requestAnimationFrame(() => {
            // Update parallax positions
            ticking = false;
        });
        ticking = true;
    }
}