Create Wiggly DIV Using JavaScript And Canvas – wiv.js

Category: Animation , Javascript , Recommended | January 8, 2019
Author: jjkaufman
Views Total: 360
Official Page: Go to website
Last Update: January 8, 2019
License: MIT

Preview:

Create Wiggly DIV Using JavaScript And Canvas – wiv.js

Description:

wiv.js is a fancy JavaScript library for creating configurable wiggly DIV frames using JavaScript and HTML5 canvas.

The smooth animation is based on the window.requestAnimationFrame API.

How to use it:

Download and import the wiv.js library into the document.

<script src="wiv.js"></script>

Add the class wiv to the DIV element and config the wiggle effect with the following HTML data attributes:

  • data-wiv-speed: animation speed
  • data-wiv-height: height
  • data-wiv-tightness: tightness
  • data-wiv-thickness: thickness
  • data-wiv-color: color
<div class="wiv" 
     data-wiv-speed=".15" 
     data-wiv-height="5" 
     data-wiv-tightness="6" 
     data-wiv-thickness="2" 
     data-wiv-color="#FFFF00"
>

Initialize the wiv.js library. Done.

let instance = wiv.wiv();
instance.initWivs();

Changelog:

01/08/2018

  • Added CSS selector data attribute and test for it before running animations

01/06/2018

  • Added configurable direction setting for wivs

12/26/2018

  • Replaced all instances of var with let

You Might Be Interested In:


Leave a Reply