Parallax Beginner Tutorial: A Cool 3D Effect With HTML, CSS, JavaScript

I found this great Photoshop tutorial by Dev Ed which inspired me to create my own implementation of a parallax effect based on his video in order to create more depth to websites and hey – a bit of eye candy never hearts, right? :-) So, here is my implementation below.

As you can see in the gif above – every time the user scrolls down the bush in bottom left as well as the house in the bottom right move at a different speed compared to the background which creates the overall illusion of depth. If you want to learn how to achieve this effect have a look at my video tutorial down below :-)

Let me know how you like it and if you have any similar or even better cool looking eye candy effects which you like using on your websites. I’d love to see them!

Video Tutorial

In this video I will guide you through a step-by-step tutorial how to create the parallax effect above. We will use just HTML, CSS and JavaScript. No external libraries. No React, Angular or Vue. Plain and simple. If you prefer a less minimalistic solution you can also check out this video by Dev Ed in which he does the same thing but does heavy usage of external libraries. The benefit of his approach is more convenience while coding but at the same time you will have less control over the code, rely on external dependencies and probably won't learn as much :-)

If you have any questions or suggestions for improvements please let me know in the comments down below.

Links

Here you can find couple of links related to my video including the source code as well as a live demo. If you want feel free to follow me on Twitter. I’m very active there and post regularly on stuff related to web dev in general, React and Node.

• Source code on GitHub: https://github.com/valnub/3d-depth-example
• Live demo: http://www.timo-ernst.net/misc/3d-depth-effect
• My Twitter: https://www.twitter.com/timo_ernst
• My Blog: https://www.timo-ernst.net