Klouds is a very simple and easy to use JavaScript library that creates smooth animated clouds effects within a few minutes using HTML5 canvas and WebGL API. It is super customizable so anyone can customize its color, speed, background, layer count, etc.
1. Include the Javascript klouds.min.js at the bottom of the web page.
<script src="path/to/klouds.min.js"></script>2. Add the basic HTML to the page.
<canvas id="my-canvas"></canvas>3. Initialize the plugin and we're ready to go.
klouds.create({
selector: '#my-canvas'
})| name | required | type | description | default value | example values |
|---|---|---|---|---|---|
selector |
true | string | HTMLCanvasElement |
A selector string to your canvas element or an actual canvas element Note: jQuery plugin of this library does not require selector as an option. |
"#your-canvas-id" |
|
speed |
false | number |
Cloud movement speed. Positive speed go to the left, negative go to the right side. Zero value makes the clouds stand still. | 1 |
0 42 -21 |
layerCount |
false | number |
Number of cloud paralax layers. Can go from 1 to 8. | 3 |
1 5 8 |
bgColor |
false | string | number[] |
Color of the sky behind the clouds | [0.0, 102, 128] |
"cyan" "#f9c900" "rgb(255, 128, 0)" [0, 128, 220] |
cloudColor1 |
false | string | number[] |
Color of the first cloud layer. Cloud layers between first and last layer have a interpolated color. | [25, 178, 204] |
"cyan" "#f9c900" "rgb(255, 128, 0)" [0, 128, 220] |
cloudColor2 |
false | string | number[] |
Color of the last cloud layer. Cloud layers between first and last layer have a interpolated color. | [255, 255, 255] |
"cyan" "#f9c900" "rgb(255, 128, 0)" [0, 128, 220] |
<canvas id="my-canvas"></canvas>klouds.create({
selector: '#my-canvas'
})