Introducing Parallax Effect😍

Introduction

Hey Koders, NIkhil Here,
And I’m back with another guide in which we are going to understand about Creating Parallax effect with custom way…

What is Parallax Effect?

Commonly we can say Parallax Effect means to apply some behaviour on contents on scrolling…
Here are some example of it… I have collected these images from Google…

What you need?

  • Basic Calculation so that you can manage size, position, color,etc of content at specific location…
  • This tutorial is little bit tricky and not so easy to understand so try to understand

Extension Used

Scroll Arrangement Handlers

Arrangements


So here VerticalScrollArrangement1 is my main area and
VerticalArrangement2 is area where i am displaying name and image
And main thing is Space1 that is height of space must be equal to height of VerticalArrangement2
You’ll learn more in block portion

So now before moving to Blocks lets have look on the preview

Preview

Blocks

Part 1

So first lets have a look on block of on Screen Initialization

So here i have filled height of vertical scroll arrangement and overflowed the VerticalArrangement2…
And on clock1.timer whose time interval is 10ms. i have overshooted the VerticalArrangement2 such that it will hide Space1 present in VerticalScroll Arrangement1…

Part 2

So now lets move toward block of scroll change


We will learn blocks of scroll change part by part…

Part 2.1 - Basic Changes

So let’s discuss about basic behaviour


According to above blocks…
I am managing height of image,width of image and font size with a specific ratio w.r.t. Height of VerticalArrangemnt2. I am managing content till height of VerticalArrangement2 will be 80px whereas
final height will be 60… Try to understand from blocks…

Part 2.2 - Additional Changes

Additional Changes needs when we can manage thing on ration like color, visibility, clickable, font style, text, etc
As you can see that i have changed some properties on Reaching specific height…

Part 2.3 - Instant Scroll to bottom

image

As you have observed that there was a else block for condition if scrollpositon > =140 .
the else part is only if someone will scroll instantly and so fastly so for that i have fixed the properties of content… This will also be executed when content will be moved slowly…

Part 2.4 - Instant Scroll to Top


So now i have used a clock timer to check whether we are on top or not…
this will be very helpful if someone scroll so fastly to move toward top.

What’s main logic?

I’m overlapping the main content on scrolling arrangement.
And if we put the main content inside scroll arrangement then when height will be changed it will automatically moved to 0 scroll position… also you can revert it

Apk

Parallax.apk (5.0 MB)

If you have any question regarding this topic and related to the it you may ask below.

Hope you guys will understand…

Thanks you so much to @Maayur to guide me to create table of contents

Thanks you for your time :heart::heart_eyes:

29 Likes

Awesome guide, really helpful for me…

1 Like

Thanks you so much @Soham_Shah,
but please tell me that is it explanatory?

Yes, you have explained it well, just reading the main logic is even self explanatory :grin:

1 Like

The main thing that i wanted

1 Like

Nice, a very detailed guide :blush:

Btw, there something issue in the poll.

1 Like

Nice Guide! :+1: Keep it up.

1 Like

Thanks you so much @Maayur,
and finally created first table of contents

2 Likes

It helped me.

1 Like

Some of these examples are not parallax. The parallax effect comes before the design. But… :+1:

1 Like

the name was decided in other topic by koders

and yesterday i saw a video where same thing was called parallex
and parallax in case of website is little more animated

Awesome :heart_eyes:
Good Job :+1:

Btw, this topic should be in #guides category.

Easily available example is Chrome where search bar hides after scrolling to a specific position and vice-versa.

It’s guide post

There are some differences between #guides and #guides:resources category.
The latter one is used when you create a guide without using any extension in your project.

1 Like

Awesome Guide & Really Helpful…
Thanks Buddy…

1 Like

I didn’t knew about that…:sweat_smile:
I was thinking #guide: resources is same bas guide

Thanks you so much @Alapjeet

1 Like

please upload demo aia, it will be more useful.

1 Like

i have not posted aia because if i post it then user downoads the aia and directly ask question in PM… and never reads documentation
and without it people will atleast read it :joy:
i am sending you aia PM me

3 Likes

I got it, thanks :star_struck:

1 Like