Hi Koders,
This is Kshitij and this is my first guide. In this guide, I will tell you how to make parallax scroll effect in kodular. Before we begin-
Please tell me if you find any error I will make changes to my topic.
Step-1 (Add components and extensions)
Designing Of Screen
Header
You need to make a Header - Horizontal Arng
Design it yourself because I will focus on the main content only however in the aia header is included.
Main Content
Then make the Main Content - Vertical Scroll Arng
In Main Content make Parent Profile Box - Vertical Arng
Set a background image for Parent Profile Box
Then make Overlay Profile Box - Vertical Arng
Then add the info you want in my case it was User_info
Posts
Then make the Posts - Vertical Arng
Just design it as you want because it will be dynamic.
Extensions Used
KIO4_Gradient
Leo Profile View
Scroll Handler
Dynamic Components
Step 2 (Coding)
Screen Initialization
Leo Profile View
Create a Profile View by defining Profile Image in Leo Profile View Horizontal Arng
KIO4 Gradient
Add a gradient to Overlay Profile Box Be sure to add similar colour like mine except black to match your theme. Vertical Arng
Scroll Handler
Register Main Content VSA - Vertical Scroll Arrangement
Few Posts (Dyanimc)
Refer to 5 Different Listview Guide by @themaayur.
Initialize Variable
Initialize Global ID Variable for Dynamic Posts.
Main Part for Effect
On Event V-Scroll
On Vertical Scroll call Animation Utilities. Overshoot Vertical- Parent Profile Box
Start Position 0
End Position Get ScrollY*1.2
Duration 0
Tension 0
Procedure for Posts
Refer to @themaayur Guide.
ScreenShots
Results Video
That’s All You Need To Do
Download
APK Slider.apk (9.6 MB)
AIA Parallax_Scroll_Effect.aia (4.5 MB)
Don’t go on names I forgot to change my app name.
Special Thanks
Extension Developers
KIO4_Gradient
Leo Profile View
Scroll Handler
Dynamic Components
@themaayur Guide for 5 Different Listviews using Dynamic component Extension | Guide
And Kodular for such a great platform