AdvanceToolbox
Back to Developer Tools

Parallax Scrolling Effect Demo

Preview

Scroll Position: 0px
Scroll to see the parallax effect
.parallax-container {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  perspective: 8px;
  perspective-origin: 0%;
  background-color: #111;
}

.parallax-content {
  height: 1000px;
  transform-style: preserve-3d;
  position: relative;
}


.layer-1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateZ(-1px) scale(1.1);
  z-index: 1;
  background-image: url('https://placehold.co/800x600/87CEEB/FFF?text=Sky');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.layer-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateZ(-3px) scale(1.3);
  z-index: 2;
  background-image: url('https://placehold.co/800x600/8B4513/FFF?text=Mountains');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.layer-3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateZ(-5px) scale(1.5);
  z-index: 3;
  background-image: url('https://placehold.co/800x600/228B22/FFF?text=Forest');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.layer-4 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateZ(-7px) scale(1.7);
  z-index: 4;
  background-image: url('https://placehold.co/800x600/8B5A2B/FFF?text=Ground');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* For JavaScript parallax effect */
.js-parallax-container {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background-color: #111;
}

.js-parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}

Parallax Settings

Lower values create smoother transitions

Layers

Sky

Mountains

Forest

Ground

Drag and drop to reorder layers (top = back, bottom = front)

Higher speed values create more pronounced parallax effect

How It Works

The parallax effect creates depth by moving elements at different speeds when scrolling. Background elements move slower than foreground elements, creating an illusion of depth.

This can be achieved with CSS transforms, JavaScript, or within React using scroll position tracking.