Pan.js

Modern, tiny library for paning images without dependencies by knape.

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

Prerequisited markup

<div class="img-wrapper">
  <img src="/link/to/your/inage.jpg" alt="">
</div>

Prerequisited css

.img-wrapper {
  overflow: hidden;
}

Example: Single element

import panjs from 'panjs'

document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('.img-wrapper');
  panjs(wrapper);
});

Example: Single element

import panjs from 'panjs'

document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('.img-wrapper');
  panjs(wrapper);
});

Example: Reset element

reset 0x0
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}))
});

Example: Events

import panjs from 'panjs'

document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('.img-wrapper');
  panjs(wrapper);
  panjs.on('mouseenter', handleTouchMove)
});