Content deleted Content added
Maxeto0910 (talk | contribs) Added short description. Tags: Mobile edit Mobile web edit Advanced mobile edit |
Rescuing 2 sources and tagging 0 as dead.) #IABot (v2.0.9.5 |
||
| (27 intermediate revisions by 19 users not shown) | |||
Line 1:
{{
{{
{{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 of distance.<ref>{{cite news|title=Cap. O'Rourke to the rescue|url=https://news.google.com/newspapers?id=drgTAAAAIBAJ&sjid=S5ADAAAAIBAJ&pg=3478,303305&dq=parallax+scrolling|date=1988-09-01|publisher=New Straits Times Malaysia |access-date=2009-07-06}}</ref> The technique grew out of the [[multiplane camera]] technique used in [[traditional animation]]<ref name=art>{{cite web|title=The Art of Parallax Scrolling|url=http://mos.futurenet.com/pdf/net/NET165_tut_flash.pdf|first=Wyatt|last=Paul|date=August 2007|access-date=2009-07-06|url-status=dead|archive-url=https://web.archive.org/web/20091007223458/http://mos.futurenet.com/pdf/net/NET165_tut_flash.pdf|archive-date=2009-10-07}}</ref> 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).<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
== Methods ==
Line 40 ⟶ 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.
Line 51 ⟶ 53:
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=http://mamedev.org/devwiki/index.php?title=Using_MAME%27s_tilemap_system|title=Using MAME's tilemap system - DevWiki|date=2 January 2014|archive-url=https://web.archive.org/web/20140102211938/http://mamedev.org/devwiki/index.php?title=Using_MAME%27s_tilemap_system|archive-date=2014-01-02}}</ref> This technique is implemented in the [[Graphics processing unit|graphics chips]] of various [[List of Sega arcade system boards|Sega arcade system boards]] since the [[Sega Space Harrier]] and [[Sega System 16|System 16]],<ref>{{cite web |url=http://cgfm2.emuviews.com/txt/s16tech.txt |title=Archived copy |access-date=2016-08-08 |url-status=dead |archive-url=https://web.archive.org/web/20160304034742/http://cgfm2.emuviews.com/txt/s16tech.txt |archive-date=2016-03-04 }}</ref> the Sega Mega Drive/Genesis console,<ref>{{cite web|url=http://www.gamepilgrimage.com/content/sega-genesis-vs-super-nintendo|title=Sega Genesis vs Super Nintendo|date=2009-08-11|website=gamepilgrimage.com|access-date=2014-09-26|archive-url=https://web.archive.org/web/20150924020645/http://www.gamepilgrimage.com/content/sega-genesis-vs-super-nintendo|archive-date=2015-09-24|url-status=live}}</ref> and the [[CP System|Capcom CP System]],<ref>{{cite web|url=https://github.com/mamedev/mame/tree/master/src/mame/video/cps1.c|archive-url=https://hookagency.com/new-forgotten-world-clone-cp-system-code/|archive-date=25 May 2015|first=Paul|last=Leaman|title=New Forgotten World Clone – CP System Code|website=[[GitHub]] }}</ref> [[Irem M-92]]<ref>{{cite web|url=http://www.system16.com/hardware.php?id=747|title=System 16 - Irem M92 Hardware (Irem)|website=www.system16.com|access-date=2014-09-26|archive-url=https://web.archive.org/web/20141224152637/http://www.system16.com/hardware.php?id=747|archive-date=2014-12-24|url-status=live}}</ref> and [[Taito F3 System]]<ref>{{cite web|url=http://www.system16.com/hardware.php?id=665|title=System 16 - Taito F3 System Hardware (Taito)|website=www.system16.com|access-date=2014-09-26|archive-url=https://web.archive.org/web/20140421134650/http://www.system16.com/hardware.php?id=665|archive-date=2014-04-21|url-status=live}}</ref> [[arcade game]] boards.
== Example ==
Line 57 ⟶ 59:
<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
| |||