Skip to main
Table of Contents

Parallax Image

This page demonstrates a scroll-driven image parallax effect using a simple wrapper + image pattern and a small vanilla JavaScript controller. The examples below vary the extra image scale to show how travel distance changes.

This page uses example spacers to create controlled scroll distance for observing the demo behavior.

  • Scroll the page and watch each image move inside its clipped wrapper.
  • Higher data-scale values increase the available travel distance.
  • The script recalculates image height on load, resize, and orientation change.

Tip: This effect is easiest to evaluate with smooth scrolling enabled and prefers-reduced-motion disabled.

Parallax Renders

These renders all use the same image and script. Only the wrapper metadata changes.

Default Scale (200% Height)

data-scale omitted. The script defaults to 1 extra wrapper-height worth of image.

Mountain lake landscape used for parallax image demos.

Code for This Render

<div class="parallax">
  <img src="/asset/image/content/example/parallax-image/landscape-mountains-nature-lake.0-25x.png" alt="">
</div>

Scale 250%

data-scale="1.5" gives more image height and more visible travel.

Mountain lake landscape used for parallax image demos.

Code for This Render

<div class="parallax" data-scale="1.5">
  <img src="/asset/image/content/example/parallax-image/landscape-mountains-nature-lake.0-25x.png" alt="">
</div>

Scale 300%

data-scale="2" pushes the image higher still. This gives more movement, but can look excessive on some layouts.

Mountain lake landscape used for parallax image demos.

Code for This Render

<div class="parallax" data-scale="2">
  <img src="/asset/image/content/example/parallax-image/landscape-mountains-nature-lake.0-25x.png" alt="">
</div>

How the Effect Works

  1. The wrapper clips overflow and defines the visible viewport for the image.
  2. The image is absolutely positioned and centered horizontally.
  3. The script computes an oversized image height based on wrapper height and image aspect ratio.
  4. On scroll, the script maps wrapper visibility through the viewport to a vertical translation amount.
  5. Only visible wrappers are updated during scroll for better performance.

Code for the Page Script

This page uses a single controller that recalculates on load/resize and updates visible parallax wrappers on scroll.

// asset/js/content/example/parallax-image.js
// - find all .parallax elements
// - recalc image height from wrapper height + data-scale
// - on scroll, update only visible wrappers
// - use requestAnimationFrame to batch DOM writes

Files for This Page

  • Page HTML: in/example/parallax-image.html
  • Page SCSS: in/asset/css/content/example/parallax-image.scss
  • Page JS: in/asset/js/content/example/parallax-image.js
  • Source image (processed): in/asset/image/content/example/parallax-image/landscape-mountains-nature-lake.0-25x.png
  • Source image (original): in/asset/image/content/example/parallax-image/_resource/landscape-mountains-nature-lake.jpeg

Attribution