{"id":676,"date":"2020-06-29T08:52:41","date_gmt":"2020-06-29T08:52:41","guid":{"rendered":"http:\/\/dev.wp.dnngo.net\/kella\/?page_id=676"},"modified":"2021-02-08T08:10:28","modified_gmt":"2021-02-08T08:10:28","slug":"how-to-set-fixed-elements","status":"publish","type":"page","link":"https:\/\/doc.dnngo.com\/obvio\/how-to-set-fixed-elements\/","title":{"rendered":"How to set fixed elements"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Please check our one page demo from here https:\/\/kella.dnngo.net\/Features\/Fixed-Element<\/a>. When scroll down the page, the image elements will move up and down. You can set it with the following steps.[\/vc_column_text]

<\/div>

Adding fixed elements<\/h3>[vc_column_text]Step 1.<\/strong> Click the Fixed Element button at the right of the section.[\/vc_column_text]
<\/div>[vc_single_image image=”686″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Step 2.<\/strong> Click the add icon.[\/vc_column_text]
<\/div>[vc_single_image image=”692″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Step 3.<\/strong> Add images.[\/vc_column_text]
<\/div>[vc_single_image image=”694″ img_size=”full” style=”vc_box_shadow”]
<\/div>

Set the position of fixed elements<\/h3>[vc_column_text]Set the position of fixed elements in the Responsive.[\/vc_column_text]
<\/div>[vc_single_image image=”696″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]X (%)\u00a0<\/strong>– Set the horizontal position of the element.[\/vc_column_text]
<\/div>[vc_column_text]Y (%)\u00a0<\/strong>– Set the vertical position of the element.[\/vc_column_text]
<\/div>[vc_column_text]Max Width (px)\u00a0<\/strong>– Set the maximum width of the element.[\/vc_column_text]
<\/div>[vc_column_text]Hide (px)\u00a0<\/strong>– Set to hide the element.[\/vc_column_text]
<\/div>[vc_column_text]XS, S, M, L, XL, XXL\u00a0<\/strong>– Set responsiveness. For example, it can set the element display position on different devices.[\/vc_column_text]
<\/div>

Add animations<\/h3>[vc_column_text]There are 2 kinds of animation, Parallax Scroll and Mouse Follow.[\/vc_column_text]
<\/div>[vc_column_text]The animation method of Parallax Scroll can be checked here: https:\/\/kella.dnngo.net\/Features\/Parallax-scrolling<\/a>[\/vc_column_text]
<\/div>[vc_column_text]The animation method of Mouse Follow can be checked here: https:\/\/kella.dnngo.net\/Features\/Mouse-follow<\/a>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"

[vc_row][vc_column][vc_column_text]Please check our one page demo from here https:\/\/kella.dnngo.net\/Features\/Fixed-Element. When scroll down the page, the image elements will move up and down. You can set it with the following steps.[\/vc_column_text][vc_column_text]Step 1. Click the Fixed Element button at the right of the section.[\/vc_column_text][vc_single_image image=”686″ img_size=”full” style=”vc_box_shadow”][vc_column_text]Step 2. Click the add icon.[\/vc_column_text][vc_single_image image=”692″ img_size=”full” style=”vc_box_shadow”][vc_column_text]Step 3. Add […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/pages\/676"}],"collection":[{"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/comments?post=676"}],"version-history":[{"count":31,"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/pages\/676\/revisions"}],"predecessor-version":[{"id":966,"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/pages\/676\/revisions\/966"}],"wp:attachment":[{"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/media?parent=676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}