Create Animated Clouds Using Canvas And WebGl - klouds.js

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.