{"id":707,"date":"2020-11-06T02:04:54","date_gmt":"2020-11-06T02:04:54","guid":{"rendered":"https:\/\/s-oneill.com\/sov02\/?p=707"},"modified":"2020-11-06T02:08:53","modified_gmt":"2020-11-06T02:08:53","slug":"parallax-examples","status":"publish","type":"post","link":"https:\/\/s-oneill.com\/sov02\/parallax-examples\/","title":{"rendered":"Parallax Examples"},"content":{"rendered":"\n<p>The parallax effect has become a popular way to spice up your site design, so it is helpful to be somewhat familiar with it. There are many plugins, scripts and libraries available.  If you have time to explore here are just a few examples to explore.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/pixelcog.github.io\/parallax.js\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pixelcog Parallax<\/a><\/li><li><a href=\"https:\/\/openbase.io\/js\/react-scroll-parallax\/documentation\" target=\"_blank\" rel=\"noreferrer noopener\">Openbase<\/a><\/li><li><a href=\"https:\/\/matthew.wagerfield.com\/parallax\/\" target=\"_blank\" rel=\"noreferrer noopener\">Parallax.js<\/a><\/li><li><a href=\"https:\/\/mdbootstrap.com\/snippets\/jquery\/pjoter-2-0\/934696#js-tab-view\" target=\"_blank\" rel=\"noreferrer noopener\">MdBootsrap<\/a><\/li><li><a href=\"https:\/\/materializecss.com\/parallax.html\" target=\"_blank\" rel=\"noreferrer noopener\">Materialize<\/a><\/li><li><a href=\"https:\/\/www.w3schools.com\/howto\/howto_css_parallax.asp\" target=\"_blank\" rel=\"noreferrer noopener\">w3schools.com<\/a><\/li><\/ul>\n\n\n\n<p><a href=\"https:\/\/pixelcog.github.io\/parallax.js\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pixelcog Parallax<\/a> seems to be a fairly simple version that relies on jQuery. I was able to recreate their demo in WP as a plugin. Check out <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">        <a href=\"\/sov02\/wp-parallax-page\/\">WP-Parallax-Page<\/a><\/h4>\n\n\n\n<p>As this demo states, the scroll effect does not work on mobile devices. Some of the libraries I checked were buggy. Many of the demos load very slowly, likely because they use several very large images in the demo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The parallax effect has become a popular way to spice up your site design, so it is helpful to be somewhat familiar with it. There are many plugins, scripts and libraries available. If you have time to explore here are just a few examples to explore. Pixelcog Parallax Openbase Parallax.js MdBootsrap Materialize w3schools.com Pixelcog Parallax [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2,4,9],"tags":[],"class_list":["post-707","post","type-post","status-publish","format-standard","hentry","category-design","category-javascript","category-web-cms"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Parallax Examples - s-oneill.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/s-oneill.com\/sov02\/parallax-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Parallax Examples - s-oneill.com\" \/>\n<meta property=\"og:description\" content=\"The parallax effect has become a popular way to spice up your site design, so it is helpful to be somewhat familiar with it. There are many plugins, scripts and libraries available. If you have time to explore here are just a few examples to explore. Pixelcog Parallax Openbase Parallax.js MdBootsrap Materialize w3schools.com Pixelcog Parallax [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/s-oneill.com\/sov02\/parallax-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"s-oneill.com\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-06T02:04:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-06T02:08:53+00:00\" \/>\n<meta name=\"author\" content=\"Me(sean)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Me(sean)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/parallax-examples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/parallax-examples\/\"},\"author\":{\"name\":\"Me(sean)\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/ab11148c6ea273be80dddd8baec1a545\"},\"headline\":\"Parallax Examples\",\"datePublished\":\"2020-11-06T02:04:54+00:00\",\"dateModified\":\"2020-11-06T02:08:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/parallax-examples\/\"},\"wordCount\":125,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\"},\"articleSection\":[\"Design\",\"Javascript\",\"Web CMS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/s-oneill.com\/sov02\/parallax-examples\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/parallax-examples\/\",\"url\":\"https:\/\/s-oneill.com\/sov02\/parallax-examples\/\",\"name\":\"Parallax Examples - s-oneill.com\",\"isPartOf\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#website\"},\"datePublished\":\"2020-11-06T02:04:54+00:00\",\"dateModified\":\"2020-11-06T02:08:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/parallax-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/s-oneill.com\/sov02\/parallax-examples\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/parallax-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/s-oneill.com\/sov02\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Parallax Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/#website\",\"url\":\"https:\/\/s-oneill.com\/sov02\/\",\"name\":\"s-oneill.com\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/s-oneill.com\/sov02\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\",\"name\":\"sean o\",\"logo\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/image\/\"},\"description\":\"Web dev over 15 years.\",\"sameAs\":[\"http:\/\/s-oneill.com\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/ab11148c6ea273be80dddd8baec1a545\",\"name\":\"Me(sean)\",\"url\":\"https:\/\/s-oneill.com\/sov02\/author\/user01\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Parallax Examples - s-oneill.com","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:\/\/s-oneill.com\/sov02\/parallax-examples\/","og_locale":"en_US","og_type":"article","og_title":"Parallax Examples - s-oneill.com","og_description":"The parallax effect has become a popular way to spice up your site design, so it is helpful to be somewhat familiar with it. There are many plugins, scripts and libraries available. If you have time to explore here are just a few examples to explore. Pixelcog Parallax Openbase Parallax.js MdBootsrap Materialize w3schools.com Pixelcog Parallax [&hellip;]","og_url":"https:\/\/s-oneill.com\/sov02\/parallax-examples\/","og_site_name":"s-oneill.com","article_published_time":"2020-11-06T02:04:54+00:00","article_modified_time":"2020-11-06T02:08:53+00:00","author":"Me(sean)","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Me(sean)","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/s-oneill.com\/sov02\/parallax-examples\/#article","isPartOf":{"@id":"https:\/\/s-oneill.com\/sov02\/parallax-examples\/"},"author":{"name":"Me(sean)","@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/ab11148c6ea273be80dddd8baec1a545"},"headline":"Parallax Examples","datePublished":"2020-11-06T02:04:54+00:00","dateModified":"2020-11-06T02:08:53+00:00","mainEntityOfPage":{"@id":"https:\/\/s-oneill.com\/sov02\/parallax-examples\/"},"wordCount":125,"commentCount":0,"publisher":{"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a"},"articleSection":["Design","Javascript","Web CMS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/s-oneill.com\/sov02\/parallax-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/s-oneill.com\/sov02\/parallax-examples\/","url":"https:\/\/s-oneill.com\/sov02\/parallax-examples\/","name":"Parallax Examples - s-oneill.com","isPartOf":{"@id":"https:\/\/s-oneill.com\/sov02\/#website"},"datePublished":"2020-11-06T02:04:54+00:00","dateModified":"2020-11-06T02:08:53+00:00","breadcrumb":{"@id":"https:\/\/s-oneill.com\/sov02\/parallax-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/s-oneill.com\/sov02\/parallax-examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/s-oneill.com\/sov02\/parallax-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/s-oneill.com\/sov02\/"},{"@type":"ListItem","position":2,"name":"Parallax Examples"}]},{"@type":"WebSite","@id":"https:\/\/s-oneill.com\/sov02\/#website","url":"https:\/\/s-oneill.com\/sov02\/","name":"s-oneill.com","description":"","publisher":{"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/s-oneill.com\/sov02\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a","name":"sean o","logo":{"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/image\/"},"description":"Web dev over 15 years.","sameAs":["http:\/\/s-oneill.com"]},{"@type":"Person","@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/ab11148c6ea273be80dddd8baec1a545","name":"Me(sean)","url":"https:\/\/s-oneill.com\/sov02\/author\/user01\/"}]}},"_links":{"self":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts\/707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/comments?post=707"}],"version-history":[{"count":3,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts\/707\/revisions"}],"predecessor-version":[{"id":710,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts\/707\/revisions\/710"}],"wp:attachment":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/media?parent=707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/categories?post=707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/tags?post=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}