puffin.js's Introduction

puffin.js

puffin.js is a new way to bring hover on your images.

Documentation https://treast.github.io/puffin.js/

Inspired by Oxygenna (https://www.uplabs.com/posts/extreme-hover)

Installation

With NPM (recommended)

npm install puffin.js --save

With Git

git clone https://github.com/Treast/puffin.js.git

mv ./puffin.js/dist/puffin.min.js ./foo/bar

Usage (deprecated)

Import

import Puffin from 'puffin.js'

Example

  let puffin = new Puffin({
    selector: '#foo',
    image: './bar.jpg',
    overlay: "Demonstration puffin.js",
    duration: 0.4,
    delay: 0,
    parts: [
      {
        x: -80,
        y: -180,
        height: 250,
        width: 120,
      },
      {
        x: -180,
        y: 80,
        height: 150,
        width: 250,
        delay: 0.1,
        duration: 0.4,
      },
      {
        x: 100,
        y: 90,
        height: 210,
        width: 160,
        delay: 0.2,
        duration: 0.5,
      },
      {
        x: 140,
        y: -60,
        height: 100,
        width: 190,
        delay: 0.3,
        duration: 0.6,
      },
    ],
  });

Options

Name	Informations
selector `(string)`	Where to put the image (ex: `#myDiv`, `.myOtherDiv` ..)
image `(string)`	The image to display
overlay `(string\|false)`	The text displayed on the overlay (any string or `false` to disable)
duration `(float)`	The default animation duration (by default `0.4`)
delay `(float)`	The default delay between the mouse entering the image and the animation (by default `0`)
parts `(Object[])`	The definitions of all the parts (rectangles)
x `(float)`	The position on the x-axis once hovered
y `(float)`	The position on the y-axis once hovered
height `(integer)`	The height of the part
width `(integer)`	The width of the part
duration `(float)`	The duration for that part
delay `(float)`	The delay for that part

Recommend Projects