karl-the-fog

1.0.1 • Public • Published

karl-the-fog

Creates a "stylized fog" using an HTML5 canvas.

About

I follow Dribbble pretty religiously and I have seen a quite a few different types of "stylized fog" in designers' work. Examples: here, here, here, and there. To me, it looks really freakin' awesome and I thought that it would fit in well with the theme of "Pacifica" for my personal website.

alt demo

Setup

  1. Save karl-the-fog like any other npm dependency

    npm i -S karl-the-fog
  2. Import the KarlTheFog class

    • ES6

      import KarlTheFog from 'karl-the-fog';
    • ES5

      var KarlTheFog = require('karl-the-fog').default;
    • Script

      <script src="karl-the-fog/dist/web.js"></script>

How to Use

There's not much to using it. You just need to pass an options object to the KarlTheFog class.

const options = {
  canvas: document.getElementById('fog'),
  style: {
    color: '#fff',
    scaleY: 35,
    scaleX: 50,
    width: 700,
  },
  steps: 100,
  animate: true,
  resize: true,
  timingFunction: 'cubicInOut',
};
new KarlTheFog(options);

Options

An object with properties listed below:

canvas

The <canvas></canvas> element to attach to.

style

An object with the following properties:

  • color: the color of the "fog" e.g. #fff or rbga(255, 255, 255, 1)
  • scaleY: the height in pixels of each "fog line"
  • scaleX: the minimum inset width in pixels for each "fog line"
  • width: the maximum width in pixels for each "fog line"

animate

A boolean for whether the "fog lines" should animate collapsing.

steps

A number with the number of animation steps. Higher is slow, but smoother.

timingFunction

A string with the name of a timing function from eases. The current list of functions includes these:

  • backInOut
  • backIn
  • backOut
  • bounceInOut
  • bounceIn
  • bounceOut
  • circInOut
  • circIn
  • circOut
  • cubicInOut
  • cubicIn
  • cubicOut
  • elasticInOut
  • elasticIn
  • elasticOut
  • expoInOut
  • expoIn
  • expoOut
  • linear
  • quadInOut
  • quadIn
  • quadOut
  • quartInOut
  • quartIn
  • quartOut
  • quintInOut
  • quintIn
  • quintOut
  • sineInOut
  • sineIn
  • sineOut

Package Sidebar

Install

npm i karl-the-fog

Weekly Downloads

0

Version

1.0.1

License

MIT

Last publish

Collaborators

  • dfrankland