35 JavaScript Parallax
Enhance your site’s visual appeal with JavaScript parallax effects that create a sense of depth and motion. This collection features examples of scroll-based animations, layered backgrounds, and interactive mouse-driven scenes - ideal for landing pages, portfolios, and modern web designs.
Last updated:
GSAP ScrollSmoother and Three.js
An immersive scrolling experience blending smooth typography with a floating 3D particle field powered by Three.js. GSAP orchestrates the camera movement and dynamic text highlighting, creating a synchronized parallax journey.
Scroll UI Animation
As you scroll down, a large image of a field shrinks and gets cropped by white blocks to focus attention, while a heading on the left counts up the percentage of water saved, changing color for emphasis. This creates the feel of a dynamic infographic.
Smooth Scrolling with GSAP ScrollSmoother
A premium smooth-scrolling interface orchestrated by GSAP’s ScrollSmoother plugin. The layout leverages CSS Grid for overlapping compositions, while declarative data-speed attributes drive distinct parallax velocities for text and imagery, creating a layered, depth-rich browsing experience.
Holographic Name Card with Hover Effects
An interactive 3D holographic card where JavaScript maps pointer coordinates to scoped CSS Custom Properties like --pointer-x. The physical lighting simulation relies on complex gradient layering, mask-image, and mix-blend-mode, all dynamically driven by these calculated values to create realistic depth and glare.
Amateur Radio Badge 3D
A highly sophisticated holographic badge simulation utilizing CSS 3D transforms and layered mix-blend-mode effects. JavaScript tracks mouse movement to dynamically update CSS variables, driving complex parallax shifts, lighting gradients, and SVG-masked glares for a realistic, tactile depth experience.
Air Balloon Cruise
A soothing dreamscape scene with smooth, infinite animation resembling a live postcard or a splash screen for a meditation app.
3D Patronus Magic Card
An enchanting 3D parallax card featuring a multi-layered depth effect driven by mouse interaction.
Parallax Carousel with GSAP Observer
Images drift horizontally at varying speeds and sizes, establishing a tangible sense of depth. Upon user interaction, the scroll accelerates or reverses direction with a satisfyingly elastic, spring-like response.
Day and Night Toggle with SVG Animation
An atmospheric day/night toggle where a minimal JavaScript classList.toggle trigger activates a cinematic transition across complex SVG layers. The scenery leverages linear-gradient masking and mix-blend-mode for dynamic lighting, while long-duration CSS transform properties orchestrate a seamless, parallax-like shift between solar and lunar states.
Inertial Scroll Gallery with 3D Transforms
A sophisticated scroll-hijacking gallery that emulates inertia using a virtual scroll container and requestAnimationFrame. JavaScript orchestrates complex 3D transforms - calculating rotation and translation based on intersection ratios - while the layout relies on a fixed CSS grid.
Interactive 3D Tilt Hover Effect
An interactive 3D card selector featuring a dynamic parallax effect where cards rotate in perspective based on mouse coordinates. JavaScript calculates angular transforms and constraints for a ‘chef’ character that playfully follows the cursor along the card’s axis.
GSAP ScrollTrigger Parallax Effect
This demo is a masterclass in scroll-driven animation, where GSAP’s ScrollTrigger plugin choreographs multiple, layered effects. A fluid parallax effect is created by using scrub: 1 to tie the yPercent and rotation of decorative elements directly to the scrollbar. This is complemented by a sophisticated text reveal, where GSAP’s SplitText plugin animates characters into view with a staggered opacity and y tween, demonstrating a powerful and modular approach to building complex, interactive scrolling experiences.
Horizontal Scroll Section with GSAP and Locomotive Scroll
Experience a classic “pinned” horizontal scroll effect, where a vertical scroll action is converted into horizontal movement. GSAP’s pin: true property freezes the section in place, while a tween animates the x property of the inner container, creating a cinematic, side-scrolling gallery.
Illustration Parallax on Hero Section
A parallax effect with GSAP ScrollTrigger - as the page scrolls, a trigger animates the Y-coordinate of several image layers, creating a sense of depth, with movement smoothness defined by a CustomEase.
Interactive Super Mario Timeline with Parallax
An interactive timeline where JS synchronizes CSS transform: translateX for scrolling, background-position for parallax, and classes for sprite animation.
Super Mario Scrollytelling Timeline with GSAP
Classic ‘scrollytelling’ with GSAP - creating the illusion of movement by animating transform: translateX on position: fixed elements based on the vertical scroll of an extra-long page.
Marvel Snap Card Pseudo-3D Effect
A pseudo-3D card effect that mimics the “split parallax” technique using multiple image layers and the key transform-style: preserve-3d property; the card’s dynamic tilt (rotateY/rotateX) is driven by vanilla JavaScript based on cursor/touch position.
Cards with Parallax Tilt Effect
Dive into a stunning card effect utilizing CSS 3D transforms and precise mouse tracking to create a realistic, multi-layered depth and parallax illusion on hover.
Horizontal Parallax Sliding Slider with Swiper.js
A horizontal parallax slider built on Swiper.js, featuring a unique navigation system where a vertical preview slider is fully synchronized with the main one, providing a comfortable and stylish viewing experience.
Full Screen Image Reveal Effect
A high-performance interface that uses TweenMax (part of GSAP) to apply micro-interactions (smooth parallax on titles and images on hover) and create a dramatic “fly-out” effect using Power3.easeIn during the state transition.
Photo Gallery with a Comic Touch
Explore a dual-interaction card where a 3D parallax responds to mouse movement, while a click triggers a “camera flash” and a comic-style text reveal. The hover effect uses throttled JS for performance, and the click animations are powered by GSAP.
Light and Shadow Mouse Tracking
A showcase of powerful interactive styling, where JS logic calculates cursor distance and direction to control a moving shadow and the intensity of a border glow via CSS variables and pseudo-elements.
Parallax Effect with Text Blend Mode
A spectacular mouse-controlled Parallax effect implemented using the Parallax.js library and data-depth attributes that define the movement speed of each layer. This is a key example for creating deep 3D interaction and using mix-blend-mode for text styling.
Shine Foil Card
A simple yet elegant implementation of an interactive “3D card” hover effect. The code uses getBoundingClientRect() to calculate the element’s center and then applies an offset to inner layers, achieving a parallax effect with just a few lines of JavaScript and CSS.
Parallax Slider with Vanilla JS
A clever JS-driven slider that uses a custom checkPosition function to dynamically scale each image in real-time. This parallactic effect, combined with a smooth-scrolling overflow and changing background images, creates a highly immersive visual experience.
Modern Slideshow with Vanilla JS
This animated slider is built with vanilla JavaScript and CSS, offering a rich UX with arrow, click, and swipe navigation, plus a seamless auto-play and progress bar.
Parallax TechTrades™ Holographic Trading Card
A feature-rich web animation showcasing an interactive 3D card with a hover-based parallax effect, a card-flipping animation, and dynamic SVG drawing and lighting effects all orchestrated by the powerful GSAP library.
Repetition Image Animation
Technically, this GSAP and vanilla JS demo creates a multi-layered parallax effect, where each layer responds to mouse movement, and a drag gesture adds complex 3D rotation. The code is flexible, allowing you to switch between different shapes and visual styles.
