RSK World - Parallax Scrolling Effect | Multiple Layers, Mouse Parallax, Particles | RSK World

Scroll Parallax Mouse Parallax Particles & Cursor Theme & Progress Vanilla JS

Parallax Scrolling Effect is a single-page demo with multiple parallax layers, scroll-based and mouse-based parallax, particle system, custom cursor effects, theme switcher (Dark/Light/Cosmic/Nature), scroll progress indicator, performance monitor, and full prefers-reduced-motion accessibility. Hero uses stars, mountains, trees at different data-speed; features and showcase include vertical, horizontal, and scale parallax demos plus advanced 3D cube, wave, morph, and orbit effects. HTML5, CSS3, vanilla JavaScript. By rskworld.in.

If you find this Parallax Scrolling project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Parallax Scrolling

Scroll Parallax Engine

ParallaxEffect class in parallax.js: .parallax-layer and [data-speed] elements move at different speeds on scroll. requestAnimationFrame with ticking flag for 60fps. Vertical, horizontal, and scale showcase demos; mini parallax in About. Respects prefers-reduced-motion.

translateY(-scrollY * speed) for layers
Showcase: vertical-parallax, horizontal-parallax, scale-parallax with .demo-layer
Hero: stars, mountains-1/2, trees with data-speed 0.5, 0.3, 0.2, 0.1
addParallaxElement(), removeParallaxElement(), updateElementSpeed()

Project Structure & Files

parallax-scrolling/ with index.html, css/ (style.css, responsive.css, enhanced-features.css), js/ (parallax.js, main.js, particles.js, cursor-effects.js, audio-system.js, advanced-parallax.js, theme-switcher.js, performance-monitor.js, mouse-parallax.js, scroll-progress.js, accessibility.js). No build step.

index.html, css/, js/, README.md, LICENSE, package.json
No build step – open index.html or static server (serve, PHP, Python)
Font: Poppins (Google Fonts), Font Awesome 6
Zero framework; vanilla HTML, CSS, JavaScript

Mouse Parallax & Cursor

MouseParallax class: [data-mouse-parallax] with JSON config (strength, direction, rotate, scale). Viewport or element-relative; ease; optional EnhancedMouseParallax glow/shadow. cursor-effects.js: custom cursor, trail, magnetic buttons. Disabled on mobile by default.

data-mouse-parallax='{"strength":0.2,"direction":"both","rotate":true}'
data-magnetic for buttons; data-enhanced-parallax for glow
prefers-reduced-motion disables mouse parallax and cursor effects
Hero content and feature cards use mouse parallax

Particles & Advanced Parallax

ParticleSystem: canvas particles in hero and features; connection lines, mouse interaction. AdvancedParallax: 3D cube, wave, morph, orbit demos injected into showcase. Theme switcher: Dark, Light, Cosmic, Nature; system preference. Performance monitor: FPS, memory, network; Ctrl+Shift+P.

particles.js – particleCount, connectionDistance, mouseInteraction
advanced-parallax.js – create3DCubeDemo, createWaveDemo, createMorphDemo, createOrbitDemo
theme-switcher.js – multiple themes; performance-monitor.js dashboard
scroll-progress.js – top progress bar, section tracking, percentage

Sections & UX

Sections: Hero, About, Features, Showcase, Contact. main.js: loading screen with progress bar, navbar scroll state, hamburger menu, scroll reveal (.scroll-reveal), back-to-top, contact form validation, smooth scroll, active nav. Keyboard: 1–5 section jump, Escape, Home, End.

Loading: loadingProgressFill, loadingPercent; hide on window.load
Smooth scroll for # links; active section highlighting
Keyboard 1–5 = Home, About, Features, Showcase, Contact (when not in input)
Touch swipe handlers; debounce/throttle utilities

What You Get

Static HTML/CSS/JS: parallax-scrolling/ with index.html, css/, js/, README.md, LICENSE, package.json. No build step. Open index.html or serve folder.

Complete source – parallax-scrolling/ with HTML, CSS, JS
No build step – open index.html or static server
README.md, LICENSE included
Technologies: HTML5, CSS3, Vanilla JS. © 2026 Molla Samser (RSK World).

Usage

Open index.html. Scroll to see layer parallax; move mouse for mouse-parallax elements. Use theme panel (top-left), performance panel (bottom-right), audio controls. Sections: Home, About, Features, Showcase, Contact. Print styles hide nav, cursor, panels.

parallax-scrolling/index.html – single-page demo
Accessibility: skip link (focus to reveal), prefers-reduced-motion, section keys 1–5
Responsive breakpoints: 1024, 768, 480px
Author: Molla Samser | rskworld.in

Project Features

Multiple parallax layers, scroll and mouse parallax, particle system, cursor effects, theme switcher, scroll progress, performance monitor, advanced demos (3D cube, wave, morph, orbit), accessibility (reduce motion, skip link, keyboard), responsive design.

Core – parallax.js (scroll), mouse-parallax.js (mouse), particles.js, cursor-effects.js
UI – theme-switcher.js, scroll-progress.js, performance-monitor.js, advanced-parallax.js
accessibility.js – reduce-motion, skip link; main.js – loading, nav, form, keyboard
Hero, About, Features, Showcase, Contact, Footer, Back to top