基于webGL的云层动画js插件

// vanilla javascript

klouds.create({

  selector: '#myClouds'

});

// jQuery plugin

$(function(){

  $('#myClouds').Klouds();

});

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)