12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on May 18, 2020

Applying 3d Parallax Effect to Galleries in Oxygen

David Browne

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.

Live Demo

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.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right