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

Image for post
Image for post
The Painting used for the parallax effect, made by Patryk Zabielski.

Prepare the illustration

Image for post
Image for post
Visualized concept of layers in 3D Space
Image for post
Image for post
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

Senior Product Designer & Front-end Developer · Head of Design, UX @ Jerry Inc. · www.patkzbk.com · www.dribbble.com/Zabielski

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store