Parallax Effect In Kodular (Step-By-Step Guide)

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

Screenshot (16)

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

blocks (9)
Initialize Global ID Variable for Dynamic Posts.

Main Part for Effect

blocks (8)

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. :sweat_smile:

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

Suggestions are Appreciated :slightly_smiling_face:

30 Likes

Excellent guide​:fire::fire:

1 Like

Superb Guide @Kshitij

1 Like

Awesome Guide :+1:

1 Like

this guide is aldready made on community with great explanation
but
this is a copy .
mods pls look into it
well guide is gut
and even share different effects in guide else it is a copy

From where do you find it to be copied?
I had given 1 aia to @The_Revenger_Studios on his topic


I had customized that same app and made a guide on it. (That app was mine)
You can take a look if you don’t know…
And if you find it copied then please tell me how?

ok see

His is totally different than mine…
Please check before you post such things.

1 Like

I want the owner of this topic to clarify this doubt whether it is copied or not.

Please tell @nikzdreamer2001

Is Suspended from Community.

1 Like

Sorry, I didn’t know that.
Well @themaayur can you tell me if this guide is copied.
I don’t want more #off-topic

1 Like

Nicely Done :+1::+1:

1 Like

really good and tricky.

1 Like

Great guide :+1:t2:

1 Like