Content deleted Content added
Rescuing 2 sources and tagging 0 as dead.) #IABot (v2.0.9.5 |
|||
| (41 intermediate revisions by 25 users not shown) | |||
Line 1:
{{Short description|Technique in computer graphics}}
{{
{{VG Graphics}}
'''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 computer graphics|2D]] scene
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).<ref name=purcaru>{{cite web|url=https://books.google.com/books?id=lB4PAwAAQBAJ&pg=PA181|title=Games vs. Hardware. The History of PC video games: The 80's|first=Bogdan Ion|last=Purcaru|date=13 March 2014|publisher=Purcaru Ion Bogdan|via=Google Books}}</ref> 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.<ref>{{cite book |last1=Uduslivii |first1=Igor |title=iPhone Game Blueprints |date=26 December 2013 |publisher=[[Packt Publishing Ltd]] |isbn=978-1-84969-027-0 |page=339 |url=https://books.google.com/books?id=C5R4AgAAQBAJ&pg=PT339}}</ref> ''Moon Patrol'' is often credited with popularizing parallax scrolling.<ref>{{cite web|title=Chronology of the History of Video Games: Golden Age|url=https://www.thocp.net/software/games/golden_age.htm|first=Ted|last=Stahl|date=2006-07-26|access-date=2009-07-06|archive-url=https://web.archive.org/web/20090716033610/http://www.thocp.net/software/games/golden_age.htm|archive-date=2009-07-16|url-status=live}}</ref><ref>{{cite web|url=https://www.gamesradar.com/f/gamings-most-important-evolutions/a-20101008102331322035/p-3|title=Gaming's Most Important Evolutions|page=3|publisher=[[GamesRadar]]|date=October 8, 2010|access-date=2011-04-27|archive-date=2021-04-08|archive-url=https://web.archive.org/web/20210408070358/https://www.gamesradar.com/f/gamings-most-important-evolutions/a-20101008102331322035/p-3|url-status=dead}}</ref> ''[[Jungle Hunt|Jungle King]]'' (1982), later called ''Jungle Hunt'', also had parallax scrolling,<ref>{{cite web|title=Jungle Hunt Was a Terrible Waste of Quarters|url=http://retrovolve.com/jungle-hunt-was-a-terrible-waste-of-quarters/|access-date=2015-03-27|archive-url=https://web.archive.org/web/20150402132140/http://retrovolve.com/jungle-hunt-was-a-terrible-waste-of-quarters/|archive-date=2015-04-02|url-status=live}}</ref> and was released a month after ''Moon Patrol'' in June 1982.<ref>{{cite book |last1=Akagi |first1=Masumi |title=アーケードTVゲームリスト国内•海外編(1971-2005) |trans-title=Arcade TV Game List: Domestic • Overseas Edition (1971-2005) |date=13 October 2006 |publisher=Amusement News Agency |language=ja |___location=Japan |isbn=978-4990251215 |pages=13, 42 |url=https://archive.org/details/ArcadeGameList1971-2005/page/n14}}</ref>
== Methods ==
Line 37 ⟶ 41:
=== Raster method ===
<!-- linked from redirect [[Raster effect]] -->
In [[raster graphics]], the lines of pixels in an image are typically composited and refreshed in top-to-bottom order with a slight delay (called the [[horizontal blanking interval]]) between drawing one line and drawing the next line.
Games designed for older graphical chipsets—such as those of the [[History of video game consoles (third generation)|third]] and [[History of video game consoles (fourth generation)|fourth]] generations of video game consoles, those of dedicated [[Handheld TV game|TV game]]s, or those of similar handheld systems—take advantage of the raster characteristics to create the illusion of more layers.
Some display systems have only one layer. These include most of the classic 8-bit systems (such as the [[Commodore 64]], [[Nintendo Entertainment System]], [[
Some platforms (such as the Commodore 64, [[Amiga]],
More advanced raster techniques can produce interesting effects. A system can achieve a very effective depth of field if layers with rasters are combined; ''[[Sonic the Hedgehog (1991 video game)|Sonic the Hedgehog]]'', ''[[Sonic the Hedgehog 2 (16-bit)|Sonic The Hedgehog 2]]'', ''[[ActRaiser]]'', ''[[Lionheart (video game)|Lionheart]]'', ''[[Kid Chaos (video game)|Kid Chaos]]'' and ''[[Street Fighter II]]'' used this effect well. If each scanline has its own layer, the ''[[Pole Position (video game)|Pole Position]]'' effect is produced, which creates a pseudo-3D road (or a pseudo-3D ball court as in ''[[NBA Jam (1993 video game)|NBA Jam]]'') on a 2D system.
If the display system supports rotation and scaling in addition to scrolling—an effect popularly known as [[Mode 7]]—changing the rotation and scaling factors can draw a projection of a plane (as in ''[[F-Zero (video game)|F-Zero]]'' and ''[[Super Mario Kart]]'') or can warp the playfield to create an extra challenge factor.
Another advanced technique is row/column scrolling, where rows/columns of [[Tile engine|tiles]] on a screen can be scrolled individually.<ref>{{cite web|url=
==
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.
<gallery>
Image:Sky back layer.png|Cloud
Image:Vegetation (middle layer).png|Vegetation
Image:Ground (front layer).png|Ground
Image:Parallax scrolling example scene.gif|Animation
▲File:Parallax_scroll.gif|''[[2.5D]] parallax scrolling'' of city buildings.
</gallery>
== Parallax scrolling in Web design ==
{{Section move from|Web design|sections=Parallax scrolling in Web design|date=June 2025}}
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.<ref>{{cite web|title=Parallax Backgrounds - a multi-layered javascript experiment|url=https://inner.geek.nz/archives/2007/03/20/parallax-backgrounds/|work=Glutnix|publisher=inner.geek.nz|access-date=28 June 2019|author=Brett Taylor|date=20 March 2007|archive-date=28 January 2019|archive-url=https://web.archive.org/web/20190128230104/https://inner.geek.nz/archives/2007/03/20/parallax-backgrounds/|url-status=dead}}</ref><ref>{{cite web|title=Showcasing the css parallax effect - 12+1 creative usages|url=https://kremalicious.com/showcasing-the-css-parallax-effect-12-creative-usages/|work=Glutnix|publisher=kremalicious.com|access-date=28 June 2019|author=Matthias Kretschmann|date=23 May 2008}}</ref>
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.<ref>{{cite web|title=How to Recreate Silverback's Parallax Effect|url=http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/|first=Paul|last=Annett|date=February 2008|access-date=2024-02-27|url-status=dead|archive-url=https://web.archive.org/web/20100719124948/http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/|archive-date=2010-07-19}}</ref> He demonstrated the effect on stage at SXSW Interactive 2009, with the help of audience participation and a man in a gorilla suit.<ref>{{cite web|title=Photo: Paul is amused by gorillas|url=https://www.flickr.com/photos/mn_francis/3354075259/in/photolist-67sJsG-67sGEE-4xqGuE-67PNcj-67KBmV-689ztc-67sM8j-67mxCL-67ow86-4xZ4jq-4CgVEn-CJ1Ka-67aT9H-E7Byr-67sHbN-CSF4e-4xUDWB-67oyUz-67PNm9-67fXQP-D1WeG-4yeU6u-DibvN-4xDyY3-4yoJA4-67ovHM-4xYTdL-4xYUe9-67eVL9-4xYUuy-CQuae-4y8Rwn-4y594r|access-date=27 February 2024|author=Mark Norman Francis|date=14 March 2009}}</ref><ref>{{cite web|title=Paul Annett from ClearLeft making people act out the design of silverbackapp.com|url=https://www.flickr.com/photos/robby1066/3352602235/in/photolist-67sJsG-67sGEE-4xqGuE-67PNcj-67KBmV-689ztc-67sM8j-67mxCL-67ow86-4xZ4jq-4CgVEn-CJ1Ka-67aT9H-E7Byr-67sHbN-CSF4e-4xUDWB-67oyUz-67PNm9-67fXQP-D1WeG-4yeU6u-DibvN-4xDyY3-4yoJA4-67ovHM-4xYTdL-4xYUe9-67eVL9-4xYUuy-CQuae-4y8Rwn-4y594r|access-date=27 February 2024|author=Robby Macdonell|date=14 March 2009}}</ref>
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.<ref name="CederholmMarcotte2010">{{cite book|author1=Dan Cederholm|author2=Ethan Marcotte|title=Handcrafted CSS: More Bulletproof Web Design|url=https://archive.org/details/handcraftedcssmo0000cede|url-access=registration|date=9 April 2010|publisher=New Riders|isbn=978-0-13-210481-4|pages=198–199}}</ref>
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".<ref>{{cite journal|title=The Effects Of Parallax Scrolling On User Experience And Preference In Web Design|url=https://docs.lib.purdue.edu/cgttheses/27/|journal=Purdue University|access-date=17 April 2014|author=Dede M. Frederick|date=18 April 2013|archive-url=https://web.archive.org/web/20140416183434/http://docs.lib.purdue.edu/cgttheses/27/|archive-date=2014-04-16|url-status=live}}</ref> 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."<ref>{{Cite journal|last=Frederick|first=Dede|title=The Effects of Parallax Scrolling on User Experience in Web Design|journal=Journal of User Experience|volume=10|issue=2}}</ref>
== See also ==
* [[2.5D]]
* [[Scrolling]]
* [[Skybox (video games)|Skybox]]
== References ==
{{Reflist}}
{{
{{Computer graphics}}
{{Stereoscopy}}
Line 82 ⟶ 92:
[[Category:Responsive web design]]
[[Category:Ajax (programming)]]
[[Category:Adaptive
| |||