New Parallax

After i chose to do a parallax scrolling website i started with the stellar parallax.

A stellar parallax works in a way in which different background moves in the same page to give a parallax effect.

To help me achieve this I used the Stellar.js, a jquery plugin by Mark Dalgleish to create easy parallax scrolling sites.

to create the parallax website the content of the websites are the background , sprites or articles and/ images. When with all these different contents move in different speeds from each other when scrolled we get the parallax effect. The scrolling speed is least to the object which is behind as to the one on the front. This works as simple as the when on road the trees and mountains which is far away from us moves slowly than the one near us.

From this the different speed is achieved by <div data-stellar-ratio = “2”> code.

The ratio is relative to the natural scroll speed, so a ratio of 0.5 will reduce the speed by half, a ratio of 1 would have no effect, and a ratio of 2 would cause the content to scroll at twice the speed. This is for all the content in the website. So the numerical value decreases as the layering of the content moves below.

<div data-stellar-background-ratio = “0.5”> is used to specify the speed of the background. Normally the numerical value is esser than 1 since 1 is the normal scrolling speed.

After working on some files i got the back ground moving smoothly but i had some problems with the graphic. When i tried to reposition the graphics the graphic moves and stays at the top of the slide. The different slides are the different backgrounds. I tried to get some tutorials but still had the same problem.

And since it was delaying i taught of trying out some different parallax. Thats the time when i came across scroll path.

The scroll path is a plugin which helps us to define a custom path and move the content along the path. This type of scrolling i likely to go with a map. So i taught of doing an interactive map for a tourist place. Then after consultation with my lecturer got the suggestion of doing a timeline.

After trying out basic trials I’m am now working on the content and the prototype.

some of the reference which uses the same plugin.

http://www.cheapinsurance.com/history/

http://www.etihadairways.com/sites/Etihad/Etihad%20Images/etihad-f1/index.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s