Smooth parallax scrolling effect for background images, videos and inline elements. Code in pure JavaScript with NO dependencies + jQuery supported. Youtube, Vimeo and Local Videos parallax supported.
- Latest browsers on Mac and Windows (Chrome, Firefox, Safari, IE11, Edge)
- Latest Chrome on Android
- Latest Safari on iOs
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/
Include Jarallax plugin. Also include jQuery before jarallax if you want to use it.
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>
<!-- Include it if you want to parallax any element -->
<script src="jarallax/jarallax-element.js"></script>Link directly from unpkg
<!-- Jarallax -->
<script src="https://unpkg.com/jarallax@1.9/dist/jarallax.min.js"></script>
<!-- Include it if you want to use Video parallax -->
<script src="https://unpkg.com/jarallax@1.9/dist/jarallax-video.min.js"></script>
<!-- Include it if you want to parallax any element -->
<script src="https://unpkg.com/jarallax@1.9/dist/jarallax-element.min.js"></script>npm: npm install jarallax -- save
Bower: bower install jarallax --save
You can add these plugins before jarallax initialize.
- object-fit-images polyfill for
object-fitstyles; - lazysizes lazy-load images with srcset support;
<!-- Background Image Parallax -->
<div class="jarallax">
<img class="jarallax-img" src="<background_image_url_here>" alt="">
Your content here...
</div>
<!-- Alternate: Background Image Parallax -->
<div class="jarallax" style="background-image: url('<background_image_url_here>');">
Your content here...
</div>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.
<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-speed, data-img-src, data-img-size, etc...
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.2
});$('.jarallax').jarallax({
speed: 0.2
});<!-- 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 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.
<!-- Element will be parallaxed on -140 pixels from the screen center by Y axis -->
<div data-jarallax-element="-140">
Your content here...
</div>
<!-- Element will be parallaxed on 250 pixels from the screen center by Y axis and on -100 pixels from the screen senter by X axis -->
<div data-jarallax-element="250 -100">
Your content here...
</div>Note: this is more like experimental feature, so the behavior could be changed in the future releases.
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 url. By default used image from background. |
| imgElement | dom / selector | .jarallax-img |
Image tag that will be used as background. |
| imgSize | string | cover |
Image size. If you use <img> tag for background, you should add object-fit values, else use background-size values. |
| imgPosition | string | 50% 50% |
Image position. If you use <img> tag for background, you should add object-position values, else use background-position values. |
| imgRepeat | string | no-repeat |
Image repeat. Supported only background-position values. |
| keepImg | boolean | false |
Keep <img> tag in it's default place after Jarallax inited. |
| 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 | false |
Disable parallax on iOs devices. |
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. |
| videoVolume | float | 0 |
Video volume from 0 to 100. |
| videoPlayOnlyVisible | boolean | true |
Play video only when it is visible on the screen. |
Required jarallax/jarallax-element.js file.
| Name | Type | Default | Description |
|---|---|---|---|
| type | string | element |
Will only work with element value. |
| speed | mixed | 0 0 |
Parallax distance in pixels. Supported Y and X axis. Example: 100 200. Also you can use data attribute data-jarallax-element. |
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. |
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:
| Name | Result | Description |
|---|---|---|
| destroy | - | Destroy Jarallax and set block as it was before plugin init. |
| isVisible | boolean | Check if parallax block is in viewport. |
| onResize | - | Fit image and clip parallax container. Called on window resize and load. |
| onScroll | - | Calculate parallax image position. Called on window scroll. |
jarallax(document.querySelectorAll('.jarallax'), 'destroy');$('.jarallax').jarallax('destroy');If you already have global jarallax variable or jQuery.fn.jarallax, you can rename plugin.
var newJarallax = jarallax.noConflict();jQuery.fn.newJarallax = jQuery.fn.jarallax.noConflict();Images https://unsplash.com/ Local Video https://videos.pexels.com/
Copyright (c) 2017 nK Licensed under the WTFPL license.