Introducing Parallax Effect😍

nikzdreamer2001 · July 27, 2020, 10:09am

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

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 …

Soham_Shah · July 27, 2020, 10:10am

Awesome guide, really helpful for me…

nikzdreamer2001 · July 27, 2020, 10:12am

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

Soham_Shah · July 27, 2020, 10:13am

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

nikzdreamer2001 · July 27, 2020, 10:14am

The main thing that i wanted

themaayur · July 27, 2020, 10:16am

Nice, a very detailed guide

Btw, there something issue in the poll.

The_K_Studio · July 27, 2020, 10:16am

Nice Guide! Keep it up.

nikzdreamer2001 · July 27, 2020, 10:17am

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

Piman · July 27, 2020, 10:33am

It helped me.

Rogerio_Rios · July 27, 2020, 10:45am

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

nikzdreamer2001 · July 27, 2020, 10:46am

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

vknow360 · July 27, 2020, 11:32am

Awesome
Good Job

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.

nikzdreamer2001 · July 27, 2020, 11:33am

It’s guide post

vknow360 · July 27, 2020, 11:35am

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.

Alapjeet · July 27, 2020, 11:35am

Awesome Guide & Really Helpful…
Thanks Buddy…

nikzdreamer2001 · July 27, 2020, 11:36am

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

nikzdreamer2001 · July 27, 2020, 11:42am

Thanks you so much @Alapjeet

Piman · July 27, 2020, 12:10pm

please upload demo aia, it will be more useful.

nikzdreamer2001 · July 27, 2020, 12:12pm

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
i am sending you aia PM me

Piman · July 27, 2020, 12:16pm

I got it, thanks