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.

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