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 below – 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!
Parallax Preview GIF
If you have any questions or suggestions for improvements please let me know in the comments down below.
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.