[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"Ti31PjyDqft7FEvNjiTwvnyFhQaLQlbFtEjrB4iLxBE":75,"rkZuUoabBYHMtudXCJz-NHt4FNM_cxR6Tcf4UrLI9k0":168,"_apollo:default":210},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":146,"wpHeaderImage":13,"wpHeaderImageOld":149,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":161,"author":162},"NodeWpPost","1120","Parallaxes Scrolling",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1333351061,"UTC","+00:00","2012-04-02T07:17:41+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/parallaxes-scrolling",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Parallaxes Scrolling | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/parallaxes-scrolling","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","604","html5","/tag/html5",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"939","parallax scrolling","/tag/parallax-scrolling",{"__typename":147,"processed":148,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"0100a381-1a55-49ac-b688-d42e2ac77fd1\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>  \u003Cimg title=\"Parallaxe\" alt loading=\"lazy\" src=\"/sites/default/files/wp-migration/wordpress-media-image/2012/04/Unbenannt-11-1.gif\" width=\"520\" height=\"400\">\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2015/02/parallax_scrolling_kreis-1.jpg?itok=SfqR2U1A\" data-rel=\"lightbox-gallery-zwPlK2pn\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"parallax_scrolling_kreis\" data-entity-type=\"media\" data-entity-uuid=\"5892be85-6ab4-4c2a-83d7-3a907c20a0ef\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2015/02/parallax_scrolling_kreis-1.jpg.webp?itok=sPU9M88C 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2015/02/parallax_scrolling_kreis-1.jpg.webp?itok=q6ofk31U 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2015/02/parallax_scrolling_kreis-1.jpg.webp?itok=n3IyUdXA 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2015/02/parallax_scrolling_kreis-1.jpg.webp?itok=O6GgmftT 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2015/02/parallax_scrolling_kreis-1.jpg.webp?itok=8nZNsfB4 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2015/02/parallax_scrolling_kreis-1.jpg.webp?itok=smGpMdkf 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2015/02/parallax_scrolling_kreis-1.jpg.webp?itok=HVYtyj7_ 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2015/02/parallax_scrolling_kreis-1.jpg.webp?itok=POwiTuCx 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"480\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2015/02/parallax_scrolling_kreis-1.jpg.webp?itok=NGjTcd3I 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/parallax_scrolling_kreis-1.jpg.webp?itok=xjaOSRHQ 2x\" type=\"image/webp\" width=\"500\" height=\"500\">\n                  \u003Cimg loading=\"lazy\" width=\"500\" height=\"500\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/parallax_scrolling_kreis-1.jpg.jpg?itok=xjaOSRHQ\" alt=\"parallax_scrolling_kreis\" title=\"Parallax Scrolling\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Parallaxes Scrolling in Webseiten bezeichnet einen Effekt, bei dem unterschiedliche Ebenen verschieden schnell bewegen, wenn der User scrollt. Dabei entsteht für den Betrachter eine Illusion der Dreidimensionalität. Bevor ich aber näher darauf eingehe, möchte ich eine kurze Einführung geben.\u003Cbr>\n\u003Cbr>\nIn der Realwelt ist parallaxes Scrolling eng mit dem Begriff Bewegungsparallaxe verwandt. Bewegungsparallaxe ist ein Phänomen, bei dem sich ähnlich weit entfernte Objekte mit nahezu gleichmäßiger Geschwindigkeit bewegen (und damit wie auf einer Ebene gruppiert wirken), wenn sich auch der Betrachter bewegt. Wer sich noch nicht auskennt, was ich meine, muss sich zurück in seine Kindheit versetzen:\u003Cbr>\nAm besten zeigt sich der Effekt nämlich beim Auto- oder Bahnfahren (oder, wenn die Kindheit schon etwas länger her ist, bei der Fahrt mit der Pferdekutsche). Betrachtete man während einer solchen Fahrt den seitlichen Horizont, zogen nahe Objekte wie Bäume schneller an einem vorbei, als etwas weiter entfernte wie Hügel. Berge und Wolken, die am weitesten entfernt waren, schienen nahezu stehenzubleiben. Eine kleine Animation:\u003Cbr>\n\u003C/p>\n\u003Ch4>Der Einsatz von Parallaxe am Computer\u003C/h4>\n\u003Cp>Auch am Computer wird dieses Phänomen seit langem eingesetzt, zunächst vor allem in Videospielen. Vorreiter beim Einsatz waren vor allem Jump’n’Runs (bestes Beispiel Super Mario), da sie oft lange, horizontale Levels hatten.\u003Cbr>\nNeben Computerspielen fand der Parallax-Effekt vor einiger Zeit auch den Weg ins Internet. Wann dieser Trend startete ist natürlich schwer nachzuvollziehen. Einen guten Überblick bekommt man jedoch auf Google, bei dem sich die ersten, noch rudimentären Tutorials um 2009 finden. \u003Ca href=\"http://www.google.at/trends/?q=parallax+scrolling\" target=\"_blank\" rel=\"noopener noreferrer\">Google Trends\u003C/a> zeichnet dann ein erhöhtes Suchaufkommen ab 2011 auf . Ein Auslöser und Mitverursacher des Hypes war sicherlich Nike, die mit ihrer Website \u003Ca href=\"http://www.nikebetterworld.com/\" target=\"_blank\" rel=\"noopener noreferrer\">nikebetterworld.com\u003C/a> Anfang 2011 als eine der ersten großen Firmen ebenfalls auf parallaxes Scrolling aufsprangen.\u003Cbr>\n\u003Ca href=\"http://www.nikebetterworld.com\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"182e3252-fd60-47ab-b49f-19285b8a53fc\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2012/04/nikebetterworld1-1.png.webp?itok=7hOf-esh 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2012/04/nikebetterworld1-1.png.webp?itok=sr8VZ4U2 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"266\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2012/04/nikebetterworld1-1.png.webp?itok=lcYibQPb 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2012/04/nikebetterworld1-1.png.webp?itok=Pb6jRYWq 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"266\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2012/04/nikebetterworld1-1.png.webp?itok=q5QW4dE0 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2012/04/nikebetterworld1-1.png.webp?itok=b7ztEuOt 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"266\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2012/04/nikebetterworld1-1.png.webp?itok=fhrmPBN5 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2012/04/nikebetterworld1-1.png.webp?itok=4mUMI3Aq 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"236\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2012/04/nikebetterworld1-1.png.webp?itok=fZRNMkxl 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/04/nikebetterworld1-1.png.webp?itok=BWfB6E-y 2x\" type=\"image/webp\" width=\"540\" height=\"266\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"266\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/04/nikebetterworld1-1.png.jpg?itok=BWfB6E-y\" alt title=\"nikebetterworld\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cbr>\nEine weitere Bestätigung des enormen Echos auf Nikes Seite sind die Unmengen an Tutorials, die sich mit der Erstellung und Nachahmung der Seite beschäftigen. Warum parallaxes Scrolling derart populär geworden ist, lässt sich freilich nur schwer nachvollziehen. Dabei läuft es aber sicher oft so wie bei Menschen ab, wenn sie berühmt werden: sie waren zum richtigen Zeitpunkt am richtigen Ort. Im Fall von paralaxem Scrolling also zum richtigen Zeitpunkt beim richtigen Artdirector.\u003C/p>\n\u003Ch4>Parallaxes Scrolling und andere Technologien und Konzepte\u003C/h4>\n\u003Cp>Umstände, die das aufkommen des Scrollings begünstigt haben, sind relativ leicht auszumachen.\u003Cbr>\nDa wäre zunächst HTML 5 und CSS 3, die zwar an sich nichts mit parallaxem Scrolling zu tun haben, durch ihre Möglichkeiten was Animationen, Übergänge und Effekte betrifft den generellen Zugang zu Webseiten und die allgemeine Auffassung, was Webseiten darstellen sollen, nachträglich prägen. Dabei ist parallaxes Scrolling natürlich nur einer von vielen Effekten, die heutzutage zunehmend eingesetzt werden.\u003Cbr>\nViel wichtiger ist der Einsatz von parallaxem Scrolling nämlich bei einem anderen Konzept: dem Storytelling auf Webseiten. Schon lange genügt es für viele Firmen nichtmehr, ihre Geschichte, Daten und sonstige Informationen ohne viel Konzept ins Internet zu stellen. Durch das aufkommen des Storytellings auf Webseiten werden Informationen für den Besucher spannender, interessanter und schöner aufbereitet und vor allem mit einem durchgänigen, roten Faden versehen. Und dabei kann parallaxes Scrolling eine enorme Rolle spielen.\u003Cbr>\nEinerseits kann parallaxes Scrolling sehr gut als beiläufiger Effekt eingesetzt werden, der subtil und simpel Bewegung in die sonst starre Seite bringt. Ein besonders schönes Beispiel hierfür ist \u003Ca href=\"http://www.iutopi.com/en/\">www.iutopi.com\u003C/a>. Hier bringt parallaxes Scrolling eine große Dynamik und großen Schwung in die Seite und hilft unterstützt damit das Konzept der Reise in die Tiefe.\u003Cbr>\n\u003Ca href=\"http://www.iutopi.com/en/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"d9e69847-a08d-457f-9089-1e62c7ae894a\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2012/04/iutopi1-1.png.webp?itok=7KuabQQc 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2012/04/iutopi1-1.png.webp?itok=TGRB6b8Z 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"243\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2012/04/iutopi1-1.png.webp?itok=c0mpGZ_X 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2012/04/iutopi1-1.png.webp?itok=7UREcETe 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"243\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2012/04/iutopi1-1.png.webp?itok=2z91P8-v 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2012/04/iutopi1-1.png.webp?itok=lTG5UJRu 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"243\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2012/04/iutopi1-1.png.webp?itok=TcRbqeyp 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2012/04/iutopi1-1.png.webp?itok=gadmAkpP 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"216\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2012/04/iutopi1-1.png.webp?itok=TD7G1Ch1 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/04/iutopi1-1.png.webp?itok=CXtqciP4 2x\" type=\"image/webp\" width=\"540\" height=\"243\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"243\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/04/iutopi1-1.png.jpg?itok=CXtqciP4\" alt title=\"iutopi\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cbr>\nWie groß die Rolle von parallaxem Scrolling beim Storytelling wirklich sein kann, zeigt die sehr gut umgesetzte Seite \u003Ca href=\"http://www.dangersoffracking.com/\">www.dangersoffracking.com\u003C/a>. Hierbei werden die Gefahren des Frackings während der Reise eines Wassertropfens erzählt, den der Besucher über das eigene Scrollen steuern kann. Dabei zeigt sich auch der starke Vorteil des Storytellings gegenüber animierten Infografiken zum selben Thema: Der Benutzer hat volle Kontrolle über die Animation, also vor allem über Geschwindigkeit, Lesezeit, usw. – ein immenser Vorteil gegenüber Videos.\u003Cbr>\n\u003Ca href=\"http://www.dangersoffracking.com/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"9c6d23e2-5e2e-4b93-a777-dd9338ce2dd8\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2012/04/fracking11-1.png.webp?itok=nlMW-HrH 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2012/04/fracking11-1.png.webp?itok=u7jthfWv 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"334\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2012/04/fracking11-1.png.webp?itok=guV4lm9n 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2012/04/fracking11-1.png.webp?itok=BWYs3VDJ 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"334\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2012/04/fracking11-1.png.webp?itok=Jc11f1Ew 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2012/04/fracking11-1.png.webp?itok=Npgjq7SZ 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"334\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2012/04/fracking11-1.png.webp?itok=vh_OSllY 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2012/04/fracking11-1.png.webp?itok=AzdEgKzD 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"297\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2012/04/fracking11-1.png.webp?itok=2pI0GyUj 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/04/fracking11-1.png.webp?itok=AhAyXfnP 2x\" type=\"image/webp\" width=\"540\" height=\"334\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"334\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/04/fracking11-1.png.jpg?itok=AhAyXfnP\" alt title=\"fracking\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cbr>\nEin weiterer, sehr guter Einsatzzweck für parallaxes Scrolling bietet sich bei Webseiten von Agenturen. Dabei werden die wichtigsten Informationen über die Agentur auf einer langen Scrollpages in kleine Portionen geteilt, um dann mittels parallaxem Scrolling optisch aufbereitet zu werden. Ein schönes Beispiel hierfür bietet \u003Ca href=\"http://www.soleilnoir.net/believein/#/start\">Soleil Noir\u003C/a>.\u003Cbr>\n\u003Ca href=\"http://www.soleilnoir.net/believein/#/start\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"36c8e88c-cfdc-4418-acf1-a66f167f1091\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2012/04/soleinoir11-1.png.webp?itok=hBaxIDSk 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2012/04/soleinoir11-1.png.webp?itok=25HY51N_ 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"520\" height=\"307\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2012/04/soleinoir11-1.png.webp?itok=HGV9amFQ 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2012/04/soleinoir11-1.png.webp?itok=HrpxegZ4 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"520\" height=\"307\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2012/04/soleinoir11-1.png.webp?itok=hDE6Gtzz 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2012/04/soleinoir11-1.png.webp?itok=D8ERwgqV 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"520\" height=\"307\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2012/04/soleinoir11-1.png.webp?itok=KtwAX3xD 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2012/04/soleinoir11-1.png.webp?itok=RKF0410c 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"283\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2012/04/soleinoir11-1.png.webp?itok=2WYYLMN1 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/04/soleinoir11-1.png.webp?itok=teONPyri 2x\" type=\"image/webp\" width=\"520\" height=\"307\">\n                  \u003Cimg loading=\"lazy\" width=\"520\" height=\"307\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/04/soleinoir11-1.png.jpg?itok=teONPyri\" alt title=\"soleinoir\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003C/p>\n\u003Ch4>Nachteile beim Einsatz von parallaxem Scrolling\u003C/h4>\n\u003Cp>Je nach eingesetztem Framework ist parallaxes Scrolling rechenintensiv und daher gerade für ältere Computer nicht geeignet. Da man ältere Maschinen aber natürlich nicht ausschließen kann, ergibt sich der größte Aufwand vor allem durch den Mehraufwand, die Seiten auch auf älteren Computern gut aussehen zu lassen. Das ist natürlich vor allem bei Seiten, für die parallaxes Scrolling auch inhaltlich eine große Rolle spielen, ein Problem.\u003Cbr>\nVor allem ist beim Einsatz von parallaxem Scrolling aber eins zu bedenken: Es ist und bleibt ein Effekt und sollte nie zum Selbstzweck eingesetzt werden, sondern immer nur, wenn es vom Konzept her Sinn macht – genau wie alle anderen Effekte im Internet auch. Das gilt natürlich auch für die Stärke des Effekts, der nie so stark sein darf, dass er vom Content ablenkt.\u003Cbr>\nBeachtet man diese beiden Punkte und hat ein Konzept, bei dem parallaxes Scrolling Sinn macht, ist es ein hübscher Effekt um etwas Dynamik in die Seite zu bringen.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n",{"__typename":150,"id":151,"excludeFromScreenreader":13,"mediaImage":152,"name":157,"path":160,"status":20},"MediaImage","2075",{"__typename":153,"url":154,"width":155,"height":156,"alt":157,"title":157,"size":158,"mime":159},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2012/04/parallax_scrolling-1.jpg",1920,1280,"Liechtenecker Büro",202226,"image/jpeg","/media/2075/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://liechtenecker.at/blog/parallaxes-scrolling/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Parallaxes Scrolling - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Parallaxes Scrolling in Webseiten bezeichnet einen Effekt, bei dem unterschiedliche Ebenen verschieden schnell bewegen, wenn der User scrollt. Dabei entsteht für den Betrachter eine Illusion der Dreidimensionalität. Bevor ich aber näher darauf eingehe, möchte ich eine kurze Einführung geben. In der Realwelt ist parallaxes Scrolling eng mit dem Begriff Bewegungsparallaxe verwandt. Bewegungsparallaxe ist ein Phänomen, […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/parallaxes-scrolling/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2012-04-02T09:17:41+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://liechtenecker.at/wp-content/uploads/2015/02/parallax_scrolling_kreis-1-300x300.jpg\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"4 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://liechtenecker.at/#website\",\"url\":\"https://liechtenecker.at/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://liechtenecker.at/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/blog/parallaxes-scrolling/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://liechtenecker.at/wp-content/uploads/2015/02/parallax_scrolling_kreis-1.jpg\",\"width\":500,\"height\":500,\"caption\":\"Parallax Scrolling\"},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/parallaxes-scrolling/#webpage\",\"url\":\"https://liechtenecker.at/blog/parallaxes-scrolling/\",\"name\":\"Parallaxes Scrolling - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://liechtenecker.at/blog/parallaxes-scrolling/#primaryimage\"},\"datePublished\":\"2012-04-02T09:17:41+00:00\",\"dateModified\":\"2012-04-02T09:17:41+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/parallaxes-scrolling/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":163,"id":164,"myRole":165,"name":166,"nickname":167},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":169},[170,185,198],{"__typename":79,"id":171,"title":172,"path":173,"wpTeaserText":174,"wpPromotedTeaserImage":13,"wpHeaderImage":175},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":150,"id":176,"excludeFromScreenreader":13,"mediaImage":177,"name":183,"path":184,"status":20},"3364",{"__typename":153,"url":178,"width":179,"height":180,"alt":181,"title":13,"size":182,"mime":159},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":186,"title":187,"path":188,"wpTeaserText":189,"wpPromotedTeaserImage":13,"wpHeaderImage":190},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":150,"id":191,"excludeFromScreenreader":13,"mediaImage":192,"name":196,"path":197,"status":20},"3355",{"__typename":153,"url":193,"width":179,"height":180,"alt":194,"title":13,"size":195,"mime":159},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":199,"title":200,"path":201,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":202},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":150,"id":203,"excludeFromScreenreader":21,"mediaImage":204,"name":208,"path":209,"status":20},"3303",{"__typename":153,"url":205,"width":179,"height":180,"alt":206,"title":13,"size":207,"mime":159},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":211,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":212,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":216,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":219,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":222,"Menu:footer":225,"ROOT_QUERY":235,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":251,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":254,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":257,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":260,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":263,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":266,"Menu:nuxt-main-menu":269,"TermCategories:8":283,"TermTags:604":294,"TermTags:939":295,"MediaImage:2075":296,"User:23":298,"NodeWpPost:1120":299,"MediaImage:3364":322,"NodeWpPost:1619":324,"MediaImage:3355":327,"NodeWpPost:1616":329,"MediaImage:3303":332,"NodeWpPost:1606":334},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",213,"internal",20,"expanded",21,"attributes",215],{"__ref":214},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",217,"internal",20,"expanded",21,"attributes",218],{"__ref":214},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",220,"internal",20,"expanded",21,"attributes",221],{"__ref":214},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",223,"internal",21,"expanded",21,"attributes",224],{"__ref":214},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",226],[227,229,231,233],{"__ref":228},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":230},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":232},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":234},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",236,"menu({\"name\":\"FOOTER\"})",237,"menu({\"name\":\"NUXT_MAIN_MENU\"})",239,"route({\"path\":\"/blog/parallaxes-scrolling\"})",241,"latestKnowhow({\"excludeId\":\"1120\",\"limit\":3})",244],"Query",{"__ref":238},"Menu:footer",{"__ref":240},"Menu:nuxt-main-menu",["null","__typename",77,"entity",242],{"__ref":243},"NodeWpPost:1120",[245,247,249],{"__ref":246},"NodeWpPost:1619",{"__ref":248},"NodeWpPost:1616",{"__ref":250},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",252,"internal",20,"expanded",21,"attributes",253],{"__ref":214},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",255,"internal",20,"expanded",21,"attributes",256],{"__ref":214},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",258,"internal",20,"expanded",21,"attributes",259],{"__ref":214},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",261,"internal",20,"expanded",21,"attributes",262],{"__ref":214},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",264,"internal",20,"expanded",21,"attributes",265],{"__ref":214},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",267,"internal",20,"expanded",21,"attributes",268],{"__ref":214},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",270],[271,273,275,277,279,281],{"__ref":272},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":274},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":276},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":278},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":280},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":282},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",284,"langcode",285,"changed",286,"metatag",287],["null","__typename",118,"processed",119,"format",120],{"__ref":214},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[288,290,292],["null","__typename",93,"tag",94,"attributes",289],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",291],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",293],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",150,"id",151,"excludeFromScreenreader",13,"mediaImage",297,"name",157,"path",160,"status",20],["null","__typename",153,"url",154,"width",155,"height",156,"alt",157,"title",157,"size",158,"mime",159],["null","__typename",163,"id",164,"myRole",165,"name",166,"nickname",167],["null","__typename",79,"id",80,"title",81,"changed",300,"created",301,"langcode",302,"path",90,"promote",21,"status",20,"sticky",21,"metatag",303,"category",310,"contentElements",13,"evergreen",13,"tags",312,"wpBody",317,"wpHeaderImage",13,"wpHeaderImageOld",318,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",161,"author",320],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":214},[304,306,308],["null","__typename",93,"tag",94,"attributes",305],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",307],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",309],["null","__typename",109,"property",110,"content",81],{"__ref":311},"TermCategories:8",[313,315],{"__ref":314},"TermTags:604",{"__ref":316},"TermTags:939",["null","__typename",147,"processed",148,"format",120,"summary",13],{"__ref":319},"MediaImage:2075",{"__ref":321},"User:23",["null","__typename",150,"id",176,"excludeFromScreenreader",13,"mediaImage",323,"name",183,"path",184,"status",20],["null","__typename",153,"url",178,"width",179,"height",180,"alt",181,"title",13,"size",182,"mime",159],["null","__typename",79,"id",171,"title",172,"path",173,"wpTeaserText",174,"wpPromotedTeaserImage",13,"wpHeaderImage",325],{"__ref":326},"MediaImage:3364",["null","__typename",150,"id",191,"excludeFromScreenreader",13,"mediaImage",328,"name",196,"path",197,"status",20],["null","__typename",153,"url",193,"width",179,"height",180,"alt",194,"title",13,"size",195,"mime",159],["null","__typename",79,"id",186,"title",187,"path",188,"wpTeaserText",189,"wpPromotedTeaserImage",13,"wpHeaderImage",330],{"__ref":331},"MediaImage:3355",["null","__typename",150,"id",203,"excludeFromScreenreader",21,"mediaImage",333,"name",208,"path",209,"status",20],["null","__typename",153,"url",205,"width",179,"height",180,"alt",206,"title",13,"size",207,"mime",159],["null","__typename",79,"id",199,"title",200,"path",201,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",335],{"__ref":336},"MediaImage:3303"]