# Parallax

Animates elements on the page as the user scrolls.

###

About the Plugin

Website GitHub npm

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>