Snakle.js

Javascript library using Canvas - Snake loader animation around the viewport borders.

Try the Demo samples.

Getting Started

1. Installation
2. Usage
3. Options
4. API / Events
5. Browser Support

Installation

Using NPM

Not published yet

npm i snakle.js --save

jsDelivr CDN

Not published yet

<script src="https://cdn.jsdelivr.net/snakle.js/1.0.0/snakle.js"></script>

Usage

// ES6 module import
import Snakle from 'snakle.js' // not required if using a CDN or directly include

// instantiate with options
const snake = new Snakle('#selector', { /* options here */ })

// initiate and draw the snake
snake.init()

// play animation
snake.play()

Options

Settings overview list:

Snakle('#selector', {
    thickness: 22,
    color: 'red',
    length: 10,
    speed: 15
})

Option details are detailed below.

Option | Type | Default | Description ---|---|---|--- thickness | integer | 22 | Thickness of the snake body (the snake body is made of multiple squares, where thickness represents the width and height of each square). color | string or array | red | Color of the snake body (RGB or hexadecimal). Can be a single color #3498db, or a two colors gradient by using a array[2] ['red', 'blue']. length | integer | 10 | Length of the snake body or tail length (also represents the number of squares that the body is made of). speed | integer | 15 | Speed of the snake animation (FPS).

API / Events

Snakle exposes the following methods, and events:

• init
• play
• pause
• reset
• stop
• destroy
• draw
• resize

Note that all methods are chainable, and all events includes on, off, and once.

.init()

Used to generate the snake and draw it into the viewport.

snake.init()
snake.on('init', () => { /* callback here */ })

.play()

Used to play the snake animation.

snake.play()
snake.on('play', () => { /* callback here */ })

.pause()

Used to pause the snake animation.

snake.pause()
snake.on('pause', () => { /* callback here */ })

.reset()

Used to reset the snake position to it's initial state.

snake.reset()
snake.on('reset', () => { /* callback here */ })

.stop()

Used to stop the snake animation. Equivalent to .pause() + .reset().

snake.stop()
snake.on('stop', () => { /* callback here */ })

.destroy()

Used to completely remove the snake from the selector. Restore the initial state.

snake.destroy()
snake.on('destroy', () => { /* callback here */ })

draw

Emitted each time the snake is re-drawn into the viewport during animation.

snake.on('draw', () => { /* callback here */ })

resize

Emitted each time the snake is re-drawn after a resize of the viewport.

snake.on('resize', () => { /* callback here */ })

Browser Support

Snakle is fully supported by Evergreen Browsers (Edge, Opera, Safari, Firefox & Chrome) and IE 11.

License

MIT © 2016 Sylvain Simao