Create Animated Clouds Using Canvas And WebGl - klouds.js
File Size: | 52.1 KB |
---|---|
Views Total: | 5193 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

klouds.js is a jQuery & Vanilla JavaScript plugin to generate animated, customizable clouds using HTML5 canvas and WebGL API.
Great for generating a graceful sky background for your web app.
How to use it:
1. Install & download the plugin.
# NPM $ npm install klouds --save
2. Import & load the klouds.js in the document.
// es6 import * as klouds from 'klouds'
<!-- Vanilla JavaScript --> <script src="lib/klouds.min.js"></script> <!-- As a jQuery plugin --> <script src="/path/to/cdn/jquery.min.js"></script> <script src="lib/klouds.min.js"></script>
3. Create a canvas element on which the plugin renders the animated clouds.
<canvas id="myClouds"></canvas>
4. Call the function on the canvas element and done.
// vanilla javascript klouds.create({ selector: '#myClouds' }); // jQuery plugin $(function(){ $('#myClouds').Klouds(); });
5. Set the animation speed. Default: 1. Support negative numbers.
$('#myClouds').Klouds({ speed: 1 });
6. Specify the umber of cloud paralax layers. Default: 5.
$('#myClouds').Klouds({ layerCount: 3 });
7. Customize the cloud colors.
$('#myClouds').Klouds({ cloudColor1: [25, 178, 204], cloudColor2: [255, 255, 255] });
8. Customize the background color of the sky.
$('#myClouds').Klouds({ cloudColor1: [25, 178, 204], cloudColor2: [255, 255, 255] });
9. Available API methods.
const instance = $('#myClouds').Klouds(); // start the animation instance.start() // stop the animation instance.stop() // get the current animation speed instance.getSpeed() // set the animation speed instance.setSpeed(speed) // get the number of cloud layers instance.getLayerCount() // set the number of cloud layers instance.setLayerCount(count) // get the background color instance.getBgColor() // set the background color instance.setBgColor(color) // get the color 1 instance.getCloudColor1() // set the color 1 instance.setCloudColor1(color) // get the color 2 instance.getCloudColor2() // set the color 2 instance.setCloudColor2(color)
Changelog:
2024-09-20
- v3.0
This awesome jQuery plugin is developed by skyrim. For more Advanced Usages, please check the demo page or visit the official website.