jarallax

Just Another Parallax

Smooth parallax scrolling effect for background images using CSS transforms with graceful degradation for old browsers. Parallax plugin with NO dependencies. jQuery supported. Youtube, Vimeo and Local Videos parallax supported.

Demo

Tested Browsers

• IE9+
• Safari 5.1.7+
• Opera 12+
• Latest browsers on Mac and Windows (Chrome, Firefox, Safari, IE, Edge)
• Latest Chrome on Android
• Latest Safari on iOs

Want WordPress Plugin?

We made WordPress plugin to easily make backgrounds for content in your blog with all Jarallax features.

Demo: https://wp.nkdev.info/free-advanced-wordpress-backgrounds/

Download: https://nkdev.info/downloads/advanced-wordpress-backgrounds/

Install

Include Jarallax plugin. Also include jQuery before jarallax if you want to use it.

Download

Download scripts directly from this repository and link it in your HTML file

<!-- Jarallax -->
<script src='jarallax/jarallax.js'></script>

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

CDN

Link directly from cdnjs

<!-- Jarallax -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.7.3/jarallax.min.js'></script>

<!-- Include it if you want to use Video parallax -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.7.3/jarallax-video.min.js'></script>

Package managers

npm: npm install jarallax -- save

Bower: bower install jarallax --save

Set up your HTML

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

Additional styles

Mandatory requirement for plugin works properly - the selected item should be NOT position: static (for ex. relative).

This styles need to add relative position and correct background image position before Jarallax initialize end.

.jarallax {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Call the plugin

A. Data attribute way

<div data-jarallax='{"speed": 0.2}' class='jarallax' style='background-image: url(<background_image_url_here>)'>
    Your content here...
</div>

B. JavaScript way

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

C. jQuery way

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

Video Usage Examples

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

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

<!-- Local 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>

Note: for local videos required only 1 video type, not necessary use all mp4, webm and ogv. This need only for maximum compatibility with all browsers.

Options

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

name	type	default	description
type	string	scroll	scroll, scale, opacity, scroll-opacity, scale-opacity
speed	float	0.5	Parallax effect speed. Provide numbers from -1.0 to 2.0
imgSrc	path	null	Image path. By default used image from background.
imgWidth	number	null	You can provide the natural width and natural height of an image to speed up loading.
imgHeight	number	null
elementInViewport	dom	null	Use custom DOM / jQuery element to check if parallax block in viewport. More info here - Issue 13
zIndex	number	-100	z-index of parallax container.
noAndroid	boolean	false	Disable parallax on Android devices.
noIos	boolean	true	Disable parallax on iOs devices. Jarallax disabled by default on iOs because of strong lags ;(

Options For Video

Required jarallax/jarallax-video.js file.

name	type	default	description
videoSrc	string	null	You can use Youtube, Vimeo or local videos. Also you can use data attribute data-jarallax-video
videoStartTime	float	0	Start time in seconds when video will be started (this value will be applied also after loop)
videoEndTime	float	0	End time in seconds when video will be ended

Events

Evenets used the same way as Options.

name	description
onScroll	Called when parallax working. Use first argument with calculations. More info see below.
onInit	Called after init end.
onDestroy	Called after destroy.
onCoverImage	Called 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
}

Calculations example:

Methods

name	result	description
destroy	-	Destroy Jarallax and set block as it was before plugin init.
isVisible	boolean	Check if parallax block is in viewport.
clipContainer	-	Clip parallax container. Called on window resize and load.
coverImage	-	Fit image in parallax container. Called on window resize and load.
onScroll	-	Calculate 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();

Real Usage Examples

• Khaki
• Godlike
• Youplay

Credits

Images https://www.pexels.com/ Local Video https://www.videezy.com/

License

Copyright (c) 2017 nK Licensed under the WTFPL license.