Usage

Import

You can import it with ES6 syntax:

import Puffin from 'puffin.js'

Or you can import directly the file:

<script src="puffin.min.js" type="text/javascript">

How to use ?

A basic usage will look like this:

new Puffin({
    selector: '.puffin-container',
    image: './assets/images/puffin.png',
    duration: 0.4,
    delay: 0,
    overlay: "Demonstration puffin.js",
    parts: [
      {
        x: -80,
        y: -100,
        height: 150,
        width: 120,
      },
      {
        x: -90,
        y: 60,
        height: 150,
        width: 170,
        delay: 0.1,
        duration: 0.4,
      },
      {
        x: 140,
        y: 90,
        height: 210,
        width: 160,
        delay: 0.2,
        duration: 0.5,
      },
      {
        x: 120,
        y: -60,
        height: 160,
        width: 150,
        delay: 0.3,
        duration: 0.6,
      },
    ],
})

Explanations

Puffin

Property Type Informations
selector string Container where to put the image
image string URI of the image
overlay string|false Optional. Text to be display on an overlay. Default is disabled
duration number Optional. Duration by default for all parts. Default is 0.4
delay number Optional. Delay by default for all parts. Default is 0
parts PuffinPart[] Parts. See below for more informations.

PuffinParts

As you can see, you must specify parts. Those parts represent the square moving out when you mouseover.

You can define some properties :

Property Type Informations
x number Amount of horizontal pixels the part will move. If x is positive, the part will be on the right of the image, otherwise on the left.
y number Amount of vertical pixels the part will move. If y is positive, the part will be on the bottom of the image, otherwise on the top.
height number Height of the part.
width number Width of the part.
delay number Optional. Delay before the movement of the part. Default is 0
duration number Optional. Duration of the part movement. Default is 0.4