karl-the-fog
v1.0.1karl-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
Save
karl-the-fog
like any othernpm
dependencynpm i -S karl-the-fog
Import the
KarlTheFog
classES6
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
orrbga(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