{"id":3108,"date":"2014-09-04T19:34:02","date_gmt":"2014-09-04T17:34:02","guid":{"rendered":"https:\/\/wolkenhart.com\/webdesignblog\/?p=3108"},"modified":"2014-09-04T19:34:02","modified_gmt":"2014-09-04T17:34:02","slug":"parallax-scrolling","status":"publish","type":"post","link":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling","title":{"rendered":"Parallax Scrolling"},"content":{"rendered":"

Von einigen Vertretern der Zunft wird Parallax Design als ein \u00dcbel bezeichnet, andere loben es in den Himmel. Wenn man Parallax Scrolling<\/strong> auf einer simplen Webseite ohne gro\u00dfartige Elemente betrachtet, dann k\u00f6nnte man doch fast zu dem Schluss kommen, es sei nur ein Versuch diese aufzuwerten. So ist es kein Wunder so mancher hier schon einmal die Nase voll hat. Wird das ein Scrolling-Plug-In an der falschen Stelle eingesetzt, erscheint eine Website einfach nur noch un\u00fcbersichtlich und viele User werden einfach abgeschreckt.<\/p>\n

\"Parallax<\/p>\n

Parallax Scrolling Plugins, ein wunderbares Designmittel f\u00fcr Entwickler<\/h2>\n

Eigentlich muss man sich nur an Apple orientieren um einen dezenten aber doch sehr effektiven Ansatz zu betrachten, bei dem Parallax Scrolling<\/em> zu einem wahren Erfolg wird. Auf der Produktseite des iPhone 5c<\/a> kann man es bewundern und bemerkt sehr schnell, dass man das Smartphone nie aus dem Auge verliert.<\/p>\n

\"Apple

Screenshot: Produktseite Apple iPhone 5c<\/p><\/div>\n

5 kostenlose Parallax Scrolling Plugins<\/h3>\n

Wenn auch Dein Interesse nun geweckt wurde, kannst du Dir vielleicht die nun folgenden f\u00fcnf JQuery Prallax Scrolling Plugins ansehen. Sie sind alle Kostenlos und lassen sich sehr einfach in bestehende Websites einbauen.<\/p>\n

Parallax.JS<\/h4>\n

Bei der Parallax JavaScript<\/a> Bibliothek werden alle Tags zusammen mit einem Element direkt von der animate class aud geparsed. Auf diese Weise werden die entsprechenden Effekte erzeugt. Prallax.JS basiert zur G\u00e4nze auf HTML und CSS. Eine besondere Funktion, besteht darin das man bestimmte Bereiche der Seite auf locked setzen kann, so dass das Scrollen hier eine Weile anh\u00e4lt. Auf einer Demoseite<\/a> kannst du dir die Effektm\u00f6glichkeiten im Voraus anschauen. Heruntergeladen werden kann Parallax.JS bei Github.<\/p>\n

Scrollorama<\/h5>\n

Mit Scrollorama, lassen sich sogenannte DOM-Elemente animieren. Dies geschieht \u00fcber die Position des Scrollbalkens im Browser. Dieses Feature eignet sich hervorragend um Tiefeneffekte zu erzeugen. Durch das bewegen der Scroll-Leiste, werden diese abgespielt und lassen Inhalte so erscheinen, als wenn sie aus dem Hintergrund nach vorn in das Bild geschoben werden. Hierzu ist es n\u00f6tig, f\u00fcr jeden Bestandteil, welcher auf diese Weise angezeigt werden soll, einen eigenen CSS-Sektor zu erstellen. Er dann kann er an das Plugin weitergereicht und werden. Die Demo<\/a> findest du auf der Homepage des Plugins und du kannst es als Quellcode direkt herunterladen.<\/p>\n

jQuery Scrolldeck Parallax<\/h6>\n

Hier bewegen sich die ersten Elemente am Anfang etwas langsamer als die eigentliche Scrollbewegung es erwarten l\u00e4sst. Dieser Effekt wird durch die wechselnde Top Position des Hintergrundes erm\u00f6glicht. Bei jedem Pixel, das man nach unter scrollt, wird diese neu angepasst. Den Quellcode kannst du bei Github<\/a> herunterladen. Demo hier…<\/a><\/p>\n

Parallax Slider<\/h6>\n

Hier wird horizontal gescrollt. So wird der Effekt bei einem Verschieben nach links oder rechts ausgel\u00f6st. Gerade wer Artikel oder Fotos anzeigen will, profitiert eindeutig von der horizontalen Ausrichtung. Den Quellcode kannst Du auf der Entwicklerseite absolut kostenlos Downloaden<\/a>. Demo hier…<\/a><\/p>\n

Parallax Scrolling<\/h6>\n

Bei diesem Pluginn bewegt sich der Hintergrund mit einer anderen Geschwindigkeit als die \u00fcbrige Website. So erscheint es als w\u00fcrden sich zwei Ebenen \u00fcbereinander schieben. Die notwendigen Dateien, k\u00f6nnen bei Github<\/a> geladen werden. Demo hier…<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Von einigen Vertretern der Zunft wird Parallax Design als ein \u00dcbel bezeichnet, andere loben es in den Himmel. Wenn man Parallax Scrolling auf einer simplen Webseite ohne gro\u00dfartige Elemente betrachtet, dann k\u00f6nnte man doch fast zu dem Schluss kommen, es sei nur ein Versuch diese aufzuwerten. So ist es kein Wunder so mancher hier schon einmal die Nase voll hat. Wird das ein Scrolling-Plug-In an der falschen Stelle eingesetzt, erscheint eine Website einfach nur noch un\u00fcbersichtlich und viele User werden einfach abgeschreckt. Parallax Scrolling Plugins, ein wunderbares Designmittel f\u00fcr Entwickler Eigentlich muss man sich nur an Apple orientieren um einen dezenten aber doch sehr effektiven Ansatz zu betrachten, bei dem Parallax Scrolling zu einem wahren Erfolg wird. Auf der Produktseite des iPhone 5c kann man es bewundern und bemerkt sehr schnell, dass man das Smartphone nie aus dem Auge verliert. 5 kostenlose Parallax Scrolling Plugins Wenn auch Dein Interesse nun geweckt wurde, kannst du Dir vielleicht die nun folgenden f\u00fcnf JQuery Prallax Scrolling Plugins ansehen. Sie sind alle Kostenlos und lassen sich sehr einfach in bestehende Websites einbauen. Parallax.JS Bei der Parallax JavaScript Bibliothek werden alle Tags zusammen mit einem Element direkt von der animate class aud geparsed. Auf diese Weise werden die entsprechenden Effekte erzeugt. Prallax.JS basiert zur G\u00e4nze auf HTML und CSS. Eine besondere Funktion, besteht darin das man bestimmte Bereiche der Seite auf locked setzen kann, so dass das Scrollen hier eine Weile anh\u00e4lt. Auf einer Demoseite kannst du dir die Effektm\u00f6glichkeiten im Voraus anschauen. Heruntergeladen werden […]<\/p>\n","protected":false},"author":1,"featured_media":3112,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[237],"class_list":["post-3108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-parallax-scrolling"],"yoast_head":"\nParallax Scrolling<\/title>\n<meta name=\"description\" content=\"Parallax Scrolling Plugins ein wunderbares Designmittel f\u00fcr Entwickler. Hier kannst du dir f\u00fcnf JQuery Prallax Scrolling Plugins ansehen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Parallax Scrolling\" \/>\n<meta property=\"og:description\" content=\"Parallax Scrolling Plugins ein wunderbares Designmittel f\u00fcr Entwickler. Hier kannst du dir f\u00fcnf JQuery Prallax Scrolling Plugins ansehen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wolkenhart\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-04T17:34:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/09\/Parallax-Scrolling-Plugins.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"334\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mika Gustavson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wolkenhart\" \/>\n<meta name=\"twitter:site\" content=\"@wolkenhart\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling\"},\"author\":{\"name\":\"Mika Gustavson\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/#\\\/schema\\\/person\\\/4b869b4e36908e2e60076662203e0b0c\"},\"headline\":\"Parallax Scrolling\",\"datePublished\":\"2014-09-04T17:34:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling\"},\"wordCount\":515,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/Parallax-Scrolling-Plugins.jpg\",\"keywords\":[\"Parallax Scrolling\"],\"articleSection\":[\"Webdesign Agentur\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling\",\"url\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling\",\"name\":\"Parallax Scrolling\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/Parallax-Scrolling-Plugins.jpg\",\"datePublished\":\"2014-09-04T17:34:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/#\\\/schema\\\/person\\\/4b869b4e36908e2e60076662203e0b0c\"},\"description\":\"Parallax Scrolling Plugins ein wunderbares Designmittel f\u00fcr Entwickler. Hier kannst du dir f\u00fcnf JQuery Prallax Scrolling Plugins ansehen.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling#primaryimage\",\"url\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/Parallax-Scrolling-Plugins.jpg\",\"contentUrl\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/Parallax-Scrolling-Plugins.jpg\",\"width\":500,\"height\":334,\"caption\":\"Parallax Scrolling Plugins\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/parallax-scrolling#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Start\",\"item\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Parallax Scrolling\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/#website\",\"url\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/#\\\/schema\\\/person\\\/4b869b4e36908e2e60076662203e0b0c\",\"name\":\"Mika Gustavson\",\"description\":\"Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur \\\/ WordPress Agentur Wolkenhart\u00ae und freier Dozent an der Dualen Hochschule Baden-W\u00fcrttemberg.\",\"url\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/author\\\/webtalk\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Parallax Scrolling","description":"Parallax Scrolling Plugins ein wunderbares Designmittel f\u00fcr Entwickler. Hier kannst du dir f\u00fcnf JQuery Prallax Scrolling Plugins ansehen.","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:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling","og_locale":"de_DE","og_type":"article","og_title":"Parallax Scrolling","og_description":"Parallax Scrolling Plugins ein wunderbares Designmittel f\u00fcr Entwickler. Hier kannst du dir f\u00fcnf JQuery Prallax Scrolling Plugins ansehen.","og_url":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling","article_publisher":"https:\/\/www.facebook.com\/wolkenhart","article_published_time":"2014-09-04T17:34:02+00:00","og_image":[{"width":500,"height":334,"url":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/09\/Parallax-Scrolling-Plugins.jpg","type":"image\/jpeg"}],"author":"Mika Gustavson","twitter_card":"summary_large_image","twitter_creator":"@wolkenhart","twitter_site":"@wolkenhart","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling#article","isPartOf":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling"},"author":{"name":"Mika Gustavson","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/4b869b4e36908e2e60076662203e0b0c"},"headline":"Parallax Scrolling","datePublished":"2014-09-04T17:34:02+00:00","mainEntityOfPage":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling"},"wordCount":515,"commentCount":0,"image":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling#primaryimage"},"thumbnailUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/09\/Parallax-Scrolling-Plugins.jpg","keywords":["Parallax Scrolling"],"articleSection":["Webdesign Agentur"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling","url":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling","name":"Parallax Scrolling","isPartOf":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling#primaryimage"},"image":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling#primaryimage"},"thumbnailUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/09\/Parallax-Scrolling-Plugins.jpg","datePublished":"2014-09-04T17:34:02+00:00","author":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/4b869b4e36908e2e60076662203e0b0c"},"description":"Parallax Scrolling Plugins ein wunderbares Designmittel f\u00fcr Entwickler. Hier kannst du dir f\u00fcnf JQuery Prallax Scrolling Plugins ansehen.","breadcrumb":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling#primaryimage","url":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/09\/Parallax-Scrolling-Plugins.jpg","contentUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/09\/Parallax-Scrolling-Plugins.jpg","width":500,"height":334,"caption":"Parallax Scrolling Plugins"},{"@type":"BreadcrumbList","@id":"https:\/\/wolkenhart.com\/webdesignblog\/parallax-scrolling#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Start","item":"https:\/\/wolkenhart.com\/webdesignblog\/"},{"@type":"ListItem","position":2,"name":"Parallax Scrolling"}]},{"@type":"WebSite","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#website","url":"https:\/\/wolkenhart.com\/webdesignblog\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wolkenhart.com\/webdesignblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/4b869b4e36908e2e60076662203e0b0c","name":"Mika Gustavson","description":"Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur \/ WordPress Agentur Wolkenhart\u00ae und freier Dozent an der Dualen Hochschule Baden-W\u00fcrttemberg.","url":"https:\/\/wolkenhart.com\/webdesignblog\/author\/webtalk"}]}},"_links":{"self":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/3108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/comments?post=3108"}],"version-history":[{"count":0,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/3108\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/media\/3112"}],"wp:attachment":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/media?parent=3108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/categories?post=3108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/tags?post=3108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}