puffin.js
v1.1.0
Published
A new way to hover images
Downloads
5
Maintainers
Readme
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 |