File Size: 5002KB
Total Views: 654
Date Created:
Last Modified Date:
Official Website: Go to website
License:
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-imagescrollInstall with Bower
bower install Parallax-ImageScrollHow 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
});
