Narcissistic, Perfectly Modest
    Have ideas to improve npm?Join in the discussion! »

    panjs

    0.7.0 • Public • Published

    panJS

    Build Status Coverage Status Sauce Test Status

    Description

    Pan images without dependencies

    Install with npm

    npm install --save panjs

    Install with bower

    bower install panjs --save

    Usage

    Prerequisited markup

    <div class="img-wrapper">
        <img src="/path/to/image.jpg" alt="">
    </div>

    Prerequisited css

    .img-wrapper {
      overflow: hidden;
    }

    Integration

      import panjs from 'panjs';
      var wrapper = document.querySelectorAll('.img-wrapper');
     
      panjs(wrapper, {
        // options going here, at the moment we do not support any options
      });

    Public API

    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

    Options

    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

    Browser support

    Sauce Test Status

    Note: If you attend to use this module with older browser its mandatory to polyfill both Array.from and `Object.assign

    License

    MIT. Copyright (c) 2016 Philip Knape.

    Install

    npm i panjs

    DownloadsWeekly Downloads

    8

    Version

    0.7.0

    License

    MIT

    Last publish

    Collaborators

    • avatar