Parallax

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.

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.4/dist/jarallax.min.js">
     <script type="text/javascript" src="https://unpkg.com/jarallax@^1.12.4/dist/jarallax-video.min.js">
     <script type="text/javascript" src="https://unpkg.com/jarallax@^1.12.4/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";

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>

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

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>

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>