Install
Using NPM, install panjs and add it to your package.json dependencies.
Instantiate
Simply import panjs, then instantiate it. No options are passed to the constructor.
Target
Just Pass a css selector or a node element (and some css) and let panjs do the rest
<div class="img-wrapper">
<img src="/link/to/your/inage.jpg" alt="">
</div>
.img-wrapper {
overflow: hidden;
}
import panjs from 'panjs'
document.addEventListener('DOMContentLoaded', () => {
const wrapper = document.querySelector('.img-wrapper');
panjs(wrapper);
});
import panjs from 'panjs'
document.addEventListener('DOMContentLoaded', () => {
const wrapper = document.querySelector('.img-wrapper');
panjs(wrapper);
});
import panjs from 'panjs'
document.addEventListener('DOMContentLoaded', () => {
const resetOne = document.querySelector('.reset-button.base');
const resetTwo = document.querySelector('.reset-button.next');
const wrapper = document.querySelector('.img-wrapper');
const pan = panjs(wrapper);
resetOne.addEventListener('click', () => pan.reset())
resetTwo.addEventListener('click', () => pan.reset({ offset: { x: 0.3, y: 0.3 }, speed: 300}))
});
import panjs from 'panjs'
document.addEventListener('DOMContentLoaded', () => {
const wrapper = document.querySelector('.img-wrapper');
panjs(wrapper);
panjs.on('mouseenter', handleTouchMove)
});