Updated on October 05, 2020
In this members-only tutorial we'll walk through how to create a 3d gallery using Oxygen's gallery component where the images are moving relative to the cursor position.
This type of parallax gallery where it feels like we're 'peering through frames at images' was inspired by the portfolio of Thomas Bosc.
I find that having the moving elements contained behind fixed structures is a smart way to implement parallax. It means we avoid some of the usual problems that can occur when elements are moving on the page at different speeds. I covered a similar effect with a slider in a previous tutorial.
Here the images definitely feel like they are behind the gallery, no elements end up overlapping and the overall structure is neat thanks to entire gallery being confined into a space. It feels surprisingly predictable and user friendly even though there are many different sized elements moving positions at different speeds, which would usually seem chaotic.
Applying to the Gallery in Oxygen
We'll go through how to implement this effect on galleries created with Oxygen's built in gallery component.