50+ JavaScript Parallax (Page 2)

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.

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.

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.

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.

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.

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.

An interactive timeline where JS synchronizes CSS transform: translateX for scrolling, background-position for parallax, and classes for sprite animation.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

A showcase of the synergy between JavaScript and CSS to create a detailed 3D element with a parallax effect. It uses requestAnimationFrame for performance-optimized calculation of velocity and position, and transform-style: preserve-3d for correct layer rendering.