Hi everyone 
,
Today I wanted to share with you a way to achieve the ‘hide on scroll’ / parallax effect.
In the various communities, I’ve seen many guides, but none of them quite achieved the effect I was looking for.
I wanted an effect like the one requested by this user, who uses the Play Store as an example, and that’s where it all started.
Desginer
So, first of all, let’s create a main layout (VA_Main).
Inside it, we’ll create two layouts: one that will contain the scroll arrangement VSA_BottomLayout, and one that will contain the top part VA_TopLayout(I know, it’s strange that it goes underneath, but we’ll see why later).
Then we add a Decoration component and the amazing extension by
colintree
One important thing about the extension I used in my project.
This extension actually imports two components:
- VerticalScrollHandler
- HorizontalScrollHandler
And since I like to save on extensions, I took the liberty of modifying it so that it only adds VerticalScrollHandler.
Just to clarify: I’m not an extension developer, and I didn’t fully rewrite the code, this is probably not the proper way to do it.
In the VA_TopLayout, we create two horizontal arrangements (but they can be any type of layout).
HA_Line is purely aesthetic and can be omitted.
In VSA_BottomLayout, you can insert anything you want, just note that I’ve added a space at the beginning which is very important.
Alright, everything is ready, now let’s take a look at the blocks.
Blocks
When the screen initializes, we register VSA_BottomLayout and call the initializeLayout function, which sets up our components.
This function simply
- sets the space we previously added to the height of
VA_TopLayout, - sets the height of
VSA_BottomLayoutto matchVA_Main, - and finally sets the top margin of
VA_TopLayoutto the negative value ofVA_Main’s height
(so thatVA_TopLayoutis positioned where it should be, on top).
For anyone interested, here’s why the layouts are arranged in reverse order.:
Kodular handles layout stacking in a way that the layout placed lower in the component tree is rendered on top when layouts overlap.
If you create 3 layouts, the first one will be behind the second, the second behind the third, and so on.
So, I placed theTopLayoutafterVSA_BottomLayoutin the design and then I adjusted its margin so that it visually appears in front of theBottomLayout.
Let’s skip the parts
if rotationChanged
and
if scrollY <= VerticalScrollHandler.MaxScrollPosition,
which I’ll explain later.
We start by initializing a local variable px, which represents how many pixels we’re scrolling.
If scrollY is less than the previously saved lastScrollY, it means we’re scrolling up otherwise, we’re scrolling down.
So px will be a positive or negative number depending on the scroll direction.
The global variable margin is constrained within the range from 0 to HA_HideOnScroll.Height, and we’ll use it to adjust its top margin.
- If
margin + pxis greater thanHA_HideOnScroll.Height, setmargintoHA_HideOnScroll.Height. - If it’s less than 0, set
marginto 0. - Otherwise, set
margintomargin + px.
Next, we apply the margin by setting it to the negative value of VA_Main.Height + margin.
Finally, we save the current scroll position in lastScrollY.
if rotationChangedis a little trick I came up with, because in case of screen rotation,lastScrollYwould be incorrect, since portrait and landscape modes have different scroll positions when change orentation.
when Screen.OrientationChangedwe simply have this.
if scrollY <= VerticalScrollHandler.MaxScrollPositionis used because the scroll has a bit of tension and tends to ‘bounce’ at the end.
Without this condition, part ofHA_HideOnScrollcould remain visible.
The result
Finished
HideOnScroll.aia (70.7 KB)
I’d like to thank all the users who tried to recreate the effect and gave me inspiration, as well as those who made requests and motivated me to find a solution.
