Presentation and clarification

Last week after had an idea of changing my research works from stellar parallax to scroll path i had a presentation. During my presentation i presented on the basics of parallax and how it works. Then i did on the stellar js. Explained what stellar js does and explained my issues i faced while doing the experiments. Then i proposed my new idea of working with the scroll path. But after the presentation my lecturer had few questions. First he asked me why i wanted to change my research works for which i explained to him my problems which i faced. Then he asked why i chose scroll path as an alternative. From there i got where he was going. Actually what parallax is that it makes the web page’s content move in different pace/speed from one another there by creating an illusion of motion. But my second choice which was the scroll path just helps the designer create a custom path in which the content of the page moves , which does not come under parallax scrolling. This was another type just a scrolling effect. There i realized i got confused between the both. Then he asked my to do some in depth research on this topic. Since i wanted to achieve the parallax scrolling using the stellar js he suggested me to research on other possibilities to achieve the same result. Then i went through other possible ways like using css and flash . Then i went through other types of parallax scrolling which is similar to the stellar js. like curtain.js , parallax.js.  

Then i chose parallax the parallax scrolling which looked similar to what i wanted to achieve in stellar.js .

So now i am working on the parallax scrolling to understand on how it works. 

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

Understanding Parallax

After looking at some of the parallax websites i was sure of doing a parallax website because i did not go through this in my previous semesters. when i consulted my lecturer and told him that i wanted to parallax scrolling websites and showed him the references he asked me what all elements are there in these websites? how are these done? i was sure that it uses some kind of jqurery but i did not know what. So he said that my researches weren’t enough and i had gone through only these random parallax websites and not one how these are done and how it works. thats then i started to research on how these parallax websites are done.

so i started to look out for tutorials on designing a parallax website. this is the time when i encountered some websites.

1) http://richardshepherd.com/smashing/parallax/background.html  – this website is a simple prallax website which explains what each parallax effect does. On reading this i got a link to another website “github“.

then i went into the smashing magazine’s website. here i read about the making of the Nike parallax website, which i mentioned in my previous post.

i learnt that HTML5 is not fully supported in all browsers without JavaScript.

2)  http://www.splashnology.com/article/parallax-scrolling-tools-articles-and-tutorials/4678/ – then i came to this website. this is like a one stop website where i found all the different parallax jscripts for all those examples which i talked about before.

3) then i tried to download the stellar.js with vertical scrolling to try working on it. i then used http://markdalgleish.com/projects/stellar.js/docs/ website for my reference on what and how the scripts work.

Reference of Parallax websites

Its been a very long time since i wrote my first blog.

After the first brief on experiential design we were asked to choose a topic and do some experiments in it and come up with a small project. While in the brief my lecturer showed some websites which uses the prallax scrolling (both horizontal and vertical) , flash websites. As i said  started research on parallax web sites because this feature caught my eye on the first shot. So i taught doing something with this would be fun.

So after the class i just started to brows for parallax websites.

Some reference .

1) http://www.nike.com/jumpman23/aj2012/  – this website is from the Nike. i liked the transitions and the colors. Since i my likes are towards 3d animation this took my attention.

2) http://www.tokiolab.it/#/  – this is also another parallax website which uses lots of typography.

3) http://krystalrae.com/ – the gallery page where the girl’s dress changes while u scroll with the girl static is attractive.

4)http://www.intacto10years.com/index_start.php – this website is a timeline of Intacto a design firm . i like how they symbolised their journey with that of a rocket.

5) http://www.iutopi.com – this was created by freelance designers for their promotion. i like the concept and illustrations.

6) http://benthebodyguard.com/index.php – this is the official website for Ben the Bodyguard , an iphone app. i really like this website where the user takes a walk with Ben where he promotes himself. the illustrations and animation that is happening at the background is attractive.

EXPERIENTIAL DESIGN RESEARCH

For my Experiential Design i started with viewing parallax websites. These are the websites wherein the background moves in a different pace than the forground creating a depth of illusion.

http://www.tokiolab.it/#/ –

http://www.nike.com/jumpman23/aj2012/ – nike

http://krystalrae.com/

http://www.intacto10years.com/index_start.php

http://www.ap-o.com – slider

http://www.iutopi.com

walk with the man – http://benthebodyguard.com/index.php