Pan images without dependencies
npm install --save panjs
bower install panjs --save
<div class="img-wrapper">
<img src="/path/to/image.jpg" alt="">
</div>
.img-wrapper {
overflow: hidden;
}
import panjs from 'panjs';
var wrapper = document.querySelectorAll('.img-wrapper');
panjs(wrapper, {
// options going here, at the moment we do not support any options
});
Name | Description | arguments | returns |
---|---|---|---|
setup | inds eventlisteners, merging default and user options, setup the pan based on DOM (called once during initialisation). Call setup if DOM or user options have changed or eventlisteners needs to be rebinded. | String | HTMLElement |
reset | Sets the pan back to the starting position or position passed to method | Object | Void |
destroy | Resets and destroys the panjs instance by removing all panjs specific event listeners | Void | |
offset | Get the current offset, values between 0 - 1 | Object |
Name | Description | Type | Default |
---|---|---|---|
target | If multiple images are inside wrapper, pass a target css selector to select the preferred image | String | Null |
offset | Start offset for inner image, between 0 - 1 | Object | { x: 0, y: 0 } |
xAxisLock | Ability to lock x-axis | Boolean | false |
yAxisLock | Ability to lock y-axis | Boolean | false |
speed | Speed on returning to default state when calling reset or destroy | Number | 0 |
easing | Kind of css easing on returning to default state when calling reset or destroy | String | ease |
Note: If you attend to use this module with older browser its mandatory to polyfill both Array.from
and Object.assign
MIT. Copyright (c) 2016 Philip Knape.