How to make Multi-Layered Parallax Illustration with CSS & Javascript

The Painting used for the parallax effect.

Prepare the illustration

Visualized concept of layers in 3D Space
The Version on the right has a slight line added that will give us better transition into next section.

Get codin’

Preparations

#hero
.layer{“data-type” => “parallax”}
.layer{“data-type” => “parallax”}
.layer{“data-type” => “parallax”}
.layer{“data-type” => “parallax”}
.layer{“data-type” => “parallax”}
#hero {
height: 800px;
overflow: hidden;
position: relative;
}
.layer {
background-position: bottom center;
background-size: auto;
background-repeat: no-repeat;
width: 100%;
height: 800px;
position: fixed;
z-index: -1;
}
.layer-01 {
background-image: url(‘input_link_to_image_here');
}
.layer-02 {
background-image: url(‘input_link_to_image_here');
}
// etc.
#hero
.layer.layer-01{“data-type” => “parallax”}
.layer.layer-02{“data-type” => “parallax”}
.layer.layer-03{“data-type” => “parallax”}
.layer.layer-04{“data-type” => “parallax”}
.layer.layer-05{“data-type” => “parallax”}

Javascript time

window.addEventListener ‘scroll’, (event)
window.addEventListener ‘scroll’, (event) ->
topDistance = @pageYOffset
window.addEventListener ‘scroll’, (event) ->
topDistance = @pageYOffset
layers = document.querySelectorAll("[data-type='parallax']")
#hero
.layer.layer-01{“data-type” => “parallax”, "data-depth" => "0.10"}
.layer.layer-02{“data-type” => “parallax”, "data-depth" => "0.20"}
.layer.layer-03{“data-type” => “parallax”, "data-depth" => "0.50"}
.layer.layer-04{“data-type” => “parallax”, "data-depth" => "0.80"}
.layer.layer-05{“data-type” => “parallax”, "data-depth" => "1.00"}
for layer in layers
depth = layer.getAttribute(‘data-depth’)
movement = -(topDistance * depth)
translate3d = 'translate3d(0, ' + movement + 'px, 0)'
layer.style['-webkit-transform'] = translate3d
layer.style['-moz-transform'] = translate3d
layer.style['-ms-transform'] = translate3d
layer.style['-o-transform'] = translate3d
layer.style.transform = translate3d

Mobile

#hero-mobile {
display: none;
background: url(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/full_illustration.png") no-repeat center bottom / cover;
height: 320px;
}
@media all and (max-width: 640px) {
#hero {
display: none;
}
#hero-mobile {
display: block;
}
}

Preview final code

Head of Design, UX @ Jerry Inc.