animated clouds webgl - Free Download Create Animated Clouds Using Canvas And WebGl - klouds.js

Free Download Create Animated Clouds Using Canvas And WebGl – klouds.js

By Posted on

This time I will share jQuery Plugin and tutorial about Create Animated Clouds Using Canvas And WebGl – klouds.js, hope it will help you in programming stack.

animated clouds webgl - Free Download Create Animated Clouds Using Canvas And WebGl - klouds.js
File Size: 66.5 KB
Views Total: 2467
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 # NPM
2 $ npm install klouds --save

2. Import & load the klouds.js in the document.

view source
1 // es6
2 import * as klouds from 'klouds'
view source
1 <!-- Vanilla JavaScript -->
2 <script src="lib/klouds.min.js"></script>
3  
4 <!-- As a jQuery plugin -->
5 <script src="/path/to/cdn/jquery.min.js"></script>
6 <script src="lib/klouds.min.js"></script>

3. Create a canvas element on which the plugin renders the animated clouds.

view source
1 <canvas id="myClouds"></canvas>

4. Call the function on the canvas element and done.

view source
1 // vanilla javascript
2 klouds.create({
3   selector: '#myClouds'
4 });
5  
6 // jQuery plugin
7 $(function(){
8   $('#myClouds').Klouds();
9 });

5. Set the animation speed. Default: 1. Support negative numbers.

view source
1 $('#myClouds').Klouds({
2   speed: 1
3 });

6. Specify the umber of cloud paralax layers. Default: 5.

view source
1 $('#myClouds').Klouds({
2   layerCount: 3
3 });

7. Customize the cloud colors.

view source
1 $('#myClouds').Klouds({
2   cloudColor1: [25, 178, 204],
3   cloudColor2: [255, 255, 255]
4 });

8. Customize the background color of the sky.

view source
1 $('#myClouds').Klouds({
2   cloudColor1: [25, 178, 204],
3   cloudColor2: [255, 255, 255]
4 });

9. Available API methods.

view source
01 const instance = $('#myClouds').Klouds();
02  
03 // start the animation
04 instance.start()
05  
06 // stop the animation
07 instance.stop()
08  
09 // get the current animation speed
10 instance.getSpeed()
11  
12 // set the animation speed
13 instance.setSpeed(speed)
14  
15 // get the number of cloud layers
16 instance.getLayerCount()
17  
18 // set the number of cloud layers
19 instance.setLayerCount(count)
20  
21 // get the background color
22 instance.getBgColor()
23  
24 // set the background color
25 instance.setBgColor(color)
26  
27 // get the color 1
28 instance.getCloudColor1()
29  
30 // set the color 1
31 instance.setCloudColor1(color)
32  
33 // get the color 2
34 instance.getCloudColor2()
35  
36 // set the color 2
37 instance.setCloudColor2(color)

Changelog:

2021-01-09

  • Bugfixes

Related posts: