Account Settings
FIRST NAME
[Loading...]
LAST NAME
[Loading...]
EMAIL
[Loading...]
ID
[Loading...] For support purposes only
Share AgencyGenius

Step 1: Add HTML, Css & JavaScript

Code
Html
Css
Javascript
Combined
 <!-- 
 ENHANCED PARALLAX SCROLLING EFFECT - HTML Structure 
 A self-contained parallax scrolling effect with 6 layers that move at different speeds 
 when the user scrolls. Using provided image layers with text in layer 3. 
 --> 
 <div id="parallax-scroll-widget"> 
 <div class="parallax"> 
 <section class="parallax__header"> 
 <div class="parallax__visuals"> 
 <!-- Black line at bottom of header --> 
 <div class="parallax__black-line-overflow"> 
 </div> 
 <!-- Parallax layers container --> 
 <div data-parallax-layers="" class="parallax__layers"> 
 <!-- Layer 1 (Foreground) - Moves the least --> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Layer+1+parallax.png" loading="eager" width="800" data-parallax-layer="1" alt="Layer 1" class="parallax__layer-img"> 
 <!-- Layer 2 --> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Layer+2+parallax.png" loading="eager" width="800" data-parallax-layer="2" alt="Layer 2" class="parallax__layer-img"> 
 <!-- Layer 3 (Text layer) --> 
 <div data-parallax-layer="3" class="parallax__layer-title"> 
 <h2 class="parallax__title"> 
 through the trees 
 </h2> 
 </div> 
 <!-- Layer 4 --> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Layer+4+parallax.png" loading="eager" width="800" data-parallax-layer="4" alt="Layer 4" class="parallax__layer-img"> 
 <!-- Layer 5 --> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Layer+5+parallax.png" loading="eager" width="800" data-parallax-layer="5" alt="Layer 5" class="parallax__layer-img"> 
 <!-- Layer 6 (Background) - Moves the most --> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Background+parallax.png" loading="eager" width="800" data-parallax-layer="6" alt="Background" class="parallax__layer-img"> 
 </div> 
 <!-- Gradient fade at bottom --> 
 <div class="parallax__fade"> 
 </div> 
 </div> 
 </section> 
 <!-- Content section after parallax --> 
 <section class="parallax__content"> 
 <!-- Content goes here --> 
 <div style="text-align: center; color: white;"> 
 <h2> 
 Scroll for Parallax Effect 
 </h2> 
 <p> 
 This section appears after scrolling through the parallax effect. 
 </p> 
 </div> 
 </section> 
 </div> 
 </div> 
 <!-- End of ENHANCED PARALLAX SCROLLING EFFECT HTML --> 

 /* 
 ENHANCED PARALLAX SCROLLING EFFECT - CSS Styling 
 Styles for the parallax scrolling effect with responsive adjustments 
 */ 
  
 /* Container styles */ 
 #parallax-scroll-widget .parallax { 
 width: 100%; 
 position: relative; 
 overflow: hidden; 
 } 
  
 /* Content section below the parallax header */ 
 #parallax-scroll-widget .parallax__content { 
 padding: 10em 1em; 
 justify-content: center; 
 align-items: center; 
 min-height: 100svh; 
 display: flex; 
 position: relative; 
 } 
  
 /* Layers container for parallax elements */ 
 #parallax-scroll-widget .parallax__layers { 
 object-fit: cover; 
 width: 100%; 
 max-width: none; 
 height: 100%; 
 position: absolute; 
 top: 0; 
 left: 0; 
 overflow: hidden; 
 } 
  
 /* Main title styling */ 
 #parallax-scroll-widget .parallax__title { 
 pointer-events: auto; 
 text-align: center; 
 text-transform: none; 
 margin-top: 0; 
 margin-bottom: .1em; 
 margin-right: .075em; 
 font-size: 10em; /* Large size to match H1 */ 
 font-weight: 700; /* Extra bold */ 
 line-height: 1; 
 position: relative; 
 color: white; 
 } 
  
 /* Black line at the bottom of the parallax header */ 
 #parallax-scroll-widget .parallax__black-line-overflow { 
 z-index: 20; 
 background-color: #000; 
 width: 100%; 
 height: 2px; 
 position: absolute; 
 bottom: -1px; 
 left: 0; 
 } 
  
 /* Layer image styling */ 
 #parallax-scroll-widget .parallax__layer-img { 
 pointer-events: none; 
 object-fit: cover; 
 width: 100%; 
 max-width: none; 
 height: 117.5%; 
 position: absolute; 
 top: -17.5%; 
 left: 0; 
 } 
  
 /* Z-index adjustments for proper layer stacking */ 
 #parallax-scroll-widget [data-parallax-layer="1"] { 
 z-index: 6; /* Foreground (front) */ 
 } 
 #parallax-scroll-widget [data-parallax-layer="2"] { 
 z-index: 5; 
 } 
 #parallax-scroll-widget [data-parallax-layer="3"] { 
 z-index: 4; /* Text layer */ 
 } 
 #parallax-scroll-widget [data-parallax-layer="4"] { 
 z-index: 3; 
 } 
 #parallax-scroll-widget [data-parallax-layer="5"] { 
 z-index: 2; 
 } 
 #parallax-scroll-widget [data-parallax-layer="6"] { 
 z-index: 1; /* Background (back) */ 
 } 
  
 /* Fade effect at the bottom */ 
 #parallax-scroll-widget .parallax__fade { 
 z-index: 30; 
 object-fit: cover; 
 background-image: linear-gradient(rgba(0,0,0,0), rgb(0,0,0)); 
 width: 100%; 
 max-width: none; 
 height: 20%; 
 position: absolute; 
 bottom: 0; 
 left: 0; 
 } 
  
 /* Header section containing parallax visuals */ 
 #parallax-scroll-widget .parallax__header { 
 z-index: 2; 
 padding: 10em 1em; 
 justify-content: center; 
 align-items: center; 
 min-height: 100svh; 
 display: flex; 
 position: relative; 
 } 
  
 /* Visuals container */ 
 #parallax-scroll-widget .parallax__visuals { 
 object-fit: cover; 
 width: 100%; 
 max-width: none; 
 height: 120%; 
 position: absolute; 
 top: 0; 
 left: 0; 
 } 
  
 /* Title layer container */ 
 #parallax-scroll-widget .parallax__layer-title { 
 justify-content: center; 
 align-items: center; 
 width: 100%; 
 height: 100svh; 
 display: flex; 
 position: absolute; 
 top: 0; 
 left: 0; 
 } 
  
 /* Additional styling to make the text more visible */ 
 #parallax-scroll-widget [data-parallax-layer="3"] .parallax__title { 
 color: white !important; 
 font-size: 10em !important; /* Default large size for desktop */ 
 font-weight: 900 !important; /* Extra bold */ 
 position: relative; 
 z-index: 4; /* Match layer z-index */ 
 /* Use H1 font properties but override some for emphasis */ 
 font-family: inherit; 
 line-height: 1.1; 
 letter-spacing: inherit; 
 /* Start higher position */ 
 transform: translateY(-20%); 
 } 
  
 /* Responsive font sizing and positioning for mobile devices */ 
 /* Large tablet breakpoint */ 
 @media screen and (max-width: 1024px) { 
 #parallax-scroll-widget [data-parallax-layer="3"] .parallax__title { 
 font-size: 8em !important; 
 transform: translateY(-10%) !important; /* Positioned lower than desktop */ 
 } 
 } 
  
 /* Medium tablet breakpoint */ 
 @media screen and (max-width: 768px) { 
 #parallax-scroll-widget [data-parallax-layer="3"] .parallax__title { 
 font-size: 6em !important; 
 transform: translateY(0%) !important; /* No upward shift - in center */ 
 } 
 } 
  
 /* Mobile breakpoint */ 
 @media screen and (max-width: 480px) { 
 #parallax-scroll-widget [data-parallax-layer="3"] .parallax__title { 
 font-size: 4em !important; 
 transform: translateY(10%) !important; /* Positioned lower */ 
 } 
 } 
  
 /* Small mobile breakpoint */ 
 @media screen and (max-width: 320px) { 
 #parallax-scroll-widget [data-parallax-layer="3"] .parallax__title { 
 font-size: 3em !important; 
 transform: translateY(20%) !important; /* Positioned much lower */ 
 } 
 } 

 /* 
 ENHANCED PARALLAX SCROLLING EFFECT - JavaScript 
 Handles the parallax scrolling animation using GSAP and ScrollTrigger 
 */ 
  
 // Wait for DOM to be fully loaded 
 document.addEventListener("DOMContentLoaded", () => { 
 // Ensure GSAP plugins are available within our widget 
 const widgetContainer = document.getElementById('parallax-scroll-widget'); 
 if (!widgetContainer) return; 
  
 // Check if GSAP library is loaded 
 if (typeof gsap === 'undefined') { 
 console.error('GSAP library is required for this widget to function properly'); 
 return; 
 } 
  
 // Register GSAP Plugins if available 
 if (typeof ScrollTrigger !== 'undefined') { 
 gsap.registerPlugin(ScrollTrigger); 
 } else { 
 console.error('ScrollTrigger plugin is required for this widget'); 
 return; 
 } 
  
 // Initialize Parallax Layers 
 widgetContainer.querySelectorAll('[data-parallax-layers]').forEach((triggerElement) => { 
 // Create timeline for this parallax group 
 let tl = gsap.timeline({ 
 scrollTrigger: { 
 trigger: triggerElement, 
 start: "0% 0%", 
 end: "100% 0%", 
 scrub: 0 // Smooth scrolling effect 
 } 
 }); 
  
 // Define layers and their movement amounts 
 // Higher yPercent = moves more (appears further back) 
 // Lower yPercent = moves less (appears more in front) 
 const layers = [ 
 { layer: "1", yPercent: 10 },  // Foreground (moves least) 
 { layer: "2", yPercent: 20 }, 
 { layer: "3", yPercent: 35 },  // Text layer (medium movement) 
 { layer: "4", yPercent: 50 }, 
 { layer: "5", yPercent: 65 }, 
 { layer: "6", yPercent: 80 }   // Background (moves most) 
 ]; 
  
 // Apply animations to each layer 
 layers.forEach((layerObj, idx) => { 
 tl.to( 
 triggerElement.querySelectorAll(`[data-parallax-layer="${layerObj.layer}"]`), 
 { 
 yPercent: layerObj.yPercent, 
 ease: "none" // Linear movement 
 }, 
 idx === 0 ? undefined : "<" // All animations start at the same time 
 ); 
 }); 
 }); 
 }); 

 <div id="snippet-ic4mnhwy"> 
 <!-- HTML SECTION START --> 
 <!-- 
 ENHANCED PARALLAX SCROLLING EFFECT - HTML Structure 
 A self-contained parallax scrolling effect with 6 layers that move at different speeds 
 when the user scrolls. Using provided image layers with text in layer 3. 
 --> 
 <div id="parallax-scroll-widget"> 
 <div class="parallax"> 
 <section class="parallax__header"> 
 <div class="parallax__visuals"> 
 <!-- Black line at bottom of header --> 
 <div class="parallax__black-line-overflow"> 
 </div> 
 <!-- Parallax layers container --> 
 <div data-parallax-layers="" class="parallax__layers"> 
 <!-- Layer 1 (Foreground) - Moves the least --> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Layer+1+parallax.png" loading="eager" width="800" data-parallax-layer="1" alt="Layer 1" class="parallax__layer-img"> 
 <!-- Layer 2 --> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Layer+2+parallax.png" loading="eager" width="800" data-parallax-layer="2" alt="Layer 2" class="parallax__layer-img"> 
 <!-- Layer 3 (Text layer) --> 
 <div data-parallax-layer="3" class="parallax__layer-title"> 
 <h2 class="parallax__title"> 
 through the trees 
 </h2> 
 </div> 
 <!-- Layer 4 --> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Layer+4+parallax.png" loading="eager" width="800" data-parallax-layer="4" alt="Layer 4" class="parallax__layer-img"> 
 <!-- Layer 5 --> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Layer+5+parallax.png" loading="eager" width="800" data-parallax-layer="5" alt="Layer 5" class="parallax__layer-img"> 
 <!-- Layer 6 (Background) - Moves the most --> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Background+parallax.png" loading="eager" width="800" data-parallax-layer="6" alt="Background" class="parallax__layer-img"> 
 </div> 
 <!-- Gradient fade at bottom --> 
 <div class="parallax__fade"> 
 </div> 
 </div> 
 </section> 
 <!-- Content section after parallax --> 
 <section class="parallax__content"> 
 <!-- Content goes here --> 
 <div style="text-align: center; color: white;"> 
 <h2> 
 Scroll for Parallax Effect 
 </h2> 
 <p> 
 This section appears after scrolling through the parallax effect. 
 </p> 
 </div> 
 </section> 
 </div> 
 </div> 
 <!-- End of ENHANCED PARALLAX SCROLLING EFFECT HTML --> 
 <!-- HTML SECTION END --> 
  
 <!-- CSS SECTION START --> 
 <style> 
 /* 
 ENHANCED PARALLAX SCROLLING EFFECT - CSS Styling 
 Styles for the parallax scrolling effect with responsive adjustments 
 */ 
  
 /* Container styles */ 
 #parallax-scroll-widget .parallax { 
 width: 100%; 
 position: relative; 
 overflow: hidden; 
 } 
  
 /* Content section below the parallax header */ 
 #parallax-scroll-widget .parallax__content { 
 padding: 10em 1em; 
 justify-content: center; 
 align-items: center; 
 min-height: 100svh; 
 display: flex; 
 position: relative; 
 } 
  
 /* Layers container for parallax elements */ 
 #parallax-scroll-widget .parallax__layers { 
 object-fit: cover; 
 width: 100%; 
 max-width: none; 
 height: 100%; 
 position: absolute; 
 top: 0; 
 left: 0; 
 overflow: hidden; 
 } 
  
 /* Main title styling */ 
 #parallax-scroll-widget .parallax__title { 
 pointer-events: auto; 
 text-align: center; 
 text-transform: none; 
 margin-top: 0; 
 margin-bottom: .1em; 
 margin-right: .075em; 
 font-size: 10em; /* Large size to match H1 */ 
 font-weight: 700; /* Extra bold */ 
 line-height: 1; 
 position: relative; 
 color: white; 
 } 
  
 /* Black line at the bottom of the parallax header */ 
 #parallax-scroll-widget .parallax__black-line-overflow { 
 z-index: 20; 
 background-color: #000; 
 width: 100%; 
 height: 2px; 
 position: absolute; 
 bottom: -1px; 
 left: 0; 
 } 
  
 /* Layer image styling */ 
 #parallax-scroll-widget .parallax__layer-img { 
 pointer-events: none; 
 object-fit: cover; 
 width: 100%; 
 max-width: none; 
 height: 117.5%; 
 position: absolute; 
 top: -17.5%; 
 left: 0; 
 } 
  
 /* Z-index adjustments for proper layer stacking */ 
 #parallax-scroll-widget [data-parallax-layer="1"] { 
 z-index: 6; /* Foreground (front) */ 
 } 
 #parallax-scroll-widget [data-parallax-layer="2"] { 
 z-index: 5; 
 } 
 #parallax-scroll-widget [data-parallax-layer="3"] { 
 z-index: 4; /* Text layer */ 
 } 
 #parallax-scroll-widget [data-parallax-layer="4"] { 
 z-index: 3; 
 } 
 #parallax-scroll-widget [data-parallax-layer="5"] { 
 z-index: 2; 
 } 
 #parallax-scroll-widget [data-parallax-layer="6"] { 
 z-index: 1; /* Background (back) */ 
 } 
  
 /* Fade effect at the bottom */ 
 #parallax-scroll-widget .parallax__fade { 
 z-index: 30; 
 object-fit: cover; 
 background-image: linear-gradient(rgba(0,0,0,0), rgb(0,0,0)); 
 width: 100%; 
 max-width: none; 
 height: 20%; 
 position: absolute; 
 bottom: 0; 
 left: 0; 
 } 
  
 /* Header section containing parallax visuals */ 
 #parallax-scroll-widget .parallax__header { 
 z-index: 2; 
 padding: 10em 1em; 
 justify-content: center; 
 align-items: center; 
 min-height: 100svh; 
 display: flex; 
 position: relative; 
 } 
  
 /* Visuals container */ 
 #parallax-scroll-widget .parallax__visuals { 
 object-fit: cover; 
 width: 100%; 
 max-width: none; 
 height: 120%; 
 position: absolute; 
 top: 0; 
 left: 0; 
 } 
  
 /* Title layer container */ 
 #parallax-scroll-widget .parallax__layer-title { 
 justify-content: center; 
 align-items: center; 
 width: 100%; 
 height: 100svh; 
 display: flex; 
 position: absolute; 
 top: 0; 
 left: 0; 
 } 
  
 /* Additional styling to make the text more visible */ 
 #parallax-scroll-widget [data-parallax-layer="3"] .parallax__title { 
 color: white !important; 
 font-size: 10em !important; /* Default large size for desktop */ 
 font-weight: 900 !important; /* Extra bold */ 
 position: relative; 
 z-index: 4; /* Match layer z-index */ 
 /* Use H1 font properties but override some for emphasis */ 
 font-family: inherit; 
 line-height: 1.1; 
 letter-spacing: inherit; 
 /* Start higher position */ 
 transform: translateY(-20%); 
 } 
  
 /* Responsive font sizing and positioning for mobile devices */ 
 /* Large tablet breakpoint */ 
 @media screen and (max-width: 1024px) { 
 #parallax-scroll-widget [data-parallax-layer="3"] .parallax__title { 
 font-size: 8em !important; 
 transform: translateY(-10%) !important; /* Positioned lower than desktop */ 
 } 
 } 
  
 /* Medium tablet breakpoint */ 
 @media screen and (max-width: 768px) { 
 #parallax-scroll-widget [data-parallax-layer="3"] .parallax__title { 
 font-size: 6em !important; 
 transform: translateY(0%) !important; /* No upward shift - in center */ 
 } 
 } 
  
 /* Mobile breakpoint */ 
 @media screen and (max-width: 480px) { 
 #parallax-scroll-widget [data-parallax-layer="3"] .parallax__title { 
 font-size: 4em !important; 
 transform: translateY(10%) !important; /* Positioned lower */ 
 } 
 } 
  
 /* Small mobile breakpoint */ 
 @media screen and (max-width: 320px) { 
 #parallax-scroll-widget [data-parallax-layer="3"] .parallax__title { 
 font-size: 3em !important; 
 transform: translateY(20%) !important; /* Positioned much lower */ 
 } 
 } 
 </style> 
 <!-- CSS SECTION END --> 
  
 <!-- JAVASCRIPT SECTION START --> 
 <script> 
 /* 
 ENHANCED PARALLAX SCROLLING EFFECT - JavaScript 
 Handles the parallax scrolling animation using GSAP and ScrollTrigger 
 */ 
  
 // Wait for DOM to be fully loaded 
 document.addEventListener("DOMContentLoaded", () => { 
 // Ensure GSAP plugins are available within our widget 
 const widgetContainer = document.getElementById('parallax-scroll-widget'); 
 if (!widgetContainer) return; 
  
 // Check if GSAP library is loaded 
 if (typeof gsap === 'undefined') { 
 console.error('GSAP library is required for this widget to function properly'); 
 return; 
 } 
  
 // Register GSAP Plugins if available 
 if (typeof ScrollTrigger !== 'undefined') { 
 gsap.registerPlugin(ScrollTrigger); 
 } else { 
 console.error('ScrollTrigger plugin is required for this widget'); 
 return; 
 } 
  
 // Initialize Parallax Layers 
 widgetContainer.querySelectorAll('[data-parallax-layers]').forEach((triggerElement) => { 
 // Create timeline for this parallax group 
 let tl = gsap.timeline({ 
 scrollTrigger: { 
 trigger: triggerElement, 
 start: "0% 0%", 
 end: "100% 0%", 
 scrub: 0 // Smooth scrolling effect 
 } 
 }); 
  
 // Define layers and their movement amounts 
 // Higher yPercent = moves more (appears further back) 
 // Lower yPercent = moves less (appears more in front) 
 const layers = [ 
 { layer: "1", yPercent: 10 },  // Foreground (moves least) 
 { layer: "2", yPercent: 20 }, 
 { layer: "3", yPercent: 35 },  // Text layer (medium movement) 
 { layer: "4", yPercent: 50 }, 
 { layer: "5", yPercent: 65 }, 
 { layer: "6", yPercent: 80 }   // Background (moves most) 
 ]; 
  
 // Apply animations to each layer 
 layers.forEach((layerObj, idx) => { 
 tl.to( 
 triggerElement.querySelectorAll(`[data-parallax-layer="${layerObj.layer}"]`), 
 { 
 yPercent: layerObj.yPercent, 
 ease: "none" // Linear movement 
 }, 
 idx === 0 ? undefined : "<" // All animations start at the same time 
 ); 
 }); 
 }); 
 }); 
 </script> 
 <!-- JAVASCRIPT SECTION END --> 
 </div>
Implementation

Enhanced Parallax Scrolling Effect creates an immersive depth effect with multiple layers that move at different speeds as the user scrolls. This creates a sense of 3D space with foreground elements moving slower than background elements. The component includes responsive text sizing and positioning for optimal display across all device sizes.

HTML Structure

The parallax component uses this structure:

  • The main container parallax-scroll-widget wraps everything
  • The .parallax div contains all parallax content
  • Header section .parallax__header holds the parallax visuals
  • Layer container .parallax__layers holds all parallax layers
  • Each layer is identified with data-parallax-layer attributes (1-6)
  • Most layers use .parallax__layer-img for image content
  • Text layer uses .parallax__layer-title with a heading inside
  • Gradient overlay .parallax__fade creates a smooth transition to content
  • Content section .parallax__content appears below the parallax effect
CSS Styling

The CSS handles visual appearance, positioning, and responsive behavior:

  • Uses absolute positioning for precise layer placement and stacking
  • Implements z-index controls (1-6) for proper layer stacking order
  • Applies responsive text sizing with media queries:
    • Desktop: font-size: 10em
    • Large tablets: font-size: 8em
    • Medium tablets: font-size: 6em
    • Mobile: font-size: 4em
    • Small mobile: font-size: 3em
  • Controls vertical text positioning with transform: translateY() values:
    • Desktop: translateY(-20%)
    • Large tablets: translateY(-10%)
    • Medium tablets: translateY(0%)
    • Mobile: translateY(10%)
    • Small mobile: translateY(20%)
  • Uses overflow handling to contain the parallax effect
  • Implements a gradient fade overlay at the bottom for smooth visual transition
JavaScript Functionality

The JavaScript utilizes GSAP and ScrollTrigger for animation control:

  • Detects when GSAP and ScrollTrigger libraries are available
  • Creates a timeline for synchronized parallax movement
  • Configures ScrollTrigger with:
    • trigger to start animations based on scrolling
    • start: "0% 0%" and end: "100% 0%" to define scroll range
    • scrub: 0 for smooth transitions as scrolling occurs
  • Applies different movement speeds to each layer:
    • Layer 1 (foreground): yPercent: 10 (moves least)
    • Layer 2: yPercent: 20
    • Layer 3 (text layer): yPercent: 35
    • Layer 4: yPercent: 50
    • Layer 5: yPercent: 65
    • Layer 6 (background): yPercent: 80 (moves most)
Customization Options

The parallax effect can be extensively customized:

  • Number of layers: Add or remove layers beyond the default 6 layers
    • Add more image layers with <img data-parallax-layer="7" class="parallax__layer-img">
    • Add additional text layers with <div data-parallax-layer="8" class="parallax__layer-title">
    • Update the JavaScript layer configuration to include new layer speeds
  • Movement amounts: Adjust yPercent values in the JavaScript to change parallax intensity
  • Images: Replace image URLs with your own visuals maintaining the layered structure
  • Text content: Change or add more heading elements in text layers
  • Text styling: Modify font properties, colors, and sizes in the CSS
  • Fade effect: Adjust the gradient colors and opacity in .parallax__fade
  • Animation timing: Modify scrub value to control scrolling sensitivity
Integration Tips

For easier integration:

  • Ensure GSAP and ScrollTrigger libraries are loaded before the component
  • Use unique layer images that have transparent areas to create depth
  • Make sure image layers have appropriate z-index values (foreground higher, background lower)
  • Test responsive behavior across multiple device sizes
  • When adding new layers, follow the existing pattern for HTML, CSS and JavaScript
  • For multiple parallax effects on one page, use unique container IDs and target accordingly
Video Thumbnail

How to edit code using AI →

Resource Details:
Parallax Scrolling Effect creates immersive depth as users scroll your page. Multiple layers move at different speeds, creating a dynamic 3D experience with foreground elements moving slower than background elements. Features responsive text sizing and positioning for all devices, smooth transitions, and a fade overlay for content. Built with HTML/CSS and GSAP/ScrollTrigger for animations. Easily customizable with adjustable layer count, movement speeds, and content placement.

Last Updated:

April 12th 2025

Category:

Image Display

Need Help?

Join Slack
Callum Wells
Callum Wells
i
Creator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.
A black padlock with a keyhole on a white background.

NO-ACCESS

Only for Desktop Users

This page is only available on desktop.

Please Log in on a desktop to gain access.