Sections

Parallax

Create engaging parallax background effects within your Help Center

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.

Zendesk
<div data-jarallax-element="-100">
  <img src="thumbnail.jpg" alt="" />
</div>

If data attributes are used, you will need to ensure that the allow unsage 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.