基于webGL的云层动画js插件

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

在线演示  下载

 

 NPM安装

npm install klouds --save                  

 使用方法

ES6语法：

import * as klouds from 'klouds'                  

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

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

 HTML结构

< canvas id="myClouds">

 初始化插件

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

 API

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)                  

示例代码

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)