ELEMENTS

Parallax

Parallax scrolling effects and backgrounds.

Documentation

Add data-parallax attribute to enable JavaScript-based parallax scrolling.

  • - data-parallax="0.5" - Speed multiplier (0.1 = slow, 1 = normal scroll)
  • - Use on background elements inside a container with overflow: hidden
  • - Works better than CSS background-attachment: fixed on mobile

Basic Parallax Background

Parallax Effect

Scroll to see the background move

Content Section

This is regular content between parallax sections. Scroll up and down to see the parallax effect on the backgrounds above and below.

The parallax creates a sense of depth and makes the page feel more dynamic and engaging.

Gradient Parallax

Cyan to Blue

Gradient parallax background

Multi-Layer Effect

Multiple Layers

Three overlapping parallax layers create depth

Text with Parallax Background

Build Faster

EnrichedStarterKit helps you create beautiful websites with less effort. Pre-built components, optimized for performance.

Split Layout Parallax

Left Panel
Right Panel