基于webGL的云层动画js插件

创客云


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

使用方法

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

  1. <!-- 纯 JavaScript -->
  2. <script src="lib/klouds.min.js"></script>
  3.  
  4. <!-- jQuery插件 -->
  5. <script src="/path/to/cdn/jquery.min.js"></script>
  6. <script src="lib/klouds.min.js"></script>

HTML结构

  1. <canvas id="myClouds"></canvas>

初始化插件

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

API

  1. const instance = $('#myClouds').Klouds();
  2.  
  3. // start the animation
  4. instance.start()
  5.  
  6. // stop the animation
  7. instance.stop()
  8.  
  9. // 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)

示例代码

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

Github网址:https://github.com/skyrim/klouds

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/50254.html
云模板

发表评论