In this article
Our themes fully support the Jarallax plugin, which provides parallax and video background effects.
Usage
Installation
Update the document_head.hbs template to include <script> tags referencing the required Jarallax packages:
<script type="text/javascript" src="https://unpkg.com/jarallax@~1.11.0/dist/jarallax.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/jarallax@~1.11.0/dist/jarallax-video.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/jarallax@~1.11.0/dist/jarallax-element.min.js"></script>
Via data attributes
Use data-jarallax-element on an element to apply the parallax effect and specify a value representing the pixel deviation (on the Y-axis) to apply.
<div data-jarallax-element="-100">
<img src="thumbnail.jpg" alt="" />
</div>If data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.
Options
Option values can be passed in using data attributes.
| Name | Type | Default | Description |
|---|---|---|---|
data-type | string | scroll | scroll, scale, opacity, scroll-opacity, scale-opacity. |
data-speed | float | 0.5 | Parallax effect speed. Provide numbers from -1.0 to 2.0. |
data-img-src | string | null | Image url. By default used image from background. |
data-img-element | selector | .jarallax-img | Image tag that will be used as background. |
data-img-size | string | cover | Image size. If you use <img> tag for background, you should add object-fit values, else use background-size values. |
data-img-position | string | 50% 50% | Image position. If you use <img> tag for background, you should add object-position values, else use background-position values. |
data-img-repeat | string | no-repeat | Image repeat. Supported only background-position values. |
data-keep-img | boolean | false | Keep <img> tag in it’s default place after Jarallax inited. |
data-z-index | number | -100 | z-index of parallax container. |
For more information, refer to the Jarallax documentation.