{"id":7293,"date":"2020-01-14T08:54:00","date_gmt":"2020-01-14T08:54:00","guid":{"rendered":"https:\/\/www.templatemonster.com\/de\/blog\/?p=7293"},"modified":"2020-05-21T11:15:40","modified_gmt":"2020-05-21T11:15:40","slug":"tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/","title":{"rendered":"Tutorial: Wie erstellt man einen Parallax-Effekt mit CSS"},"content":{"rendered":"

In diesem Beitrag entdeckst du jede Menge beeindruckender Beispiele f\u00fcr Parallax-Websites sowie praktische Tipps, um diesen Effekt zu erzeugen.<\/strong><\/p>\n

\"\"<\/p>\n

Parallax Scrolling einfach erkl\u00e4rt<\/strong><\/a><\/p>\n

Wo liegt der Unterschied?<\/strong><\/a><\/p>\n

Sehenswerte Beispiele f\u00fcr den Parallax Scrolling-Effekt<\/strong><\/a><\/p>\n

Parallax Scrolling einfach erkl\u00e4rt<\/h2>\n

Parallax geh\u00f6rt zu einem der beliebtesten Effekte in Webdesign. Er l\u00e4sst das Hintergrundbild mit einer geringeren Geschwindigkeit im Vergleich zu dem Vordergrundbild bewegen, wenn man die Seite nach unten scrollt. Auf diese Weise verleiht er den Seiten das Gef\u00fchl von Tiefe und l\u00e4sst sie dynamischer aussehen.<\/p>\n

Parallax kann sowohl f\u00fcr einzelne Bilder als auch f\u00fcr das gesamte Layout der Website verwendet werden. Es ist durchaus eine universelle L\u00f6sung f\u00fcr jedes Projekt. Werft bitte einen Blick auf die folgenden Beispiele:<\/p>\n

Intacto\"\"<\/p>\n

Hier ist ein gro\u00dfartiges Beispiel f\u00fcr eine interaktive Zeitleiste-Seite. Es sieht ziemlich cool stellt eine dynamische gro\u00dfartige L\u00f6sung zur Pr\u00e4sentation des \"\u00dcber Uns\" Bereich der Website dar.<\/p>\n

Graphicnovel<\/a><\/p>\n

\"\"<\/p>\n

Eine Comics-Seite von Peugeot Unternehmen ist eine weitere gute Alternative, um neue Produkte einem breiteren Publikum vorzustellen. Das Unternehmen hat eine kurze Geschichte kreiert, um f\u00fcr ihr Hybrid-Modell zu werben.<\/p>\n

SoleilNoel<\/a><\/p>\n

\"\"<\/p>\n

Eine attraktive und zugleich schnelle Website mit sanftem Parallax-Scrolling<\/strong>. Diese Art von Layout wird gro\u00dfartig f\u00fcr Portfolio und Landeseiten funktionieren.<\/p>\n

Sieht ziemlich cool aus, nicht wahr? Lasst uns nun einen Blick darauf werfen, wie wir den gleichen Effekt selbst erstellen und in jedes Eurer\u00a0Projekte integrieren k\u00f6nnen. Also, im Grunde kann man Parallax-Scrolling mit Hilfe von JavaScript<\/strong> und mit CSS<\/strong> erstellen.\"\"<\/a><\/p>\n

Wo liegt der Unterschied?<\/strong><\/h3>\n

Nun, Ihr werdet keinen gro\u00dfen Unterschied auf einem einzigen Bild erkennen k\u00f6nnen. Die Websites, die mehrere Parallax-Scrolling Features enthalten, laden einfach viel langsamer, wenn sie mit jQuery<\/strong> gebaut sind. Zur gleichen Zeit ist der CSS basierende Parallax-Effekt<\/strong> schwieriger an das Ansichtsfeld<\/strong> des Browsers anzupassen. Also lasst uns diese Methode jetzt genau anschauen.<\/p>\n

\n\n\n\n
\n
1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n<\/pre>\n<\/td>\n
\n
<div class=\"parallax_section parallax_image_first\">\n  <div class=\"center\">\n    <article>Some text  <\/article>\n    <\/div>\n  <\/div>\n<!--Block with content--> \n<div class=\"content_block\">\n  <div class=\"center\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tempor lorem. Proin egestas sagittis orci sit amet ultricies. Etiam nec pharetra justo, scelerisque scelerisque elit. Nam pretium purus eu neque pretium accumsan. Proin eget pulvinar dui. Vestibulum nulla magna, auctor quis mollis eget, hendrerit nec enim. Nam commodo feugiat metus, ac auctor mi. Quisque sed ante eget arcu sollicitudin sodales nec nec nunc.<\/div>\n<\/div>\n<div class=\"parallax_section parallax_image_second\">\n  <div class=\"center\">\n    <article>Some text  <\/article>\n    <\/div>\n  <\/div>\n<!--Block with content--> \n\u00a0\n<div class=\"content_block\">\n\u00a0\n<div class=\"center\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tempor lorem. Proin egestas sagittis orci sit amet ultricies. Etiam nec pharetra justo, scelerisque scelerisque elit. Nam pretium purus eu neque pretium accumsan. Proin eget pulvinar dui. Vestibulum nulla magna, auctor quis mollis eget, hendrerit nec enim. Nam commodo feugiat metus, ac auctor mi. Quisque sed ante eget arcu sollicitudin sodales nec nec nunc.<\/div>\n\u00a0\n<\/div><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Lasst uns nun mit der CSS-Datei<\/strong> fortfahren. Wir m\u00fcssen die .parallax_section<\/strong> anpassen. Gebt bitte eine richtige H\u00f6he und andere Attribute wie, Hintergrund-Anhang, Position und Gr\u00f6\u00dfe ein. In meinem Fall wird es folgenderweise aussehen:<\/p>\n
\n\n\n\n
\n
1\n2\n3\n4\n5\n6\n7\n8\n<\/pre>\n<\/td>\n
\n
.parallax_section{\n\theight: 600px;\n  \tbackground-repeat: no-repeat;\n  \tbackground-attachment: fixed;\n  \tbackground-size: cover;\n  \tbackground-position: 100% auto;\n\t\tposition:relative;\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Als n\u00e4chstes setzten wir das gew\u00fcnschte Bild ein. Daf\u00fcr werden wir einen weiteren Selektor verwenden - .parallax_image_first<\/strong>. F\u00fcgt bitte den Pfad der Datei hinzu.<\/p>\n
\n\n\n\n
\n
1\n2\n3\n<\/pre>\n<\/td>\n
\n
.parallax_image_first{\n\t background-image: url(\"..\/images\/del\/diagonal_background.jpg\");\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Schlie\u00dflich lasst uns Stile zum Text auf dem Bild hinzuf\u00fcgen.<\/p>\n
\n\n\n\n
\n
1\n2\n3\n4\n5\n6\n7\n8\n9\n<\/pre>\n<\/td>\n
\n
    font-size: 60px;\n    position: absolute;\n    top: 50%;\n    margin-top: -15px;\n    left: 0;\n    right: 0;\n    text-align: center;\n    font-weight: 600;\n    color: #fff;<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Es wird ungef\u00e4hr so aussehen:<\/p>\n
\"\"<\/p>\n
DEMO<\/a> | DOWNLOAD<\/a><\/h3>\n
Parallax mit JavaScript<\/strong><\/h3>\n
Nun lasst uns Parallax-Scrolling mit JavaScript bauen. Daf\u00fcr werden wir ein gebrauchsfertiges jQuary Plugin<\/strong> von  pixelcog.com<\/a><\/strong> verwenden. Es ist eigentlich eines der einfachsten Plugins, mit denen ich gearbeitet habe. Damit es funktioniert, m\u00fcsst ihr die jq Bibliothek herunterladen. Kopiert die parallax.min Datei in Euer Projekt und f\u00fcgt den HTML-Code ein.<\/p>\n
Nun m\u00fcssen wir ein Bild hinzuf\u00fcgen. Daf\u00fcr verwenden wir einen Teil vom fertigen Code.<\/p>\n
Gebt die Angaben in die CSS-Datei ein:<\/p>\n
\n\n\n\n
\n
1\n2\n3\n4\n<\/pre>\n<\/td>\n
\n
.parallax-window {\n    min-height: 400px;\n    background: transparent;\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\u00c4ndert den Text und seht Euch die Vorschau der Seite an. Ihr k\u00f6nnt auch die Optionen des Bildes direkt im HTML-Code \u00e4ndern. Aus diesem Grund m\u00fcssen wir ein Datenpr\u00e4fix der Variable hinzuf\u00fcgen und es im unteren Container eintippen, z.B., wenn wir die Scroll-Geschwindigkeit \u00e4ndern m\u00f6chten, f\u00fcgen wir die Daten-Geschwindigkeit = \"0.8\"<\/strong> in HTML ein.<\/p>\n
Wie Ihr sehen k\u00f6nnt, sieht es viel deutlicher mit dem Skript aus und erfordert weniger vom Hand geschriebenen Code. Also, wenn der Abbildungsma\u00dfstab f\u00fcr das Projekt von entscheidender Bedeutung ist, die Verwendung von Skript eine gute Wahl - in allen anderen F\u00e4llen k\u00f6nnt Ihr alles mit CSS tun.<\/p>\n
\"\"<\/p>\n
DEMO<\/a> | DOWNLOAD<\/a><\/h3>\n
\u00a0<\/h3>\n
Es gibt auch eine Vielzahl von anderen Parallax-Skripts im Internet, erz\u00e4hlt doch gern, welche Ihr bevorzugt. Teilt Eure Ideen in den Kommentaren und lasst mich wissen, wenn ich etwas missverstanden habt.<\/p>\n
\"\"<\/a>Sehenswerte Beispiele f\u00fcr den Parallax Scrolling-Effekt<\/h3>\n
Der gro\u00dfe Vorteil von Parallax Scrolling besteht darin, dass sich dieser Trend in der Regel nahtlos mit anderen Techniken kombinieren l\u00e4sst. Zum Beispiel geht Parallax Scrolling und Onepage-Design nahezu Hand in Hand. Wir m\u00f6chten dir die besten Designs f\u00fcr Parallax Scrolling vorstellen. Scroll nach unten, um dir spannende Websites mit diesem Effekt anzusehen.<\/span><\/p>\n
Dancing with Fruits<\/strong>\"\"<\/span><\/a><\/p>\n
Die Website wurde mehrfach f\u00fcr ihr herausragendes Design ausgezeichnet. Und das aus gutem Grund: Ich w\u00fcrde diese Website als ein Meisterwerk der Webkunst bezeichnen. Und die Technik von Parallax Scrolling nimmt einen wichtigen Platz in dieser Komposition ein, die auf die F\u00f6rderung einer gesunden Lebensweise abzielt.<\/span><\/p>\n
Andrew McCarthy<\/strong>\"\"<\/span><\/a><\/p>\n
Die Animation ist unsterblich. Die laufende Katze in diesem Design best\u00e4tigt diese Aussage.<\/span><\/p>\n
Pi's Epic Journey<\/strong>\"\"<\/span><\/a><\/p>\n
Diese Website pr\u00e4sentiert die Entstehungsgeschichte des Films \"Life of Pi\". Du erf\u00e4hrst alle Geheimnisse und die harte Arbeit, die die Sch\u00f6pfer geleistet haben, um so ein kinematographisches Meisterwerk zu drehen.<\/span><\/p>\n
Num\u00e9ro10<\/strong><\/span><\/a><\/p>\n
\"\"<\/p>\n
Diese franz\u00f6sische Website versetzt dich in die Welt der grotesken Grafik, die nach dem Scrollen kreative Parallax-Effekte erzeugt.<\/span><\/p>\n
Peugeot HYbrid4<\/strong>\"\"<\/span><\/a><\/p>\n
Das ist ein sehr konzeptionelles Ding. Eigentlich stellt diese Parallax-Website einen graphischen Roman dar, mit einer bestimmten Handlung, mit einem eindrucksvoll gezeichneten Bild und sogar mit Toneffekten. All dies versetzt dich in die Abenteuer-Atmosph\u00e4re, die f\u00fcr den Peugeot Hybrid 4 wirbt.<\/span><\/p>\n
Tag Reaction<\/strong>\"\"<\/span><\/p>\n
Dieses Beispiel versetzt einen Benutzer in die minimalistische Atmosph\u00e4re der chemischen Verfahrenstechnik. Das Design ist ziemlich sauber, das ist ein Hauptmerkmal dieser Website.<\/span><\/p>\n
Cyclemon<\/strong><\/span><\/a><\/p>\n
\"\"<\/p>\n
M\u00f6chtest du ein Fahrrad ausw\u00e4hlen? Auf dieser Website findest du alle Arten von Fahrr\u00e4dern, die auf den Stra\u00dfen zu sehen sind. Ein bisschen Humor ist mit dabei.<\/span><\/p>\n
Every Last Drop<\/strong>\"\"<\/span><\/a><\/p>\n
Auf dieser Website erwartet dich eine interessante und informative Geschichte. Das Thema ist f\u00fcr jeden Menschen aufrecht - es geht um Wasser. Die Vektorgrafik und Parallax Scrolling haben die Geschichte extrem sch\u00f6n gemacht.<\/span><\/p>\n
Michelberger Booze<\/strong><\/span><\/a><\/p>\n
\"\"<\/p>\n
Magst du Alkohol? Nun, du kannst ein knallharter Straight-Edge-Typ sein, aber du wirst es nicht leugnen, dass diese Website mit Parallax Scrolling wirklich sch\u00f6n ist.<\/span><\/p>\n
Boy-Coy<\/strong>\"\"<\/span><\/a><\/p>\n
Ich kann keine besonderen Merkmale hervorheben, also sage ich einfach: Es ist ein gutes Design mit dem Parallax Scrolling.<\/span><\/p>\n
iStrategyLabs<\/strong><\/p>\n
\"\"<\/p>\n
Freier Raum, 8-Bit-Elemente, fliegende Untertassen, Astronaut - all dies ist auf dieser kreativen Website mit Parallax Scrolling enthalten.<\/span><\/p>\n
Flash vs HTML<\/strong><\/span><\/a><\/p>\n
\"\"<\/p>\n
Flash oder HTML? Nat\u00fcrlich HTML. Dank sch\u00f6nem Design mit Animationen ist diese Website deine Aufmerksamkeit wert.<\/span><\/p>\n
Steven and the Unique Horn<\/strong><\/span><\/a><\/p>\n
\"\"<\/p>\n
Wenn du ironische Geschichten magst, wirst du bestimmt Gefallen am Gedicht \u00fcber Steven und Einhorn m\u00f6gen. Das Parallax Scrolling dient als Mechanismus zur Ver\u00e4nderung der Illustrationen in der Handlung.<\/span><\/p>\n
NASA: Prospect<\/strong><\/span><\/a><\/p>\n
\"\"<\/p>\n
Die NASA erfreut uns mit einem attraktiven Parallax Scrolling-Design, das eine aufregende Reise eines Astronauten durch den Weltraum darstellt.<\/span><\/p>\n
Ophir - The Town That Came In From The Cold<\/strong><\/span><\/a><\/p>\n
\"\"<\/p>\n
Hier hilft dir das Parallax Scrolling, die ganze Stadt aus der Vogelperspektive zu betrachten. Das Konzept ist recht originell.<\/span><\/p>\n
Savages<\/strong><\/span><\/a><\/p>\n
\"\"<\/p>\n
Dies ist eine Titelgeschichte f\u00fcr die Frauenband Savages. Die interessantesten Elemente sind hier Standbilder aus Video, die eine Atmosph\u00e4re der Pr\u00e4senz schaffen.<\/span><\/p>\n
The Rise and Rise of David Bowie<\/strong><\/span><\/a><\/p>\n
\"\"<\/p>\n
Gef\u00e4llt dir David Bowie? Das liegt an dir. Aber seine Karriere, insbesondere die Entwicklung seiner B\u00fchnenbilder, ist au\u00dfergew\u00f6hnlich. Diese Website pr\u00e4sentiert sie auf eine recht attraktive Art und Weise mit Hilfe von Parallax Scrolling.<\/span><\/p>\n
13 Reasons Why Your Brain Craves Infographics<\/strong><\/span><\/a><\/p>\n
\"\"<\/p>\n
Es handelt sich um eine \u00fcbliche Infografik, die dennoch ungew\u00f6hnlich in Form einer Website mit Parallax Scrolling dargestellt wird. Der Stil ist sch\u00f6n mit Vektorgrafiken gestaltet.<\/span><\/p>\n
BenTheBodyguard<\/b><\/a><\/p>\n
\"\"<\/span><\/p>\n
Unfold<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
Iutopi<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
NikeBetterWorld<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
WeCamefromMars<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
JanPloch<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
BeautifulExplorer<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
LostWorldsFairs<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
FingerBilliards<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
Terredevenements<\/b><\/p>\n
 \"\"<\/span><\/p>\n
Pojeta<\/b><\/a><\/p>\n
\"\"<\/span><\/p>\n
MoodsOfNorway<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
RapidBoot<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
Head2Heart<\/b><\/p>\n
 \"\"<\/span><\/p>\n
Culturalsolutions<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
Rastapenatal<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
Reverenddanger<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
Farmhousefare<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
Billysdiner<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
Rowtothepole<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
Guyvernes<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
WorryFreelabs<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
IWC<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
DavidBeckham7<\/b><\/a><\/p>\n
 \"\"<\/span><\/p>\n
Lagentehadichosi<\/b><\/a><\/p>\n
\"\"<\/p>\n
Wie du sehen kannst, sind diese Parallax-Websites wirklich vielf\u00e4ltig. Parallax kann sowohl als Hauptelement als auch nur ein Teil des Designs verwendet werden.\u00a0 <\/span><\/p>\n
Quelle: How to Create Parallax Effect with Pure CSS<\/a> von Alex Samoylenko<\/a><\/em><\/p>\n
Lies mehr zum Thema<\/h3>\n
10 Webdesign-Trends, die 2020 angesagt sind <\/a><\/p>\n
Die gr\u00f6\u00dfte Auswahl an kostenlosen Tools und Ressourcen f\u00fcr Webdesigner und Entwickler <\/a><\/p>\n
10+ beste Magazine f\u00fcr Webdesigner <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In diesem Beitrag entdeckst du jede Menge beeindruckender Beispiele f\u00fcr Parallax-Websites sowie praktische Tipps, um diesen Effekt zu erzeugen. Parallax Scrolling einfach erkl\u00e4rt Wo liegt der Unterschied? Sehenswerte Beispiele f\u00fcr den Parallax Scrolling-Effekt Parallax Scrolling einfach erkl\u00e4rt Parallax geh\u00f6rt zu einem der beliebtesten Effekte in Webdesign. Er l\u00e4sst das Hintergrundbild mit einer geringeren Geschwindigkeit im […]<\/p>\n","protected":false},"author":1805543,"featured_media":7359,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[183,34,226],"yoast_head":"\nTutorial: Wie erstellt man einen Parallax-Effekt mit CSS<\/title>\n<meta name=\"description\" content=\"Lernt mit diesem Artikel, wie man einfach und schnell einen Parallax-Effekt mit CSS erstellen kann.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: Wie erstellt man einen Parallax-Effekt mit CSS\" \/>\n<meta property=\"og:description\" content=\"Lernt mit diesem Artikel, wie man einfach und schnell einen Parallax-Effekt mit CSS erstellen kann.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Deutscher Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/templatemonster.de\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-14T08:54:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-21T11:15:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2016\/03\/Parallax.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"899\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olga Wirth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olga Wirth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/\"},\"author\":{\"name\":\"Olga Wirth\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e\"},\"headline\":\"Tutorial: Wie erstellt man einen Parallax-Effekt mit CSS\",\"datePublished\":\"2020-01-14T08:54:00+00:00\",\"dateModified\":\"2020-05-21T11:15:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/\"},\"wordCount\":1337,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"keywords\":[\"Codierung\",\"CSS3\",\"jQuery\"],\"articleSection\":[\"Webentwicklung\"],\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/\",\"url\":\"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/\",\"name\":\"Tutorial: Wie erstellt man einen Parallax-Effekt mit CSS\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#website\"},\"datePublished\":\"2020-01-14T08:54:00+00:00\",\"dateModified\":\"2020-05-21T11:15:40+00:00\",\"description\":\"Lernt mit diesem Artikel, wie man einfach und schnell einen Parallax-Effekt mit CSS erstellen kann.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial: Wie erstellt man einen Parallax-Effekt mit CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/de\/#website\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"name\":\"TemplateMonster Deutscher Blog\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\",\"name\":\"MonsterPost Deutschland\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Deutschland\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg\",\"https:\/\/www.facebook.com\/templatemonster.de\/\",\"https:\/\/twitter.com\/TM_Deutschland\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e\",\"name\":\"Olga Wirth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Olga Wirth\"},\"description\":\"Hat sich Texterin auf den Bereich Webdesign und Online-Marketing spezialisiert. Olga auf Facebook.\",\"url\":\"https:\/\/monsterspost.com\/de\/author\/olgawirth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: Wie erstellt man einen Parallax-Effekt mit CSS","description":"Lernt mit diesem Artikel, wie man einfach und schnell einen Parallax-Effekt mit CSS erstellen kann.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/","og_locale":"de_DE","og_type":"article","og_title":"Tutorial: Wie erstellt man einen Parallax-Effekt mit CSS","og_description":"Lernt mit diesem Artikel, wie man einfach und schnell einen Parallax-Effekt mit CSS erstellen kann.","og_url":"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/","og_site_name":"TemplateMonster Deutscher Blog","article_publisher":"https:\/\/www.facebook.com\/templatemonster.de\/","article_published_time":"2020-01-14T08:54:00+00:00","article_modified_time":"2020-05-21T11:15:40+00:00","og_image":[{"width":899,"height":538,"url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2016\/03\/Parallax.jpg","type":"image\/jpeg"}],"author":"Olga Wirth","twitter_card":"summary_large_image","twitter_creator":"@TM_Deutschland","twitter_site":"@TM_Deutschland","twitter_misc":{"Verfasst von":"Olga Wirth","Gesch\u00e4tzte Lesezeit":"8 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/"},"author":{"name":"Olga Wirth","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e"},"headline":"Tutorial: Wie erstellt man einen Parallax-Effekt mit CSS","datePublished":"2020-01-14T08:54:00+00:00","dateModified":"2020-05-21T11:15:40+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/"},"wordCount":1337,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"keywords":["Codierung","CSS3","jQuery"],"articleSection":["Webentwicklung"],"inLanguage":"de-DE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/","url":"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/","name":"Tutorial: Wie erstellt man einen Parallax-Effekt mit CSS","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/#website"},"datePublished":"2020-01-14T08:54:00+00:00","dateModified":"2020-05-21T11:15:40+00:00","description":"Lernt mit diesem Artikel, wie man einfach und schnell einen Parallax-Effekt mit CSS erstellen kann.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/de\/tutorial-wie-erstellt-man-einen-parallax-effekt-mit-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/de\/"},{"@type":"ListItem","position":2,"name":"Tutorial: Wie erstellt man einen Parallax-Effekt mit CSS"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/de\/#website","url":"https:\/\/monsterspost.com\/de\/","name":"TemplateMonster Deutscher Blog","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/de\/#organization","name":"MonsterPost Deutschland","url":"https:\/\/monsterspost.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Deutschland"},"image":{"@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg","https:\/\/www.facebook.com\/templatemonster.de\/","https:\/\/twitter.com\/TM_Deutschland"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e","name":"Olga Wirth","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Olga Wirth"},"description":"Hat sich Texterin auf den Bereich Webdesign und Online-Marketing spezialisiert. Olga auf Facebook.","url":"https:\/\/monsterspost.com\/de\/author\/olgawirth\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/7293"}],"collection":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/users\/1805543"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/comments?post=7293"}],"version-history":[{"count":29,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/7293\/revisions"}],"predecessor-version":[{"id":26704,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/7293\/revisions\/26704"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media\/7359"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media?parent=7293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/categories?post=7293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/tags?post=7293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}