{"id":54958,"date":"2019-06-03T15:54:07","date_gmt":"2019-06-03T13:54:07","guid":{"rendered":"https:\/\/samuelchopard.ch\/wiki\/?p=54958"},"modified":"2019-06-03T15:54:07","modified_gmt":"2019-06-03T13:54:07","slug":"how-to-create-a-parallax-scrolling-effect","status":"publish","type":"post","link":"https:\/\/samuelchopard.ch\/wiki\/library\/how-to-create-a-parallax-scrolling-effect\/","title":{"rendered":"How to create a parallax scrolling effect"},"content":{"rendered":"<p><!--more--><\/p>\n<p>In Visual Composer (or equivalent):<\/p>\n<ol>\n<li>Create a row<\/li>\n<li>Add an image as background<\/li>\n<li>Assign a custom class to the row (example: <em>homepage-parallax-image<\/em>)<\/li>\n<\/ol>\n<p>Then, in Appearance &gt; Customize &gt; Additional CSS, paste the following:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.homepage-parallax-image {\r\n  height: 300px; \/* change value as needed *\/\r\n  background-attachment: fixed;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  background-size: cover;\r\n}<\/pre>\n<p>Source: <a target=\"_blank\" href=\"https:\/\/www.w3schools.com\/howto\/howto_css_parallax.asp\">https:\/\/www.w3schools.com\/howto\/howto_css_parallax.asp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"In Visual Composer (or equivalent): Create a row Add an image as background Assign a custom class to the row [...]","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[94,366,367],"class_list":["post-54958","post","type-post","status-publish","format-standard","hentry","category-htmlcss","tag-effect","tag-parallax","tag-scrolling"],"_links":{"self":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts\/54958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/comments?post=54958"}],"version-history":[{"count":1,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts\/54958\/revisions"}],"predecessor-version":[{"id":54959,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts\/54958\/revisions\/54959"}],"wp:attachment":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/media?parent=54958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/categories?post=54958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/tags?post=54958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}