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

Hey friends, I will be showing you how to create a simple multi-layered illustration with depth that transitions into the content in a unique way. We’ll be using a technique that involves CSS and pure JS (no jQuery!).

The tutorial is for beginners with basic Javascript and CSS knowledge, so I will be explaining most of the things and link to external sources. (Edit: If you’re looking for information on how to start learning Javascript I wrote an article about it.)

Preview final effect

Prepare the illustration

Let’s start by cutting the painting into layers. Best-case-scenario would be a picture that you painted or if you have access to a source file with all the layers. …

About

Patryk Zabielski

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