{"id":347,"date":"2016-01-29T12:18:42","date_gmt":"2016-01-29T12:18:42","guid":{"rendered":"http:\/\/loftocean.com\/curious-doc\/?page_id=347"},"modified":"2016-03-14T11:17:21","modified_gmt":"2016-03-14T11:17:21","slug":"parallax-scrolling-for-section","status":"publish","type":"page","link":"https:\/\/loftocean.com\/doc\/loftbuilder\/basic-knowledge\/parallax-effects\/parallax-scrolling-for-section\/","title":{"rendered":"Parallax Scrolling for Section"},"content":{"rendered":"<h5>Parallax scrolling for Section<\/h5>\n<ol>\n<li>On <strong>LoftBuilder<\/strong>\u00a0editor screen, click <strong>Content Edit Mode<\/strong> switch button to activate content edit mode.<\/li>\n<li>Hover on a section to show its toolbar, click <strong><i class=\"fa fa-cog\"><\/i> (Settings)<\/strong> button to open the <strong>Section Settings<\/strong> panel.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-993\" src=\"http:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/section-settings-2.jpg\" alt=\"section-settings-2\" width=\"1954\" height=\"928\" srcset=\"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/section-settings-2.jpg 1954w, https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/section-settings-2-300x142.jpg 300w, https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/section-settings-2-768x365.jpg 768w, https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/section-settings-2-1024x486.jpg 1024w\" sizes=\"auto, (max-width: 1954px) 100vw, 1954px\" \/><\/li>\n<li>Click <strong>Background<\/strong> tab, find <strong>Section Background Type<\/strong> option, select <strong>Parallax Bg Image &#8211; Scroll<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-738\" src=\"http:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/parallax-for-section-1.png\" alt=\"parallax-for-section\" width=\"2004\" height=\"1044\" srcset=\"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/parallax-for-section-1.png 2004w, https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/parallax-for-section-1-300x156.png 300w, https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/parallax-for-section-1-768x400.png 768w, https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/parallax-for-section-1-1024x533.png 1024w\" sizes=\"auto, (max-width: 2004px) 100vw, 2004px\" \/><\/li>\n<li>Upload <strong>Background Image<\/strong> and set its styles such as background position, background repeat, etc.<\/li>\n<li>If the section has content (text\/icons\/buttons\/other) in it, now you can click <strong>Save<\/strong> button and close the panel.<\/li>\n<li>If the section <span class=\"highlight\">does not<\/span> have any content inside, then you need to set its height, <span class=\"highlight\">otherwise the section is not visible because its height is 0.<\/span> Click <strong>Basic<\/strong> tab, find <strong>Section Height<\/strong> option, choose <strong>Screen Height<\/strong> or <strong>Custom Height<\/strong> and enter a custom height value. Then save the settings and close the panel.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-742\" src=\"http:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/section-height-1.png\" alt=\"section-height\" width=\"1999\" height=\"1044\" srcset=\"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/section-height-1.png 1999w, https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/section-height-1-300x157.png 300w, https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/section-height-1-768x401.png 768w, https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/section-height-1-1024x535.png 1024w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><\/li>\n<li>Save your page and publish it.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Parallax scrolling for Section On LoftBuilder\u00a0editor screen, click Content Edit Mode switch button to activate content edit mode. Hover on a section to show its toolbar, click (Settings) button to open the Section Settings panel. Click Background tab, find Section Background Type option, select Parallax Bg Image &#8211; Scroll. Upload Background Image and set its [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":345,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-347","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages\/347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/comments?post=347"}],"version-history":[{"count":9,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages\/347\/revisions"}],"predecessor-version":[{"id":994,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages\/347\/revisions\/994"}],"up":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages\/345"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/media?parent=347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}