利用HTML5实现网页背景特效气泡上升



11 41 14



特效描述:利用HTML5实现 网页背景特效 气泡上升,利用HTML5实现网页背景特效气泡上升

代码结构

1. 引入JS

<script src="js/jquery.min.js"></script>

2. HTML代码

<h1 class='title'>Fizz!</h1>
<canvas id="fizz"></canvas>
<script>
(function() {
  this.Bubble = (function() {
    class Bubble {
      constructor(x, y, r, createdAt) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.createdAt = createdAt;
      }
      velocity() {
        return this.r / 20 * Bubble.MAX_V;
      }
      grow(now) {
        if (!this.rising && this.r <= Bubble.MAX_R) {
          return this.r += Bubble.GROWTH_RATE * (now - this.createdAt);
        }
      }
      move(now) {
        if (this.rising) {
          return this.y -= (now - this.startedRisingAt) * this.velocity();
        }
      }
      rise() {
        if (!this.rising && this.r > 2) {
          this.rising = Math.random() < 0.15 * (this.r / Bubble.MAX_R);
          if (this.rising) {
            return this.startedRisingAt = new Date().getTime();
          }
        }
      }
    };
    Bubble.MAX_R = 20;
    Bubble.MAX_V = 0.02;
    Bubble.GROWTH_RATE = 0.00005;
    return Bubble;
  }).call(this);
  this.RisingBubbles = (function() {
    var rand, randInt;
    class RisingBubbles {
      constructor(id, maxBubbles) {
        var elem, i, j, ref;
        this.maxBubbles = maxBubbles;
        this.canvas = document.getElementById(id);
        elem = $('#' + id);
        elem.css('background-color', '#3d8835');
        elem.click(() => {
          var b, j, len, ref, results, ts;
          ts = new Date().getTime();
          ref = this.bubbles;
          results = [];
          for (j = 0, len = ref.length; j < len; j++) {
            b = ref[j];
            if (!b.rising) {
              b.rising = true;
              results.push(b.startedRisingAt = ts);
            } else {
              results.push(void 0);
            }
          }
          return results;
        });
        this.canvas.width = this.canvas.clientWidth;
        this.canvas.height = this.canvas.clientHeight;
        this.ctx = this.canvas.getContext('2d');
        this.ctx.fillStyle = '#FFFFFF';
        this.bubbles = [];
        this.lastFrame = new Date().getTime();
        for (i = j = 1, ref = randInt(0, this.maxBubbles); 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
          this.bubbles.push(new Bubble(randInt(0, this.canvas.width), randInt(0, this.canvas.height), rand(0, Bubble.MAX_R), new Date().getTime()));
        }
      }
      draw() {
        return this.run(new Date().getTime());
      }
      run(now) {
        var bubble, j, len, ref;
        this.update(now);
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        ref = this.bubbles;
        for (j = 0, len = ref.length; j < len; j++) {
          bubble = ref[j];
          this.ctx.moveTo(bubble.x, bubble.y);
          this.ctx.beginPath();
          this.ctx.arc(bubble.x, bubble.y, bubble.r, 0, 2 * Math.PI);
          this.ctx.fill();
        }
        return requestAnimationFrame(() => {
          return this.run(new Date().getTime());
        });
      }
      update(now) {
        var b, i, j, k, len, ref, ref1, results;
        ref = this.bubbles;
        for (j = 0, len = ref.length; j < len; j++) {
          b = ref[j];
          b.grow(now);
          b.rise();
          b.move(now);
        }
        this.bubbles = (function() {
          var k, len1, ref1, results;
          ref1 = this.bubbles;
          results = [];
          for (k = 0, len1 = ref1.length; k < len1; k++) {
            b = ref1[k];
            if (b.y + b.r >= 0) {
              results.push(b);
            }
          }
          return results;
        }).call(this);
        if (this.maxBubbles - this.bubbles.length > 0) {
          results = [];
          for (i = k = 1, ref1 = randInt(0, this.maxBubbles - this.bubbles.length); 1 <= ref1 ? k <= ref1 : k >= ref1; i = 1 <= ref1 ? ++k : --k) {
            results.push(this.bubbles.push(new Bubble(randInt(0, this.canvas.width), randInt(0, this.canvas.height), 1, new Date().getTime())));
          }
          return results;
        }
      }
    };
    randInt = function(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    };
    rand = function(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    };
    return RisingBubbles;
  }).call(this);
  $((function() {
    var fizz;
    fizz = new RisingBubbles('fizz', 500);
    return fizz.draw();
  }));
}).call(this);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到