基于webGL的云层动画js插件

这是一款基于webGL的云层动画js插件。该插件使用HTML5 canvas 和 WebGL API，生成可控制的多层云彩动画特效。

在线演示  下载

 

 NPM安装

?

1	npm install klouds --save

 使用方法

ES6语法：

?

1	import * as klouds from 'klouds'

在页面中引入下面的文件。

?

1 2 3 4 5

< script src="lib/klouds.min.js">     < script src="/path/to/cdn/jquery.min.js"> < script src="lib/klouds.min.js">

 HTML结构

?

1	< canvas id="myClouds">

 初始化插件

?

1 2 3 4 5 6 7 8 9

// vanilla javascript klouds.create({   selector:  '#myClouds' });   // jQuery plugin $( function (){   $( '#myClouds' ).Klouds(); });

 API

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

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)

示例代码

?

1 2 3 4 5 6 7 8 9 10 11

var clouds = klouds.create({   selector:  '#my-cloud-canvas' ,   speed: 5,   layerCount: 7,   bgColor:  'white' ,   cloudColor1:  'white' ,   cloudColor2:  'red' })   // later you could for example changed the speed clouds.setSpeed(10)