Parallax

Animates elements on the page as the user scrolls.


About the Plugin

Parallax is handled by the Jarallax library. Animations are configured via data attributes. Jarallax is also responsible for providing video background functionality, which may also be configured with a parallax effect.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

  1. Include the library in your page
    • Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.

      <!-- jarallax (parallax effect and video backgrounds) -->
      <script type="text/javascript" src="assets/js/jarallax.min.js">
      <script type="text/javascript" src="assets/js/jarallax-video.min.js">
      <script type="text/javascript" src="assets/js/jarallax-element.min.js">

      Alternatively you may wish to load this resource from a CDN to potentially improve page load times.

      <!-- jarallax (parallax effect and video backgrounds) -->
      <script type="text/javascript" src="https://unpkg.com/jarallax@~1.12.0/dist/jarallax.min.js">
      <script type="text/javascript" src="https://unpkg.com/jarallax@~1.12.0/dist/jarallax-video.min.js">
      <script type="text/javascript" src="https://unpkg.com/jarallax@~1.12.0/dist/jarallax-element.min.js">
  2. Load the initializer code in index.js
    • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.
      import './jarallax';
  3. Load the required CSS in components.scss
    • Declare the following import statement in scss/custom/components.scss:
    @import "CSS:components/plugins/jarallax";

Basic Usage

All options for the Jarallax plugin can be applied to elements via data attributes.

Background images can be given a parallax effect by adding class jarallax to the containing element. Attributes data-jarallax and data-speed must also be added to the containing element.

Class jarallax-img must be applied to the <img> element.

data-speed may be a decimal between -1.0 and 2.0. This number controls the speed of the image movement in relation to the container.

<section class="jarallax" data-jarallax data-speed="0.2">
  <img src="assets/img/portfolio-single-1.jpg" alt="Image" class="jarallax-img">
</section>

Parallax is disabled on mobile as user experience is not perfect.

Options

Options are passed in by data attributes.

The following data attributes can be added to the data-jarallax element to alter the behaviour.

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 path null Image url. By default uses 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 is initialized.
data-z-index number -100 z-index of parallax container.

For more detail, please refer to the Jarallax documentation

Single Element Parallax

Adding data-jarallax-element to any element enables parallax on the single element. The value of the data-attribute is a "Y X" axis deviation in pixels.

If the X axis deviation is not supplied, the element will only move on the Y axis.

<!-- Element will be parallaxed on -140 pixels from the screen center by Y axis -->
<div data-jarallax-element="-140">
    Your content here... This could be an SVG graphic.
</div>

<!-- Element will be parallaxed on 250 pixels from the screen center by Y axis and on -100 pixels from the screen center by X axis -->
<div data-jarallax-element="250 -100">
    Your content here... This could be an SVG graphic.
</div>

Video Backgrounds

The Jarallax plugin also handles fullscreen video backgrounds from Vimeo, Youtube or local video sources.

Vimeo video background
<section class="text-light jarallax" data-jarallax-video="https://vimeo.com/40842620"
  data-speed="1">
  <div class="container">
    <div class="min-vh-60 align-items-center">
      <div class="col text-center">
        <span class="h1">Vimeo Video Background</span>
      </div>
    </div>
  </div>
</section>
Youtube video background
<section class="text-light jarallax" data-jarallax-video="https://www.youtube.com/watch?v=K8rpo9e7tvg" data-video-start-time="30" data-speed="1">
  <div class="container">
    <div class="min-vh-60 align-items-center">
      <div class="col text-center">
        <span class="h1">Youtube Video Background</span>
      </div>
    </div>
  </div>
</section>
Local video background
<section class="text-light jarallax" data-jarallax-video="mp4:./assets/video/video-1.mp4,webm:./assets/video/video-1.webm,ogv:./assets/video/video-1.ogv"
  data-speed="1">
  <div class="container">
    <div class="min-vh-60 align-items-center">
      <div class="col text-center">
        <span class="h1">Local Video Background</span>
      </div>
    </div>
  </div>
</section>