File Size: 939KB
Total Views: 11
Date Created:
Last Modified Date:
Official Website: Go to website
License: MIT
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.
Features:
- Smooth cloud transition.
- Supports to change clouds color.
- Option to control the speed of the clouds.
- Can be modified the background color of the sky.
- Option to modify the layer count of the sky.
How to use it:
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'
})Plugin’s default options:
| 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 |
042-21 |
layerCount |
false | number |
Number of cloud paralax layers. Can go from 1 to 8. | 3 |
158 |
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] |
