(Video included in link)
I saw it on Behance and basically, I really wanted to make it myself in Roblox.
The general concept of it is pretty simple. It uses TweenService in order to seamlessly glide between the individual elements. Each element has three layers: a foreground, a middleground, and a background.
The background consists of the element itself, with the gradient and the faded “NIKE” text in the background. The background doesn’t have any special tweening for the parallax effect, because it should glide with the element itself.
Fun fact: The gradient along with the element itself (white bottom included) is all only TWO images! Thanks to trusty 9-slice, I was able to use the same image for the whole element as I did the background of the gradient (I use ImageRectSize to cut off the rounded corners of the bottom). Then the second image is the same thing except it has a white-to-transparent gradient so that way I can use ImageColor3 to change the color of that while allowing the background color to seep through. Boom, instant infinite (281 trillion, if anyone is counting) gradients with only two images!
Back to the parallax, the middleground layer consists of the text and the wish list button. These, when offscreen, are tweened from a + 0.25 (or - if from the left) UDim position.
The foreground layer is simply the image of the shoe itself, which is from ± 0.75.
Here’s a nice image to help visualize this offset of layers. when the elements are offscreen.
The parallax effect happens because all the tweening happens within the exact same time period (0.75 seconds), so in order for the tween to happen within the time across a larger distance, it has to move faster. This helps give the illusion of depth.
(You could think about it the physics route, velocity = distance / time)
All in all, it’s a really appealing modern effect that hopefully you can incorporate into your game’s shop or something. I may make this a free model, but I’d have to make a few tweaks for easy use.
