{"id":19269,"date":"2020-06-24T09:30:16","date_gmt":"2020-06-24T09:30:16","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=19269"},"modified":"2025-07-25T07:15:09","modified_gmt":"2025-07-25T07:15:09","slug":"jetelements-parallax-effects-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-parallax-effects-overview\/","title":{"rendered":"Parallax Effects Overview"},"content":{"rendered":"\n

JetElements<\/em><\/a> <\/em>Section Parallax<\/strong> extension is a tool that adds some dynamics to WordPress websites. Parallax is an effect that creates an illusion of depth in the page\u2019s background. It is achieved by setting different scrolling speeds and movement directions for separate layers of the image.\u00a0<\/p>\n\n\n\n

There are several types of parallax effects that can be applied to a website using JetElements<\/em>, <\/em>and in this tutorial, we will check how to apply all of them.<\/p>\n\n\n\n

Preparing a Website for Parallax Effects<\/h2>\n\n\n\n
\n
\n

First, one should activate the extension in the WordPress Dashboard > Crocoblock JetPlugins Settings > JetElements<\/em><\/strong>. To do so, one should switch on the Section Parallax Extension<\/strong> toggle in the Available Extensions<\/strong> tab.<\/p>\n\n\n\n

\"jetelements<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Adding a Parallax Effect<\/h2>\n\n\n\n
\n

Now, one should go to the page where the parallax effect should be added and edit it using Elementor.\u00a0<\/p>\n\n\n\n

On the opened page, the \u201c+<\/strong>\u201d button should be pressed to add a new Container <\/strong>to the section.<\/p>\n\n\n\n

\"drag<\/a><\/div>\n\n\n\n

Now, one should select the layout: either \u201cFlexbox\u201d or \u201cGrid\u201d.<\/p>\n\n\n\n

\"layout<\/a><\/div>\n\n\n\n

After that, the structure should be selected.<\/p>\n\n\n\n

\"structure<\/a><\/div>\n\n\n\n

In the Container <\/strong>section, set the \u201cFull Width\u201d Container Width <\/strong>and complete the Min Height <\/strong>field with the \u201c100vh\u201d value. Other settings can be adjusted if needed.<\/p>\n\n\n\n

\"container<\/a><\/div>\n\n\n\n

In the Style > Background <\/em><\/strong>section, the \u201cClassic\u201d Background Type <\/strong>(a \u201cBrush\u201d icon) should be selected, and the \u201cplus<\/strong>\u201d button should be clicked in the Image <\/strong>field <\/strong>to select the background picture.<\/p>\n\n\n\n

One can upload a picture or select it from the Media Library<\/strong>.<\/p>\n\n\n\n

\"container<\/a><\/div>\n\n\n\n

Once done, additional settings fields appear. The Position <\/strong>should be set to \u201cCenter Center,\u201d Repeat <\/strong>to \u201cNo-repeat,\u201d and Display Size <\/strong>to \u201cCover.\u201d This ensures that the background image fits the section. If the resulting picture is blurry, an image with a higher resolution should be used.<\/p>\n\n\n\n

\"image<\/a><\/div>\n\n\n\n

Now, one should go back to the Layout <\/strong>section. Here, in the Section Parallax <\/strong>tab, one can add new layers that move at different speeds, creating the effect of depth and dynamics. As many layers as needed can be added by clicking the \u201cAdd Item<\/strong>\u201d button.<\/p>\n\n\n\n

\"add<\/a><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

Creating Parallax Effects<\/h2>\n\n\n\n
\n

To start the parallax customization, the \u201cAdd item<\/strong>\u201d button should be clicked. The following settings can be adjusted in this section:<\/p>\n\n\n\n

\"section<\/a><\/div>\n\n\n\n
    \n
  • Image<\/strong> \u2014 the image layer that will move over the previously chosen background picture;<\/li>\n\n\n\n
  • Parallax Speed (%)<\/strong> \u2014 an option allows setting the speed of movement for this layer. It is shown in percent; the bigger this value is, the faster and more visibly this layer\u2019s picture will move. Take into consideration that this value can be bigger than 100;<\/li>\n\n\n\n
  • Parallax Type<\/strong> \u2014 a type of applied parallax effect. More information about the available options can be found below this list;<\/li>\n\n\n\n
  • Direction <\/strong>\u2014 a direction of the applied parallax effect. More information about the specific direction options can be found below this list in the Parallax Types <\/strong>descriptions;<\/li>\n\n\n\n
  • Z-Index<\/strong> \u2014 the number typed into this bar will define the priority of the layer. If the pictures overlap each other, the one with a bigger Z-index<\/strong> will be shown on top of those with a smaller Z-index<\/strong>;<\/li>\n\n\n\n
  • Background X Position (%)<\/strong> \u2014 the horizontal position of this layer\u2019s picture regarding the background image (in percentage terms). Take into consideration that this value can be bigger than 100 and smaller than 0 (it can have a negative value);<\/li>\n\n\n\n
  • Background Y Position (%)<\/strong> \u2014 the vertical position of this layer\u2019s picture regarding the background image (in percentage terms). This value can also be bigger than 100 and smaller than 0 (it can have a negative value);<\/li>\n\n\n\n
  • Background Size<\/strong> \u2014 an option that defines the size of this layout\u2019s picture. \u201cAuto\u201d means that the image will be displayed in its original size. \u201cCover\u201d will resize the image so that it fills the whole section, even if it is stretched or cut on one side. \u201cContain\u201d changes the size of the image so that it becomes fully visible in the section, but doesn\u2019t alter its proportions;<\/li>\n\n\n\n
  • Animation Property<\/strong> \u2014 the drop-down menu with the available animation properties. One should choose \u201cBackground Position\u201d if the image of this layer fills the whole background. \u201cTransform\u201d is for smaller elements, and \u201cTransform 3D\u201d in combination with \u201cMouse Move\u201d Parallax Type<\/strong> <\/strong>makes the element look like a 3D object;<\/li>\n\n\n\n
  • Enable On Device<\/strong> \u2014 the field that allows setting the parallax effect only on specific devices. Here, one can choose which devices this specific parallax effect will be displayed on.<\/li>\n<\/ul>\n\n\n\n

    Now, more information about the available options in the Parallax Type <\/strong>field.<\/p>\n\n\n\n

    None<\/h3>\n\n\n\n

    When this option is selected, the picture of the layer won\u2019t move.<\/p>\n\n\n\n

    Vertical Scroll<\/h3>\n\n\n\n

    In this case, the element of the layer will move vertically, from top to bottom (or vice versa), but at a different speed than the background image. With this option, the Direction <\/strong>can also be set: \u201cDown \/ To Right\u201d or \u201cUp \/ To Left\u201d.<\/p>\n\n\n\n