Background Parallax Effect with jQuery and CSS

Background Parallax Effect with jQuery and CSS

Background parallax effect with jQuery and CSS is another jQuery/JavaScript parallax plugin which  is be responsible for adding an even parallax scrolling effect to background images, images, HTML5, YouTube and Vimeo videos. you can add any HTML elements as well using CSS3 3D transforms.

Code in clean JavaScript with no dependences + jQuery supported. YouTube, Vimeo and Self-Hosted Videos parallax supported.

Getting Started

ES6

npm install jarallax --save
import {
    jarallax,
    jarallaxVideo
} from 'jarallax';

jarallaxVideo();

Browser

<!-- Jarallax -->
<script src="jarallax/dist/jarallax.min.js"></script>

<!-- Include it if you want to use Video parallax -->
<script src="jarallax/dist/jarallax-video.min.js"></script>

CDN

<!-- Jarallax -->
<script src="https://unpkg.com/[email protected]/dist/jarallax.min.js"></script>

<!-- Include it if you want to use Video parallax -->
<script src="https://unpkg.com/[email protected]/dist/jarallax-video.min.js"></script>

Set up your HTML

<!-- Background Image Parallax -->
<div class="jarallax">
    <img class="jarallax-img" src="<background_image_url_here>" alt="">
    Your content here...
</div>

<!-- Background Image Parallax with <picture> tag -->
<div class="jarallax">
    <picture class="jarallax-img">
        <source media="..." srcset="<alternative_background_image_url_here>">
        <img src="<background_image_url_here>" alt="">
    </picture>
    Your content here...
</div>

<!-- Alternate: Background Image Parallax -->
<div class="jarallax" style="background-image: url('<background_image_url_here>');">
    Your content here...
</div>

Additional styles

These styles need to correct background image position before Jarallax initialized:

.jarallax {
    position: relative;
    z-index: 0;
}
.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    /* support for plugin https://github.com/bfred-it/object-fit-images */
    font-family: 'object-fit: cover;';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

You can include it from dist/jarallax.css.

Call the plugin

A. Data attribute way

<div data-jarallax data-speed="0.2" class="jarallax">
    <img class="jarallax-img" src="<background_image_url_here>" alt="">
    Your content here...
</div>

Note: You can use all available options as data attributes. For example: data-speeddata-img-srcdata-img-size, etc…

B. JavaScript way

jarallax(document.querySelectorAll('.jarallax'), {
    speed: 0.2
});

C. jQuery way

$('.jarallax').jarallax({
    speed: 0.2
});

Background Video Usage Examples

A. Data attribute way

<!-- Background YouTube Parallax -->
<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0">
    Your content here...
</div>

<!-- Background Vimeo Parallax -->
<div class="jarallax" data-jarallax-video="https://vimeo.com/110138539">
    Your content here...
</div>

<!-- Background Self-Hosted Video Parallax -->
<div class="jarallax" data-jarallax-video="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv">
    Your content here...
</div>

B. JavaScript way

import { jarallax, jarallaxVideo } from 'jarallax';
jarallaxVideo();

jarallax(document.querySelectorAll('.jarallax'), {
    speed: 0.2,
    videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0'
});
<div class="jarallax"></div>

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 &lt;img&gt; tag for background, you should add object-fit values, else use background-size values.
imgPositionstring50% 50%Image position. If you use &lt;img&gt; tag for background, you should add object-position values, else use background-position values.
imgRepeatstringno-repeatImage repeat. Supported only background-position values.
keepImgbooleanfalseKeep &lt;img&gt; 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.

Disable on mobile devices

You can disable parallax effect and/or video background on mobile devices using option disableParallax and/or disableVideo.

Example:

jarallax(document.querySelectorAll('.jarallax'), {
    disableParallax: /iPad|iPhone|iPod|Android/,
    disableVideo: /iPad|iPhone|iPod|Android/
});

Or using function. Example:

jarallax(document.querySelectorAll('.jarallax'), {
    disableParallax: function () {
        return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
    },
    disableVideo: function () {
        return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
    }
});
Background Parallax Effect with jQuery and CSS3

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. More info see below.
onInitCalled after init end.
onDestroyCalled after destroy.
onCoverImageCalled after cover image.

onScroll event

jarallax(document.querySelectorAll('.jarallax'), {
    onScroll: function(calculations) {
        console.log(calculations);
    }
});

Console Result:

{
    // parallax section client rect (top, left, width, height)
    rect            : object,

    // see image below for more info
    beforeTop       : float,
    beforeTopEnd    : float,
    afterTop        : float,
    beforeBottom    : float,
    beforeBottomEnd : float,
    afterBottom     : float,

    // percent of visible part of section (from 0 to 1)
    visiblePercent  : float,

    // percent of block position relative to center of viewport from -1 to 1
    fromViewportCenter: float
}

Methods

NameResultDescription
destroyDestroy Jarallax and set block as it was before plugin init.
isVisiblebooleanCheck if parallax block is in viewport.
onResizeFit image and clip parallax container. Called on window resize and load.
onScrollCalculate parallax image position. Called on window scroll.

Call methods example

A. JavaScript way

jarallax(document.querySelectorAll('.jarallax'), 'destroy');

B. jQuery way

$('.jarallax').jarallax('destroy');

No conflict

If you already have global jarallax variable or jQuery.fn.jarallax, you can rename plugin.

A. JavaScript way

var newJarallax = jarallax.noConflict();

B. jQuery way

jQuery.fn.newJarallax = jQuery.fn.jarallax.noConflict();

For Developers

Installation

  • Run npm install in the command line. Or if you need to update some dependencies, run npm update

Building

  • npm run dev to run build and start local server with files watcher
  • npm run build to run build

Linting

  • npm run js-lint to show eslint errors
  • npm run js-lint-fix to automatically fix some of the eslint errors

Test

  • npm run test to run unit tests

File Information

File Size52.65 MB
Last Update22 Hours Ago
Date Published4 Years Ago
LicenseMIT

Your email address will not be published. Required fields are marked *

More Stories
jQuery Plugin Drag and Drop Online Form Builder
jQuery Plugin Drag and Drop Form Builder