- Parallax Scrolling in Web Design
- Home
- Background and Introduction
- Concepts
- Web Design and Parallax Scroll
- CSS Techniques
- JavaScript Techniques
- jQuery Techniques
- Bootstrap Techniques
- Conclusion
- Useful Resources
- Quick Guide
- Useful Resources
- Discussion
Parallax Scrolling in Web Design - Concepts
Now that we have understood the origin and background of Parallax, let us understand the history and the concept of Parallax scrolling in web design.
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.
Parallax scrolling was employed in the 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.
Examples
The 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 the recent years.
Some examples of websites that employ parallax scrolling are given below −
Bear Grylls
As the animation proceeds, 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 a 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 a bit 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
By now, it should be clear from the definition and the background that parallax scrolling is useful in wide variety of digital media. Some of the applications are parallax scrolling are below −
Game Design
Parallax scrolling is widely used in game design. The character needs to move relative to the background and with the player’s control using mouse and keyboard, the whole experience needs to change. Game design is very primitive yet trendy way of using parallax scrolling.
Websites
To make the user gripped to the website, some dynamic and different experience is important. As you might have noticed from the examples of websites discussed above, parallax scrolling adds to the content because of its representation in an interactive manner.