Background Image Parallax Effect with CSS3 | Parallax jQuery

With a fallback to background-position when CSS transforms aren’t supported.

pure css parallax background image, parallax scrolling, smooth parallax scrolling background image, pure css parallax background image, parallax image

How to make use of it:

1. Load the parallax plugin within the HTML web page. jQuery library.

<!-- jQuery (OPTIONAL) -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Core -->
<script src="/path/to/dist/jarallax.js"></script>
<!-- Video Support -->
<script src="/path/to/dist/jarallax-video.js"></script>
<!-- Custom Element Support -->
<script src="/path/to/dist/jarallax-element.js"></script>

2. Add a parallax picture to the container as follows.

<!-- img tag -->
<div class="jarallax">
  <img class="jarallax-img" src="bg.jpg" alt="">
</div>

<!-- picture tag -->
<div class="jarallax">
  <picture class="jarallax-img">
    <source media="(max-width: 650px)" srcset="bg-alt.jpg">
    <img src="bg.jpg" alt="">
  </picture>
</div>

<!-- background picture -->
<div class="jarallax" style="background-image: url('bg.jpg');">
</div>

3. The required CSS kinds for the background picture.

.jarallax 
.jarallax > .jarallax-img

4. The fastest approach to initialize the parallax plugin is so as to add the data-parallax attribute to the parallax container.

<div class="jarallax"
     data-jarallax
     data-OPTIONNAME="VALUE">
     <img class="jarallax-img" src="bg.jpg" alt="">
</div>

5. You can even initialize the parallax plugin by way of JavaScript.

// Vanilla JavaScript
jarallax(document.querySelectorAll('.jarallax'), );

// Or jQuery
$('.jarallax').jarallax();

6. Apply the parallax scroll impact to a video.

<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=VIDEO ID HERE">
  Youtube Video
</div>

<div class="jarallax" data-jarallax-video="https://vimeo.com/VIDEO ID HERE">
  Vimeo
</div>

<div class="jarallax" data-jarallax-video="mp4:./1.mp4,webm:./1,ogv:./1.ogv">
  HTML5 Video
</div>

// Or Via JavaScript
jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'VIDEO SOURCE HERE'
});

// Or Via jQuery
$('.jarallax').jarallax({
  videoSrc: 'VIDEO SOURCE HERE'
});

7. Apply the parallax scroll impact to an HTML aspect.

<!-- Element might be parallaxed on -150 pixels from the display middle by Y axis -->
<div data-jarallax-element="-150">
  ...
</div>

<!-- Element might be parallaxed on 300 pixels from the display middle by Y axis and on -150 pixels from the display middle by X axis -->
<div data-jarallax-element="300 -150">
  ...
</div>

8. All default configuration choices.

// scroll, scale, opacity, scale-opacity, scroll-opacity
type: 'scroll',

// animation speed
speed: 0.5, 

// picture parallax scroll effect
imgSrc: null,
imgElement: '.jarallax-img',
imgSize: 'cover',
imgPosition: '50% 50%',
imgRepeat: 'no-repeat', 

// hold <img> tag in it is default place
keepImg: false, 

// use customized DOM / jQuery aspect to examine if parallax block in viewport.
elementInViewport: null,

// z-index property
zIndex: -100,

// disable parallax scroll impact on sure units
// e.g. disableParallax: /iPad|iPhone|iPod|Android/
disableParallax: false,

// disable video parallax scroll impact on sure units
// e.g. disableParallax: /iPad|iPhone|iPod|Android/
disableVideo: false,

// use ResizeObserver API to recalculate place and measurement of parallax picture
automaticResize: true, 

// video choices
videoSrc: null,
videoStartTime: 0,
videoEndTime: 0,
videoVolume: 0,
videoLoop: true,
videoPlayOnlyVisible: true,
videoLazyLoading: true

9. Callback features.

onScroll: null, // function(calculations) {}
onInit: null, // function() {}
onDestroy: null, // function() {}
onCoverImage: null // function() {}

Options

Options can be passed in data attributes or in object when you initialize jarallax from script.

Options For Video (+ supported all default options)

Required jarallax/jarallax-video.js file.

Options For Element Parallax

Required jarallax/jarallax-element.js file.

Events

Events used the same way as Options.

Parallax jQuery Plugin, MediaQuery, Background Image Parallax jQuery, Parallax jQuery Demo, parallax effect on image tag, parallax scrolling css

See Demo And Download