当前位置：首页 > 网页特效 > 动画效果

基于webGL的云层动画js插件

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

基于webGL的云层动画js插件

简介

ES6语法：

```html
import * as klouds from 'klouds'    
```              
在页面中引入下面的文件。

```html

<script src="lib/klouds.min.js"></script>
 

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="lib/klouds.min.js"></script>
```
#####  HTML结构
```html
<canvas id="myClouds"></canvas>
```
#####  初始化插件
```html
// vanilla javascript
klouds.create({
  selector: '#myClouds'
});
 
// jQuery plugin
$(function(){
  $('#myClouds').Klouds();
});
```
#####  API
```html
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)     
```             
##### 示例代码

```html
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)  
```

web299.com

基于webGL的云层动画js插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果