html5绘制一朵逼真的白云动画特效免费下载

html5绘制一朵逼真的白云动画特效,蓝蓝的天空中一朵白色模糊云朵飘动着。

JS代码

<script> 
var Cloud = {}; 
 
Cloud.init = function() { 
  this.width = window.innerWidth; 
  this.height = window.innerHeight; 
  this.xC = this.width / 2; 
  this.yC = this.height / 2; 
  this.stepCount = 0; 
  this.population = 200; 
  this.particles = []; 
   
  for (var i = 0; i < this.population; i++) { 
    Cloud.birth(); 
  } 
}; 
Cloud.evolve = function() { 
  this.stepCount++; 
  this.move(); 
  this.draw(); 
}; 
Cloud.move = function() { 
  for (var i = 0; i < this.particles.length; i++) { 
    var p = this.particles[i]; 
    p.x = p.xStart + p.dist * Math.cos(p.speed * this.stepCount); 
    p.y = p.yStart + p.dist * Math.sin(p.speed * this.stepCount); 
  } 
}; 
Cloud.draw = function() { 
  var divs = document.getElementsByClassName('drop'); 
  for (var i = 0; i < this.particles.length; i++) { 
    var particle = this.particles[i], 
        div = divs[i]; 
     
    var r = particle.r, 
        x = particle.x - r / 2, 
        y = particle.y - r / 2; 
    div.style.left = x + 'px'; 
    div.style.top = y + 'px'; 
    div.style.height = particle.r + 'px'; 
    div.style.width = particle.r + 'px'; 
  } 
}; 
Cloud.birth = function() { 
  var speed = 0.2, 
      x = this.xC + 220 * (-1 + 2 * Math.random()), 
      y = this.yC + 100 * (-1 + 2 * Math.random()), 
      minSize = 10, 
      maxSize = 150, 
      distToCenter = Math.sqrt(Math.pow(x - this.xC, 2) + Math.pow(y - this.yC, 2)), 
      size = 170 - 0.65 * distToCenter; 
   
  // Create new particle 
  var particle = { 
    x: x, 
    y: y, 
    xStart: x, 
    yStart: y, 
    speed: speed * (-0.5 + Math.random()), 
    dist: 15, 
    r: size 
  }; 
   
  // Push new particle to global particles array 
  this.particles.push(particle); 
   
  // Create one more div node and append to DOM 
  var div = document.createElement('div'); 
  div.className = 'drop'; 
  document.getElementsByTagName('body')[0].appendChild(div); 
}; 
 
document.addEventListener('DOMContentLoaded', function() { 
   
  Cloud.init(); 
   
  setInterval(function() { 
    Cloud.evolve(); 
  }, 50); 
   
});</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录