Snowflake falling animation effect implemented by native JS-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Snowflake falling animation effect implemented by native JS

May 05, 2018 am 11:44 AM

javascript animation

This article mainly introduces the snowflake falling animation effect implemented by native JS, involving implementation techniques related to javascript numerical operations and dynamic operation of page element attributes. Friends in need can refer to it

This article describes the native JS example Realized snowflake falling animation effect. Share it with everyone for your reference, the details are as follows:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;title&gt;www.jb51.net JS下雪动画&lt;/title&gt;
  &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;/head&gt;
&lt;style&gt;
  .masthead {
    background-color:#333;
    display:block;
    width:100%;
    height:400px;
  }
&lt;/style&gt;
&lt;body&gt;
&lt;p class=&quot;masthead&quot;&gt;&lt;/p&gt;
&lt;script&gt;
  (function () {
    var COUNT = 300;
    var masthead = document.querySelector(&#39;.masthead&#39;);
    var canvas = document.createElement(&#39;canvas&#39;);
    var ctx = canvas.getContext(&#39;2d&#39;);
    var width = masthead.clientWidth;
    var height = masthead.clientHeight;
    var i = 0;
    var active = false;
    function onResize() {
      width = masthead.clientWidth;
      height = masthead.clientHeight;
      canvas.width = width;
      canvas.height = height;
      ctx.fillStyle = &#39;#FFF&#39;;
      var wasActive = active;
      active = width &gt; 600;
      if (!wasActive &amp;&amp; active)
        requestAnimFrame(update);
    }
    var Snowflake = function () {
      this.x = 0;
      this.y = 0;
      this.vy = 0;
      this.vx = 0;
      this.r = 0;
      this.reset();
    };
    Snowflake.prototype.reset = function() {
      this.x = Math.random() * width;
      this.y = Math.random() * -height;
      this.vy = 1 + Math.random() * 3;
      this.vx = 0.5 - Math.random();
      this.r = 1 + Math.random() * 2;
      this.o = 0.5 + Math.random() * 0.5;
    };
    canvas.style.position = &#39;absolute&#39;;
    canvas.style.left = canvas.style.top = &#39;0&#39;;
    var snowflakes = [], snowflake;
    for (i = 0; i &lt; COUNT; i++) {
      snowflake = new Snowflake();
      snowflakes.push(snowflake);
    }
    function update() {
      ctx.clearRect(0, 0, width, height);
      if (!active)
        return;
      for (i = 0; i &lt; COUNT; i++) {
        snowflake = snowflakes[i];
        snowflake.y += snowflake.vy;
        snowflake.x += snowflake.vx;
        ctx.globalAlpha = snowflake.o;
        ctx.beginPath();
        ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();
        if (snowflake.y &gt; height) {
          snowflake.reset();
        }
      }
      requestAnimFrame(update);
    }
    // shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
      return window.requestAnimationFrame    ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame  ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
    })();
    onResize();
    window.addEventListener(&#39;resize&#39;, onResize, false);
    masthead.appendChild(canvas);
  })();
&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;

Copy after login

Related recommendations:

p5.js to achieve the fireworks blooming effect

js implements sliding puzzle verification effect (with code)

The above is the detailed content of Snowflake falling animation effect implemented by native JS. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn