Web Design in Parallax Scrolling
This chapter will discuss the origin and concepts of Parallax Scrolling in detail with the help of suitable examples. You will also learn the definition and tools required for Parallax Scrolling.
Origin
Let us deep dive into the history of parallax scrolling. First, let us discuss what the word parallax means. The word parallax comes from the Greek word (parallaxis), which means alternation.
If we are viewing an object from an angle, the object will appear in a specific manner. But if you are moving the same object from different positions, there will be an apparent movement of objects. This phenomenon is referred to as Parallax.
Definition
According to Wikipedia, Parallax scrolling is a technique in computer graphics where background images move past the camera more slowly than foreground images, creating an illusion of depth in a 2D scene and adding to the sense of immersion in the virtual experience.
The parallax scrolling was employed in early days of animation. Many of the animation studios like Disney, used multiplane cameras to achieve the parallax effect.
As the computer graphics technologies evolved along with the cutting edge frameworks like JavaScript, web designers and developers can now build sites with a rich experience. Although parallax scrolling started with a couple of layers, it was taken to the next level with scroll bars in computers. The technique remained the same, but due to its application for Scrolling, a unique experience was created.
Tools required
Throughout this tutorial, we use Notepad, which comes bundled with any edition of Microsoft Windows. We will not be using any high functionality Integrated Development Environment (IDE).
Examples
Parallax scrolling is extensively used in modern web sites. As parallax scrolling can be implemented for mobiles as well as desktop sites in one go, the popularity of such sites has skyrocketed in recent years.
Some examples of websites that employ parallax scrolling are given below −
Bear Grylls
As the animation proceeds ahead, you will be able to see how the website content is going interactive. As you scroll ahead, more and more information will reveal.
Make Your Money Matter
To introduce the reader to the benefits of credit union, this site takes you through a storyline. As you scroll ahead, information is revealed in a unique way.
InfoQuest Infographic
The journey of an employee to find critical information at his workplace is depicted using the scrolling experience.
GitHub 404
This is different from the usual parallax experience, the object at the top of screen moves as you hover the mouse pointer over it.
Applications of Parallax Scrolling
Some of the applications are parallax scrolling are given below −
Game Design
Parallax scrolling is widely used in game design, where the character needs to move relative to the background and with the players control using mouse and keyboard, the whole experience needs to change. Game design is very primitive yet trendy way of using parallax scrolling.
Websites
You can make your users stick to your website using some dynamic and different experiences. As you might have noticed from the examples above, parallax scrolling adds to the content because of its representation in an interactive way.