Parallax scrolling
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 of distance.[1] The technique grew out of the multiplane camera technique used in traditional animation[2] since the 1930s.
Parallax scrolling was popularized in 2D computer graphics with its introduction to video games in the early 1980s. Some parallax scrolling was used in the arcade video game Jump Bug (1981).[3] It used a limited form of parallax scrolling with the main scene scrolling while the starry night sky is fixed and clouds move slowly, adding depth to the scenery. The following year, Moon Patrol (1982) implemented a full form of parallax scrolling, with three separate background layers scrolling at different speeds, simulating the distance between them.[4] Moon Patrol is often credited with popularizing parallax scrolling.[5][6] Jungle King (1982), later called Jungle Hunt, also had parallax scrolling,[7] and was released a month after Moon Patrol in June 1982.[8]
Cloud layer - back
Vegetation layer - middle
Ground layer - front
Animation
In the following animation, three layers are moving leftward at different speeds. Their speeds decrease from front to back and correspond to increases in relative distance from the viewer. The ground layer is moving 8 times as fast as the vegetation layer. The vegetation layer is moving two times as fast as the cloud layer.
Parallax scrolling in Web design[edit]
One of the first implementations of parallax scrolling in the browser was created and shared in a blog post by web developer Glutnix in 2007, this included example code and a demo using JavaScript and CSS 2 that supported Internet Explorer 6 and other browsers of that era.[18][19]
In a February 2008 tutorial on web design blog Think Vitamin, web designer Paul Annett explained how he had created a parallax effect using CSS and without JavaScript for the website of Silverback, a usability testing app.[20] He demonstrated the effect on stage at SXSW Interactive 2009, with the help of audience participation and a man in a gorilla suit.[21][22]
Advocates argue it is a simple way to embrace the fluidity of the Web, citing the Silverback website as the first example they had come across.[23]
Proponents use parallax backgrounds as a tool to better engage users and improve the overall experience that a website provides. However, a Purdue University study, published in 2013, revealed the following findings: "... although parallax scrolling enhanced certain aspects of the user experience, it did not necessarily improve the overall user experience".[24] A undated study occurring during or after 2010 by Dede Frederick, James Mohler, Mihaela Vorvoreanu, and Ronald Glotzbach noted that parallax scrolling "may cause certain people to experience nausea."[25]