Parallax!
Since the first time I saw this effect I have tried to replicate it using minimalist methods. Use less because it is more
I have looked into a lot of tutorials online and found many samples, took to CodePen and started this practice project for my personal portfolio. I will continue to explore other formats and layouts to accomplish a cool, engaging parallax effect.
From one of the CodePen pages exploring this effect:
“Parallax is simply the effect of depth because objects in the background move more slowly than objects in the foreground. Because we have 3d transforms and perspective objects in the background are smaller and move more slowly than objects in the foreground. If you lock the perspective to the view that is scrolling and preserve that perspective on child elements, a parallax effect will be visible. While these objects move at different speeds they are also scaled differently so this effect can be inverted using the
scale()
function of CSS transforms so things still move as if they are on different planes but the perspective no longer has impact on the scale of the element. All of this math sounds complicated, so it is bundled into easy to use mixins that can be applied with a given depth. You can also use this alongside other 3d transforms and the perspective shifts will happen to 3d boxes and things.” Source