README

Snakle.js

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

Getting Started

Installation
Usage
Options
API / Events
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.

snakle.js

Usage no npm install needed!