6. My name is
Jimba Tamang
&
I am a,
programmatic Designer.
WP theme Developer.
7. Table of Contents
Chapter : 1
What is Parallax Web Design.
5 reasons why
“Parallax Scrolling Websites” are awesome.
Chapter : 2
Techniques behind the scene.
Things to Remember.
~ Your questions ~
The history of the website is not that much longer but it have been changed and improved in drastically. In August of 1981, when the first website published in World Wide Web history, nobody can assumed that the website will have interactive graphic contents. But just between the approximate 30 years of time period from 1981s to 2011, everything have been changed. Now we have the most effective and interactive websites this days and the result is here: The Parallax Web Sites.
Ok, you might think that who is this guy promoting the movie trailer here in WordCamp?We have a characters here, we have storyline, climax, sounds everything that required to make a movie but this is not the movie.
While talking about the parallax scrolling, this is a very special technique in Computer Graphic, wherein, the multiple layers moves all together but in different speed of motion. For example the background image moves slower then the foreground image and that creates the illusion of depth with 2d concept. The concept of this effects have been used by 2d video games since 1980s.
In traditional websites, you can just have the images, text or video content to demonstrate your product and these are just the static way. There is no more user interaction. Now technology advancement allow your user to explore your product in your website with very interactive way.Let’s see the practical example here.
This is eone-time.com and they are demonstrating their product in 3d mode. They have very plain design and just focusing on the product.In this page, when you scroll down, you will see the product rotating in 360 degree along with your scrolling speed.
As a designer, developer or website owner, your primary target will be hold your visitor as long as you can. But this is only possible when your website is really interesting and attractive.Parallax scrolling helps you to get this mission. While using this effect to your site the most powerful thing is that you are making your visitors in charge to your website. You are giving the full authority to control the speed of animations so that they can engage easily. Now your are making your visitors more positive and open to your message.
This company produce the fashion clothes and In this website, they are presenting different dresses to the same model in very effective way.When you scroll down your page, you will notice that you are changing the dresses of model while all other elements of the site remain constant even the model.This is very simple, effective and engaging way.
Now a days, people are very busy. They wanted to learn everything very quickly. So probably they don’t have a time to read your 10 pages long boring story.But what else, if you can tell your story in very interesting way within a minute? If you ask me if that possible? Then I would probably say that, yes it is possible though Parallax Scrolling Technology.
The site “Every Last Drop” is promoting the problem of wasting water while conversing it for various propose.This site has a little character. When you scroll down the page, you will see that the character is going about his daily life tasks like we do every day from our morning time but he is wasting the water somehow, some where. Like he wakeup at the morning and goes to the shower, he is wasting the water there. The site is saying that when you do the 5 minutes shower you will waste about 40 liters water and when you do the full bath, you will loose 80 liters of water. having coffee, he goes to the office but even in the office he use the water in different ways and wasting as well.Through this you will able to learn more about how we are wasting the water in our daily lives even without realizing it. And though all these interesting effects of graphic, you will get the message about the importance of every last drop of water.
I think this is one of the best features that we can achieve with parallax scrolling. The fact is that in the Parallax Scrolling sites, when you scroll, you will see something is happening, and when you scroll more, something else happening. This way, you are eager to know what is next? And if suddenly there is an Action button, like enter here to read more, Click me etc, I am sure you will click on that because you are curious to know more and more.
The Tinke is the gadget for fitness and wellness monitoring. In this site, the users are redirecting to the the Call to Action button through their story.When you scrolldown the site, it will explain you how this gadget works, what it do actuall, why it is unique and after briefing you all the advantages of this gadget, you will be redirect to the Call To Action button “Buy” at the end of the page.
Here in the absolute example,We have a viewport with 800px of height and the document with 1000px of height. Middle of the document, we have a Greenbox called Box A. Now we are going to do something here. While scrolling down the page, we are going to change the color of the Green box to Blue.The top level of the document is align to the top of view port, it means while using skrollrplugin, we will clal the position of document: data-0. When you scroll down the page, now top of the document cross the view port. Like if you scroll down to 200px below, the position will be data-200 and we can change the color of the box to blue now in this condition. The condition of 0 to 200.
