Parallax scrolling , also known as “Asymmetrical scrolling”,  is a technique in computer graphics and web design , where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion. [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 and video games by the arcade games Moon Patrol [3] [4] andJungle Hunt , [5] both released in 1982. Some parallax scrolling had been used by the 1981 arcade game Jump Bug . [6]


There are four main methods of parallax scrolling used in titles for arcade system board , video game console and personal computer systems.

Layer method

Some display systems support multiple layers that can be scrolled independently in a horizontal and vertical directions and composited on one another, simulating a multiplane camera . On such a display system, a game can produce parallax by simply changing each layer by a different amount in the same direction. Layers that move more quickly to be closer to the virtual camera. Layers can be placed in front of the playfield -the layer containing the objects with which the player interacts-for various reasons such as to provide increased dimension, obscure some of the action of the game, or distract the player.

Sprite method

Programmers can also make pseudo-layers of sprites -individually controllable moving objects drawn by hardware on top of or behind the layers-if they are available on the display system. For instance Star Force , an overhead-view vertically scrolling shooter for NES , used this for its starfield, and Final Fight for the Super NES used this technique for the layer in front of the main playfield.
The Amiga computer has sprites which can have any height and can be set with the copper co-processor, which makes them ideal for this purpose. Risky Woods on the Amigauses sprites multiplexed with the copper to create an entire fullscreen parallax background layer [7] as an alternative to the dual mode playfield system.

Repeating pattern / animation method

Scrolling displays built up of individual tiles can be made to ‘float’ over a repeating background layer by animating the individual tiles’ bitmaps in order to portray the parallax effect. Color cycling can be used to animate tiles quickly on the whole screen. This software gives the illusion of another (hardware) layer. Many games used this technique for a scrolling star-field, but sometimes a more intricate or multi-directional effect is achieved, such as in the game Parallax by Sensible Software .

Raster method

In raster graphics , the lines of pixels in an image are composited Typically refreshed and in top-to-bottom order with a slight delay (called Expired the horizontal blanking interval ) entre drawing one line and drawing the next line. Games designed for older graphical chipsets-such as those of the third and fourth generations of video game consoles, those of dedicated TV games , 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 , Sega Master System , PC Engine / TurboGrafx-16 and Original Game Boy ). The more sophisticated games on such systems, with a different position and rate of scrolling. Typically, strips will be displayed on the screen or displayed on the screen. The program will then be waited for the first time before the next scanline. This is called a “Raster effect “and est Useful for changing the system range to Provide a gradient background.

Some platforms (such as the Commodore 64, Amiga , Sega Master System, [8] PC Engine / TurboGrafx-16, [9] Sega Mega Drive / Genesis , Super NES , Gameboy , Gameboy Advance and Nintendo DS ) provide a horizontal blank interruptions for automatically setting the registers independently of the rest of the program. Others, Such As the NES, require the use of cycle-timed code, qui est specially written to take exactly as long to execute as the video chip takes to draw one scanline, gold timers inside game cartridges That generate interruptsafter a given number of scan lines have been drawn. Many NES games use this technique to draw their status and Teenage Mutant Ninja Turtles: The Arcade Game and Vice: Project Doom for NES

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 , Sonic The Hedgehog 2 , ActRaiser , Lionheart and Street Fighter II used this effect well. If each scanline has its own layer, the Pole Position effect is produced, which creates a pseudo-3D road (or has a pseudo-3D ball in NBA Jam ) we have 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 factorsF-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 tiles can be scrolled individually. [10] This technique is implemented in the graphics chips of various Sega arcade system boards since the Sega Space Harrier and System 16 , [11] the Sega Mega Drive / Genesis Console, [12] and the Capcom CP System , [13] Irem M-92 [14] and Taito F3 System [15] arcade game boards.


In the following animation, three layers are moving leftward at different speeds. Their speeds decrease and increase their relative distance from the viewer. The ground layer is moving 8 times as fast as the vegetation layer. The vegetation is moving fast as fast as the cloud layer.

Parallax scrolling in Web design

Web designers began incorporating parallax scrolling in 2011, using HTML5 and CSS3 . Advocates argues that it is a simple way to embrace the fluidity of the Web. [16] 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: “… despite parallax scrolling enhanced certain aspects of the user experience, it did not necessarily improve the overall user experience”. [17]

See also

  • 2.5D
  • scrolling


  1. Jump up^ “Cape O’Rourke to the rescue” . New Straits Times Malaysia. 1988-09-01 . Retrieved 2009-07-06 .
  2. Jump up^ Paul, Wyatt (August 2007). “The Art of Parallax Scrolling” (PDF) . Retrieved 2009-07-06 .
  3. Jump up^ Stahl, Ted (2006-07-26). “Chronology of the History of Video Games: Golden Age” . Retrieved 2009-07-06 .
  4. Jump up^ “Gaming’s Most Important Evolutions” . GamesRadar . October 8, 2010. p. 3 . Retrieved 2011-04-27 .
  5. Jump up^ “Jungle Hunt Was a Terrible Waste of Quarters” .
  6. Jump up^
  7. Jump up^
  8. Jump up^
  9. Jump up^
  10. Jump up^
  11. Jump up^
  12. Jump up^
  13. Jump up^
  14. Jump up^
  15. Jump up^
  16. Jump up^ Dan Cederholm; Ethan Marcotte (9 April 2010). Handcrafted CSS: More Bulletproof Web Design . New Riders. pp. 5-. ISBN  978-0-13-210481-4.
  17. Jump up^ Dede M. Frederick (18 April 2013). “The Effects Of Parallax Scrolling On User Experience And Preference In Web Design” . Purdue University . Purdue University . Retrieved 17 April 2014 .