Press "Enter" to skip to content

Background Image Parallax Effect with CSS3 | Parallax jQuery

Smooth parallax scrolling effect for background photos and videos. Pure JavaScript code with no dependencies + jQuery support. Support for parallax on YouTube, Vimeo, and self-hosted videos.

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.

NameTypeDefaultDescription
typestringscrollscroll, scale, opacity, scroll-opacity, scale-opacity.
speedfloat0.5Parallax effect speed. Provide numbers from -1.0 to 2.0.
imgSrcpathnullImage url. By default used image from background.
imgElementdom / selector.jarallax-imgImage tag that will be used as background.
imgSizestringcoverImage size. If you use <img> tag for background, you should add object-fit values, else use background-size values.
imgPositionstring50% 50%Image position. If you use <img> tag for background, you should add object-position values, else use background-position values.
imgRepeatstringno-repeatImage repeat. Supported only background-position values.
keepImgbooleanfalseKeep <img> tag in it’s default place after Jarallax inited.
elementInViewportdomnullUse custom DOM / jQuery element to check if parallax block in viewport. More info here – Issue 13.
zIndexnumber-100z-index of parallax container.
disableParallaxRegExp / functionDisable parallax on specific user agents (using regular expression) or with function return value. The image will be set on the background.
disableVideoRegExp / functionDisable video load on specific user agents (using regular expression) or with function return value. The image will be set on the background.

Options For Video (+ supported all default options)

Required jarallax/jarallax-video.js file.

NameTypeDefaultDescription
videoSrcstringnullYou can use Youtube, Vimeo or Self-Hosted videos. Also you can use data attribute data-jarallax-video.
videoStartTimefloat0Start time in seconds when video will be started (this value will be applied also after loop).
videoEndTimefloat0End time in seconds when video will be ended.
videoLoopbooleantrueLoop video to play infinitely.
videoPlayOnlyVisiblebooleantruePlay video only when it is visible on the screen.
videoLazyLoadingbooleantruePreload videos only when it is visible on the screen.

Options For Element Parallax

Required jarallax/jarallax-element.js file.

NameTypeDefaultDescription
typestringelementWill only work with element value.
speedmixed0 0Parallax distance in pixels. Supported Y and X axis. Example: 100 200. Also you can use data attribute data-jarallax-element.
thresholdmixednull nullSpecify threshold for the parallax effect to kick in. For example, if you pass 0 0, the element will start to move only after it has been scrolled to the middle of the viewport.

Events

Events used the same way as Options.

NameDescription
onScrollCalled when parallax working. Use first argument with calculations.
onInitCalled after init end.
onDestroyCalled after destroy.
onCoverImageCalled after cover image.

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


See Demo And Download

Official Website(nk-o): Click Here

This superior jQuery/javascript plugin is developed by nk-o. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.