JQuery & Amd Compatible Plugin For Parallax

Parallax ImageScroll is very simple to use, it can create image parallax effect without any extra effort. The parallax animation effect is made up of a simple CSS3 transition, so it works smoothly with all modern browsers and devices.

Features:

Parallax ImageScroll is AMD compatible.
Simple to implement, no coding experience is required.
Supports on all modern browsers and devices.

Install with NPM

npm install parallax-imagescroll

Install with Bower

bower install Parallax-ImageScroll

How to use it:

1. Include the Javascript jquery.imageScroll.min.js at the bottom of the web page.

<script src="path/to/jquery.imageScroll.min.js"></script>

2. Add the basic HTML to the page.

<div class="img-holder" data-image="path/to/demo-3.jpg"></div>

3. Initialize the plugin and we're ready to go.

$('.img-holder').imageScroll();

AMD

The plugin is AMD compatible. To use with e.g. RequireJS, you can do this. See demo files for example.

require(['jquery.imageScroll'], function (ImageScroll) {
    $('.img-holder').each(function () {
        new ImageScroll(this);
    });
    //or
    //$('.img-holder').imageScroll();
});

Plugin's default options:

$('.img-holder').imageScroll({
     image: null,
     imageAttribute: 'image',
     container: $('body'),
     windowObject: $(window),
     speed:.2,
     coverRatio:.75,
     coverRatio:1,
     holderClass: 'imageHolder',
     imgClass: 'img-holder-img',
     holderMinHeight: 200,
     holderMaxHeight: null,
     extraHeight: 50,
     mediaWidth: 1600,
     mediaHeight: 900,
     parallax: true,
     touch: false
  });

Name	Default	Description
`image`	null	The image to show (best to set this option via data attr (data-img)
`imageAttribute`	'image'	The data attribute name for images. Uses the value of this attribute to load the image
`container`	$('body')	The element to which the parallax image(s) will be attached to
`windowObject`	$(window)	The window object which listens to scroll and resize events
`speed`	0.2	The speed of the parallax effect. A floating number between 0 and 1, where a higher number will move the images faster upwards
`coverRatio`	0.75 //75%	How many percent of the screen each image should cover
`holderClass`	'imageHolder'	Class added to the image holder(s)
`imgClass`	'img-holder-img'	Class added to the image
`holderMinHeight`	200	The minimum height of the image in pixels
`holderMaxHeight`	null	The maximum height of the image in pixels
`extraHeight`	0	Extra height added to the image. Can be useful if you want to show more of the top image
`mediaWidth`	1600	The original width of the image
`mediaHeight`	900	The original height of the image
`parallax`	true	Whether or not you want the parallax effect, e.g. does not work very well in ancient browsers
`touch`	false	Presents a mobile/tablet friendy version, no parallax effect and smaller images (should be used with a mobile/tablet optimized images)

Public methods:

disable()
enable()
refresh()
destroy()

You can call them on individual- or all the instances.

//Call method refresh on all the instances of the plugin
var instances = $('.img-holder');
instances.imageScroll('refresh');

//E.g. Call method refresh on the first image
//Alternative 1:
var instances = $('.img-holder');
var instance = $(instances.get(0));
instance.imageScroll('refresh');

//Alternative 2:
var instances = $('.img-holder');
var instance = $(instances.get(0)).data('plugin_imageScroll');
instance.refresh();

Touch

The effect is not very smooth on a touch device. You could therefore present the user with a fallback version, which displays the images with no parallax effect.

var touch = Modernizr.touch;
$('.img-holder').imageScroll({
    imageAttribute: (touch === true) ? 'image-mobile' : 'image',
    touch: touch
});