Fancy Image/Video/Text Parallax Scroll Plugin - jQuery ArParallax.js

Fancy Image/Video/Text Parallax Scroll Plugin - jQuery ArParallax.js

ArParallax.js is a fancy jQuery plugin that applies a configurable parallax effect (with blur and transform effects) on images and videos as you scroll down or up the webpage. Based on CSS3 3D transforms and blur filters.

1. Add your own images and HTML5 videos to the parallax containers as follows:

<div class="arparallax">
  <div class="imageContainer">
    <video src="sample.mp4" autoplay loop class="cover"></video>
  </div>
</div>
<div class="arparallax">
  <div class="imageContainer">
    <img src="sample.mp4" class="cover">
  </div>
</div>

2. The required CSS styles for the parallax content.

.arparallax {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  margin: auto;
}
.cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. Put jQuery JavaScript library and the jQuery ArParallax.js script at the bottom of the web page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="arparallax.min.js"></script> 

4. Activate the parallax scroll effect with default settings.

$('.arparallax').arparallax();

5. Config the parallax scroll effect by overriding the options as displayed below and then passing them to as an object to the arparallax() function.

$('.arparallax').arparallax({
  'blur': 'auto',     // none, both, up, down, auto
  'depth': 'direct',   // direct, reverse, none
  'speed': .32, // 0 - 1
  'scaleMultiplier': .05,
  'blurMultiplier': 1,
  'imageContainer': '.image'
});

This awesome jQuery plugin is developed by rodzyk. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 31.10.2017
  • Source