{"id":367,"date":"2026-10-23T02:01:00","date_gmt":"2026-10-23T00:01:00","guid":{"rendered":"https:\/\/0o5.de\/magazin\/glossar\/parallax-scrolling\/"},"modified":"2026-10-23T18:49:35","modified_gmt":"2026-10-23T16:49:35","slug":"parallax-scrolling","status":"publish","type":"page","link":"https:\/\/0o5.de\/magazin\/glossar\/parallax-scrolling\/","title":{"rendered":"Parallax-Scrolling: So entsteht Tiefe in 2D-Spielen"},"content":{"rendered":"\n<div id=\"definition\" class=\"wp-block-group gl-def is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"gl-def__label wp-block-paragraph\">Kurz erkl\u00e4rt <span>\u00b7 Grafik &amp; Sound<\/span><\/p>\n\n\n\n<p class=\"gl-def__text wp-block-paragraph\">Parallax-Scrolling ist eine Technik in 2D-Spielen, bei der mehrere Bildebenen unterschiedlich schnell vorbeiziehen: Ferne Hintergr\u00fcnde bewegen sich langsam, nahe Ebenen schnell. So entsteht auf einem flachen Bild der Eindruck r\u00e4umlicher Tiefe.<\/p>\n\n\n\n<p class=\"gl-def__alt wp-block-paragraph\">Auch: Parallax Scrolling, Parallaxe, Parallax-Effekt, Parallaxenscrolling, Ebenen-Scrolling, Tiefenscrolling<\/p>\n<\/div>\n\n\n\n<figure class=\"gl-anim\" id=\"animation\"><input type=\"checkbox\" class=\"gl-anim__pause\" id=\"gl-pause-parallax-scrolling\"><label for=\"gl-pause-parallax-scrolling\" class=\"gl-anim__btn\"><span class=\"gl-anim__p\">Animation anhalten<\/span><span class=\"gl-anim__r\">Animation fortsetzen<\/span><\/label><div class=\"gl-anim__stage\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"g-parallax-scrolling\" viewBox=\"0 0 640 360\" role=\"img\" aria-labelledby=\"g-parallax-scrolling-t g-parallax-scrolling-d\">\n<title id=\"g-parallax-scrolling-t\">Parallax-Scrolling einfach erkl\u00e4rt<\/title>\n<desc id=\"g-parallax-scrolling-d\">Eine Figur l\u00e4uft durch eine Landschaft aus Ebenen: Berge, H\u00fcgel, B\u00e4ume und Boden. Zuerst ziehen alle Ebenen gleich schnell vorbei, das Bild wirkt flach. Dann bewegen sich die fernen Berge langsam und die nahen B\u00e4ume schnell, und es entsteht Tiefe.<\/desc>\n<style>\n.g-parallax-scrolling{font-family:\"Space Grotesk\",system-ui,sans-serif}\n.g-parallax-scrolling .bg{fill:#131823}\n.g-parallax-scrolling .moon{fill:#ffd700;opacity:.9}\n.g-parallax-scrolling .far{fill:#2a2f4a}\n.g-parallax-scrolling .mid{fill:#23405a}\n.g-parallax-scrolling .tree{fill:#2f8f5b}\n.g-parallax-scrolling .trunk{fill:#5b4636}\n.g-parallax-scrolling .gr{fill:#1d2433}\n.g-parallax-scrolling .gs{stroke:#424b5f;stroke-width:4}\n.g-parallax-scrolling .hero{fill:#fb923c}\n.g-parallax-scrolling .eye{fill:#0e1117}\n.g-parallax-scrolling .tag{font-size:15px;font-weight:700;text-anchor:end}\n.g-parallax-scrolling .tf{fill:#a78bfa}.g-parallax-scrolling .tm{fill:#38bdf8}.g-parallax-scrolling .tn{fill:#4ade80}\n.g-parallax-scrolling .pill{fill:rgba(19,24,35,.75)}\n.g-parallax-scrolling .ar{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}\n.g-parallax-scrolling .af{stroke:#a78bfa}.g-parallax-scrolling .am{stroke:#38bdf8}.g-parallax-scrolling .an{stroke:#4ade80}\n.g-parallax-scrolling .lbl{fill:#e8ebf2;font-size:17px;text-anchor:middle}\n.g-parallax-scrolling .L1{animation:g-parallax-scrolling-a 6s linear infinite}\n.g-parallax-scrolling .L2{animation:g-parallax-scrolling-b 6s linear infinite}\n.g-parallax-scrolling .L3{animation:g-parallax-scrolling-c 6s linear infinite}\n.g-parallax-scrolling .L4{animation:g-parallax-scrolling-d 6s linear infinite}\n.g-parallax-scrolling .hb{animation:g-parallax-scrolling-hop .5s ease-in-out infinite}\n.g-parallax-scrolling .p1{animation:g-parallax-scrolling-p1 6s linear infinite}\n.g-parallax-scrolling .p2{animation:g-parallax-scrolling-p2 6s linear infinite}\n@keyframes g-parallax-scrolling-a{0%{transform:translateX(0)}25%{transform:translateX(-60px)}100%{transform:translateX(-160px)}}\n@keyframes g-parallax-scrolling-b{0%{transform:translateX(0)}25%{transform:translateX(-60px)}100%{transform:translateX(-320px)}}\n@keyframes g-parallax-scrolling-c{0%{transform:translateX(0)}25%{transform:translateX(-60px)}100%{transform:translateX(-480px)}}\n@keyframes g-parallax-scrolling-d{0%{transform:translateX(0)}25%{transform:translateX(-60px)}100%{transform:translateX(-640px)}}\n@keyframes g-parallax-scrolling-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}\n@keyframes g-parallax-scrolling-p1{0%,23%{opacity:1}27%,97%{opacity:0}100%{opacity:1}}\n@keyframes g-parallax-scrolling-p2{0%,23%{opacity:0}27%,96%{opacity:1}99%,100%{opacity:0}}\n@media (prefers-reduced-motion:reduce){.g-parallax-scrolling *{animation:none!important}.g-parallax-scrolling .p1{opacity:0}}\n<\/style>\n<defs><clipPath id=\"g-parallax-scrolling-c\"><rect width=\"640\" height=\"360\" rx=\"18\"\/><\/clipPath><\/defs>\n<g clip-path=\"url(#g-parallax-scrolling-c)\">\n<rect class=\"bg\" width=\"640\" height=\"360\"\/>\n<circle class=\"moon\" cx=\"96\" cy=\"64\" r=\"22\"\/>\n<path class=\"far L1\" d=\"M0 190L50 110L90 150L120 124L160 190L210 110L250 150L280 124L320 190L370 110L410 150L440 124L480 190L530 110L570 150L600 124L640 190L690 110L730 150L760 124L800 190L850 110L890 150L920 124L960 190V300H0Z\"\/>\n<path class=\"mid L2\" d=\"M0 230Q40 170 80 222Q120 196 160 230Q200 170 240 222Q280 196 320 230Q360 170 400 222Q440 196 480 230Q520 170 560 222Q600 196 640 230Q680 170 720 222Q760 196 800 230Q840 170 880 222Q920 196 960 230Q1000 170 1040 222Q1080 196 1120 230V300H0Z\"\/>\n<g class=\"L3\"><path class=\"trunk\" d=\"M26 290h8v12h-8zM106 290h8v12h-8zM186 290h8v12h-8zM266 290h8v12h-8zM346 290h8v12h-8zM426 290h8v12h-8zM506 290h8v12h-8zM586 290h8v12h-8zM666 290h8v12h-8zM746 290h8v12h-8zM826 290h8v12h-8zM906 290h8v12h-8zM986 290h8v12h-8zM1066 290h8v12h-8zM1146 290h8v12h-8zM1226 290h8v12h-8z\"\/><path class=\"tree\" d=\"M8 290L30 190L52 290ZM88 290L110 210L132 290ZM168 290L190 190L212 290ZM248 290L270 210L292 290ZM328 290L350 190L372 290ZM408 290L430 210L452 290ZM488 290L510 190L532 290ZM568 290L590 210L612 290ZM648 290L670 190L692 290ZM728 290L750 210L772 290ZM808 290L830 190L852 290ZM888 290L910 210L932 290ZM968 290L990 190L1012 290ZM1048 290L1070 210L1092 290ZM1128 290L1150 190L1172 290ZM1208 290L1230 210L1252 290Z\"\/><\/g>\n<rect class=\"gr\" x=\"0\" y=\"300\" width=\"640\" height=\"60\"\/>\n<path class=\"gs L4\" d=\"M0 318h20M40 318h20M80 318h20M120 318h20M160 318h20M200 318h20M240 318h20M280 318h20M320 318h20M360 318h20M400 318h20M440 318h20M480 318h20M520 318h20M560 318h20M600 318h20M640 318h20M680 318h20M720 318h20M760 318h20M800 318h20M840 318h20M880 318h20M920 318h20M960 318h20M1000 318h20M1040 318h20M1080 318h20M1120 318h20M1160 318h20M1200 318h20M1240 318h20M1280 318h20M1320 318h20\"\/>\n<g class=\"hb\"><rect class=\"hero\" x=\"292\" y=\"250\" width=\"30\" height=\"46\" rx=\"10\"\/><circle class=\"eye\" cx=\"314\" cy=\"264\" r=\"3.5\"\/><\/g>\n<g class=\"p2\">\n<path class=\"ar af\" d=\"M432 111H408M417 103L408 111L417 119\"\/><path class=\"ar am\" d=\"M432 185H380M389 177L380 185L389 193\"\/><path class=\"ar an\" d=\"M432 245H336M345 237L336 245L345 253\"\/>\n<rect class=\"pill\" x=\"440\" y=\"98\" width=\"180\" height=\"26\" rx=\"8\"\/><text class=\"tag tf\" x=\"610\" y=\"117\">Berge: langsam<\/text>\n<rect class=\"pill\" x=\"440\" y=\"172\" width=\"180\" height=\"26\" rx=\"8\"\/><text class=\"tag tm\" x=\"610\" y=\"191\">H\u00fcgel: mittel<\/text>\n<rect class=\"pill\" x=\"440\" y=\"232\" width=\"180\" height=\"26\" rx=\"8\"\/><text class=\"tag tn\" x=\"610\" y=\"251\">B\u00e4ume: schnell<\/text>\n<text class=\"lbl\" x=\"320\" y=\"346\">Mit Parallaxe: hinten langsam, vorne schnell \u2013 das Bild wirkt tief<\/text>\n<\/g>\n<g class=\"p1\"><text class=\"lbl\" x=\"320\" y=\"346\">Ohne Parallaxe: alle Ebenen gleich schnell \u2013 das Bild wirkt flach<\/text><\/g>\n<\/g>\n<\/svg><\/div><figcaption><b>So funktioniert\u2019s:<\/b> Erst ziehen alle Ebenen gleich schnell vorbei, und das Bild wirkt flach. Dann laufen die fernen Berge langsam und die nahen B\u00e4ume schnell \u2013 es entsteht Tiefe.<\/figcaption><\/figure>\n\n\n\n<nav class=\"mag-toc\" aria-label=\"Inhalt\"><details><summary>Inhalt<\/summary><ol><li><a href=\"#bedeutung\">Was bedeutet Parallax-Scrolling?<\/a><\/li><li><a href=\"#so-funktioniert-es\">Wie funktioniert Parallax-Scrolling?<\/a><\/li><li><a href=\"#einsatz\">Wo wird Parallax-Scrolling eingesetzt?<\/a><\/li><li><a href=\"#unterschied\">Unterschied zu 3D und isometrischer Grafik<\/a><\/li><li><a href=\"#beispiele\">Parallax-Scrolling in Spielen auf Player 0o5<\/a><\/li><li><a href=\"#faq\">H\u00e4ufige Fragen<\/a><\/li><li><a href=\"#verwandte-begriffe\">Verwandte Begriffe<\/a><\/li><\/ol><\/details><\/nav>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bedeutung\">Was bedeutet Parallax-Scrolling?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Parallaxe bezeichnet die scheinbare Verschiebung von Gegenst\u00e4nden, wenn sich der Blickpunkt bewegt. Du kennst das aus dem Zugfenster: Der Zaun am Gleis rast vorbei, die B\u00e4ume dahinter ziehen gem\u00e4chlich vor\u00fcber, und die Berge am Horizont scheinen fast stillzustehen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Scrolling hei\u00dft, dass der Bildausschnitt mitwandert, w\u00e4hrend sich die Spielfigur bewegt. Parallax-Scrolling verbindet beides: Die Spielwelt besteht aus mehreren Ebenen, die beim Scrollen unterschiedlich schnell mitlaufen \u2013 und das Gehirn deutet die Unterschiede als Tiefe.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"so-funktioniert-es\">Wie funktioniert Parallax-Scrolling?<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Die Szene wird in Ebenen zerlegt, etwa Himmel, ferne Berge, H\u00fcgel, B\u00e4ume und Boden.<\/li>\n\n<li>Jede Ebene bekommt einen Faktor f\u00fcr ihre Geschwindigkeit: Der Boden, auf dem die Figur l\u00e4uft, bewegt sich voll mit, ferne Ebenen nur zu einem Bruchteil.<\/li>\n\n<li>R\u00fcckt die Kamera um 100 Pixel weiter, wandert eine Ebene mit Faktor 0,5 nur 50 Pixel und eine mit Faktor 0,25 nur 25 Pixel.<\/li>\n\n<li>Die Ebenen werden von hinten nach vorn \u00fcbereinander gezeichnet.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Damit der Hintergrund nicht irgendwann endet, sind die Ebenen meist so gestaltet, dass sie sich nahtlos wiederholen. Der Himmel ganz hinten steht oft komplett still.<\/p>\n\n\n\n<div class=\"wp-block-group mag-tip is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"mag-tip__text wp-block-paragraph\"><strong>Tipp:<\/strong> Eine Vordergrund-Ebene vor der Figur \u2013 Gr\u00e4ser, Pfosten, Zweige \u2013, die schneller l\u00e4uft als der Boden, verst\u00e4rkt den Effekt besonders. Sie darf aber nie die Sicht auf Gefahren verdecken.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"einsatz\">Wo wird Parallax-Scrolling eingesetzt?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Am bekanntesten ist die Technik aus seitlich scrollenden <a href=\"https:\/\/0o5.de\/magazin\/glossar\/jump-n-run\/\">Jump\u2019n\u2019Runs<\/a> und Shootern. Auch <a href=\"https:\/\/0o5.de\/magazin\/glossar\/endlos-runner\/\">Endlos-Runner<\/a> und H\u00fcpfspiele, die nach oben f\u00fchren, nutzen sie \u2013 dann laufen die Ebenen eben vertikal versetzt mit. Auf Webseiten hei\u00dft es ebenfalls Parallax-Effekt, wenn Hintergr\u00fcnde beim Scrollen langsamer wandern als der Text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Scrolling allein gab es schon auf einfachster Hardware: In <a href=\"https:\/\/0o5.de\/magazin\/buddel-z9001-261\/\">Buddel Z9001<\/a> sind die H\u00f6hlen gr\u00f6\u00dfer als der Bildschirm, und das Bild rollt weich mit. F\u00fcr Parallaxe kommen weitere Ebenen hinzu, die jeweils Rechenzeit kosten. Ein heutiger Browser zeichnet solche Ebenen auf einem <a href=\"https:\/\/0o5.de\/magazin\/glossar\/html5-canvas\/\">HTML5-Canvas<\/a> problemlos viele Male pro Sekunde.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"unterschied\">Unterschied zu 3D und isometrischer Grafik<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Parallax-Scrolling bleibt echtes 2D: Jede Ebene ist ein flaches Bild, nur ihre Geschwindigkeit verr\u00e4t die Entfernung. In echtem 3D berechnet das Spiel die Perspektive dagegen f\u00fcr jeden Punkt der Welt. Die <a href=\"https:\/\/0o5.de\/magazin\/glossar\/isometrische-grafik\/\">isometrische Grafik<\/a> wiederum erzeugt Tiefe durch einen schr\u00e4gen Blick von oben \u2013 ganz ohne unterschiedliche Geschwindigkeiten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Besonders oft begegnet dir der Effekt zusammen mit <a href=\"https:\/\/0o5.de\/magazin\/glossar\/pixel-art\/\">Pixel-Art<\/a>, wo er flachen Bildern eine erstaunliche Weite gibt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"beispiele\">Parallax-Scrolling in Spielen auf Player 0o5<\/h2>\n\n\n\n<ul class=\"gl-games\"><li class=\"gl-game\"><a class=\"gl-game__img\" href=\"https:\/\/0o5.de\/magazin\/asciiland-229\/\" tabindex=\"-1\" aria-hidden=\"true\"><img src=\"https:\/\/0o5.de\/magazin\/wp-content\/uploads\/2026\/10\/asciiland-1-768x480.jpg\" alt=\"\" width=\"768\" height=\"480\" loading=\"lazy\" decoding=\"async\"><\/a><div class=\"gl-game__body\"><h3 class=\"gl-game__name\"><a href=\"https:\/\/0o5.de\/magazin\/asciiland-229\/\">Asciiland<\/a><\/h3><p>Die Version v2 von <a href=\"https:\/\/0o5.de\/magazin\/asciiland-229\/\">Asciiland<\/a> setzt auf leuchtende Zeichen-Grafik mit Parallax-Hintergrund und fl\u00fcssigem Scrollen. Obwohl die ganze Welt aus Textzeichen besteht, entsteht so Tiefe.<\/p><p class=\"gl-game__links\"><a class=\"gl-game__play\" href=\"https:\/\/0o5.de\/games\/jumpnrun\/asciiland\/\" data-s05-cat=\"Glossar\" data-s05-ev=\"Spiel \u00f6ffnen|Asciiland\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 5l12 7-12 7z\" fill=\"currentColor\"\/><\/svg><span>Asciiland spielen<\/span><\/a><a class=\"gl-game__guide\" href=\"https:\/\/0o5.de\/magazin\/asciiland-229\/\">Zum Guide<\/a><\/p><\/div><\/li><li class=\"gl-game\"><a class=\"gl-game__img\" href=\"https:\/\/0o5.de\/magazin\/huepfhoch-152\/\" tabindex=\"-1\" aria-hidden=\"true\"><img src=\"https:\/\/0o5.de\/magazin\/wp-content\/uploads\/2026\/10\/huepfhoch-1-768x480.jpg\" alt=\"\" width=\"768\" height=\"480\" loading=\"lazy\" decoding=\"async\"><\/a><div class=\"gl-game__body\"><h3 class=\"gl-game__name\"><a href=\"https:\/\/0o5.de\/magazin\/huepfhoch-152\/\">H\u00fcpfhoch<\/a><\/h3><p>In <a href=\"https:\/\/0o5.de\/magazin\/huepfhoch-152\/\">H\u00fcpfhoch<\/a> hat jede der vier Welten \u2013 Garten, Stadt, Wolken und Weltall \u2013 einen eigenen Hintergrund mit Tiefenwirkung, w\u00e4hrend deine Figur endlos nach oben springt.<\/p><p class=\"gl-game__links\"><a class=\"gl-game__play\" href=\"https:\/\/0o5.de\/games\/jumpnrun\/huepfhoch\/\" data-s05-cat=\"Glossar\" data-s05-ev=\"Spiel \u00f6ffnen|H\u00fcpfhoch\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 5l12 7-12 7z\" fill=\"currentColor\"\/><\/svg><span>H\u00fcpfhoch spielen<\/span><\/a><a class=\"gl-game__guide\" href=\"https:\/\/0o5.de\/magazin\/huepfhoch-152\/\">Zum Guide<\/a><\/p><\/div><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">H\u00e4ufige Fragen zu Parallax-Scrolling<\/h2>\n\n\n\n<details class=\"wp-block-details mag-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>Was ist Parallax-Scrolling?<\/summary>\n<p class=\"wp-block-paragraph\">Parallax-Scrolling ist eine 2D-Technik, bei der mehrere Hintergrundebenen unterschiedlich schnell mitlaufen. Ferne Ebenen bewegen sich langsamer als nahe, dadurch wirkt das flache Bild r\u00e4umlich.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details mag-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>Warum bewegen sich Hintergr\u00fcnde in Spielen langsamer?<\/summary>\n<p class=\"wp-block-paragraph\">Weil das unser Sehen nachahmt: Weit entfernte Dinge scheinen sich beim Vorbeifahren kaum zu bewegen, nahe Dinge huschen schnell vorbei. Spiele nutzen das, um Entfernung darzustellen.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details mag-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>Wie viele Ebenen braucht Parallax-Scrolling?<\/summary>\n<p class=\"wp-block-paragraph\">Schon zwei Ebenen erzeugen einen Effekt. \u00dcblich sind drei bis f\u00fcnf, etwa Himmel, Berge, H\u00fcgel, B\u00e4ume und Boden; mehr Ebenen machen die Tiefe feiner.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details mag-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>Gibt es Parallax-Scrolling auch auf Webseiten?<\/summary>\n<p class=\"wp-block-paragraph\">Ja. Auch auf Webseiten spricht man vom Parallax-Effekt, wenn Hintergrundbilder beim Scrollen langsamer wandern als der Inhalt davor.<\/p>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"verwandte-begriffe\">Verwandte Begriffe<\/h2>\n\n\n\n<ul class=\"gl-rel\"><li><a href=\"https:\/\/0o5.de\/magazin\/glossar\/jump-n-run\/\"><small>Genres &amp; Spielarten<\/small><b>Jump\u2019n\u2019Run<\/b><span>Laufen, springen, sammeln, ins Ziel: Was ein Jump\u2019n\u2019Run ausmacht, warum sich gute Spr\u00fcnge richtig anf\u00fchlen und welche Spielarten es gibt.<\/span><\/a><\/li><li><a href=\"https:\/\/0o5.de\/magazin\/glossar\/endlos-runner\/\"><small>Genres &amp; Spielarten<\/small><b>Endlos-Runner<\/b><span>Die Figur rennt von allein, die Strecke h\u00f6rt nie auf, und es wird immer schneller: So funktioniert ein Endlos-Runner \u2013 mit Punkten, Spielarten und Tipps.<\/span><\/a><\/li><li><a href=\"https:\/\/0o5.de\/magazin\/glossar\/pixel-art\/\"><small>Grafik &amp; Sound<\/small><b>Pixel-Art<\/b><span>Jedes Pixel z\u00e4hlt: Was Pixel-Art ausmacht, wie Figuren mit wenigen Farben entstehen und welche Spiele auf 0o5.de den Retro-Look pflegen.<\/span><\/a><\/li><li><a href=\"https:\/\/0o5.de\/magazin\/glossar\/html5-canvas\/\"><small>Technik &amp; Plattform<\/small><b>HTML5-Canvas<\/b><span>Die Leinwand im Browser: Auf dem Canvas malen Spiele ihr Bild Pixel f\u00fcr Pixel \u2013 meist 60-mal pro Sekunde neu.<\/span><\/a><\/li><li><a href=\"https:\/\/0o5.de\/magazin\/glossar\/isometrische-grafik\/\"><small>Grafik &amp; Sound<\/small><b>Isometrische Grafik<\/b><span>Drehen, stauchen, H\u00f6he dazu: Wie die schr\u00e4ge Iso-Ansicht entsteht, was das 2:1-Verh\u00e4ltnis bedeutet und warum Aufbauspiele sie so gern nutzen.<\/span><\/a><\/li><\/ul>\n\n\n\n<p class=\"gl-back\"><a class=\"mag-btn mag-btn--ghost\" href=\"https:\/\/0o5.de\/magazin\/glossar\/\">\u2190 Alle 199 Begriffe im Spiele-Glossar<\/a><a class=\"mag-btn mag-btn--play\" href=\"https:\/\/0o5.de\/\" data-s05-cat=\"Glossar\" data-s05-ev=\"Zur Spieleseite|Parallax-Scrolling\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 5l12 7-12 7z\" fill=\"currentColor\"\/><\/svg><span>Zu den Spielen<\/span><\/a><\/p>\n\n\n\n<script type=\"application\/ld+json\">{\"@context\": \"https:\/\/schema.org\", \"@graph\": [{\"@type\": \"DefinedTerm\", \"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/parallax-scrolling\/#begriff\", \"name\": \"Parallax-Scrolling\", \"description\": \"Parallax-Scrolling ist eine Technik in 2D-Spielen, bei der mehrere Bildebenen unterschiedlich schnell vorbeiziehen: Ferne Hintergr\u00fcnde bewegen sich langsam, nahe Ebenen schnell. So entsteht auf einem flachen Bild der Eindruck r\u00e4umlicher Tiefe.\", \"url\": \"https:\/\/0o5.de\/magazin\/glossar\/parallax-scrolling\/\", \"inLanguage\": \"de\", \"inDefinedTermSet\": {\"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/#glossar\"}, \"subjectOf\": {\"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/parallax-scrolling\/#richSnippet\"}, \"alternateName\": [\"Parallax Scrolling\", \"Parallaxe\", \"Parallax-Effekt\", \"Parallaxenscrolling\", \"Ebenen-Scrolling\", \"Tiefenscrolling\"], \"sameAs\": [\"https:\/\/en.wikipedia.org\/wiki\/Parallax_scrolling\"], \"image\": \"https:\/\/0o5.de\/magazin\/wp-content\/uploads\/2026\/10\/glossar-parallax-scrolling-1.jpg\"}, {\"@type\": \"DefinedTermSet\", \"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/#glossar\", \"name\": \"Spiele-Glossar von Player 0o5\", \"url\": \"https:\/\/0o5.de\/magazin\/glossar\/\", \"inLanguage\": \"de\", \"publisher\": {\"@id\": \"https:\/\/0o5.de\/magazin\/#organization\"}}, {\"@type\": \"WebPage\", \"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/parallax-scrolling\/#webpage\", \"about\": {\"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/parallax-scrolling\/#begriff\"}, \"mainEntity\": {\"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/parallax-scrolling\/#begriff\"}, \"isPartOf\": {\"@id\": \"https:\/\/0o5.de\/magazin\/#website\"}, \"speakable\": {\"@type\": \"SpeakableSpecification\", \"cssSelector\": [\".gl-def__text\"]}, \"keywords\": \"parallax scrolling spiele, parallax effekt, parallaxe 2d spiel, scrolling ebenen, tiefenwirkung 2d, hintergrund ebenen\", \"mentions\": [{\"@id\": \"https:\/\/0o5.de\/games\/jumpnrun\/asciiland\/#spiel\"}, {\"@id\": \"https:\/\/0o5.de\/games\/jumpnrun\/huepfhoch\/#spiel\"}], \"relatedLink\": [\"https:\/\/0o5.de\/magazin\/glossar\/jump-n-run\/\", \"https:\/\/0o5.de\/magazin\/glossar\/endlos-runner\/\", \"https:\/\/0o5.de\/magazin\/glossar\/pixel-art\/\", \"https:\/\/0o5.de\/magazin\/glossar\/html5-canvas\/\", \"https:\/\/0o5.de\/magazin\/glossar\/isometrische-grafik\/\"]}, {\"@type\": \"FAQPage\", \"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/parallax-scrolling\/#faq\", \"inLanguage\": \"de\", \"mainEntity\": [{\"@type\": \"Question\", \"name\": \"Was ist Parallax-Scrolling?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Parallax-Scrolling ist eine 2D-Technik, bei der mehrere Hintergrundebenen unterschiedlich schnell mitlaufen. Ferne Ebenen bewegen sich langsamer als nahe, dadurch wirkt das flache Bild r\u00e4umlich.\"}}, {\"@type\": \"Question\", \"name\": \"Warum bewegen sich Hintergr\u00fcnde in Spielen langsamer?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Weil das unser Sehen nachahmt: Weit entfernte Dinge scheinen sich beim Vorbeifahren kaum zu bewegen, nahe Dinge huschen schnell vorbei. Spiele nutzen das, um Entfernung darzustellen.\"}}, {\"@type\": \"Question\", \"name\": \"Wie viele Ebenen braucht Parallax-Scrolling?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Schon zwei Ebenen erzeugen einen Effekt. \u00dcblich sind drei bis f\u00fcnf, etwa Himmel, Berge, H\u00fcgel, B\u00e4ume und Boden; mehr Ebenen machen die Tiefe feiner.\"}}, {\"@type\": \"Question\", \"name\": \"Gibt es Parallax-Scrolling auch auf Webseiten?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Ja. Auch auf Webseiten spricht man vom Parallax-Effekt, wenn Hintergrundbilder beim Scrollen langsamer wandern als der Inhalt davor.\"}}]}]}<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Hinten langsam, vorne schnell: Wie Parallax-Scrolling aus flachen Ebenen Tiefe macht \u2013 mit Beispielen aus Asciiland und H\u00fcpfhoch auf 0o5.de.<\/p>\n","protected":false},"author":1,"featured_media":273,"parent":42,"menu_order":117,"comment_status":"closed","ping_status":"closed","template":"glossar-begriff","meta":{"footnotes":""},"class_list":["post-367","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/pages\/367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/comments?post=367"}],"version-history":[{"count":2,"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/pages\/367\/revisions"}],"predecessor-version":[{"id":823,"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/pages\/367\/revisions\/823"}],"up":[{"embeddable":true,"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/pages\/42"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/media\/273"}],"wp:attachment":[{"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/media?parent=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}