ホームページ > 記事 > ウェブフロントエンド > CSSとJSで美しい星空の軌跡移動エフェクトを実現

CSSとJSで美しい星空の軌跡移動エフェクトを実現

小云云オリジナル: 2018-01-31 11:16:492818ブラウズ

この記事では、CSS + JS を使用して実現された美しい星空の軌跡のモーションエフェクトを主に紹介します。以下のエディターでサンプルコードを紹介します。必要な方は参考にしてください。。

まずはレンダリングを共有しましょう:

CSS+JS を使用して実現された美しい星空の軌跡のモーション効果を共有しましょう。この効果は Flash に劣りません。関連するコードは次のとおりです:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cloth</title>
  <style>
   body {
  background: #000; 
}
img {
  display: block;
 float: left; 
  margin: 0 1px 0 0;
}
canvas {
  background: #131c35 linear-gradient(#192853, #131c35);
 display: block;
  float: left;
  /* uncomment to test overlay */
  /*
  position: absolute;
  left: 0;
  opacity: .5;
  top: 0;
  */  
}
  </style>
</head>
<body>
  <p id="container"></p>
  <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
  <canvas id="c"></canvas>
  <img src="http://dribbble.s3.amazonaws.com/users/36991/screenshots/674715/game.png" />
  <script>
    var c = document.getElementById(&#39;c&#39;),
    ctx = c.getContext(&#39;2d&#39;),
    cw = c.width = 400,
  ch = c.height = 300,
    rand = function(a,b){return ~~((Math.random()*(b-a+1))+a);},
    dToR = function(degrees){
        return degrees * (Math.PI / 180);
    },
    circle = {
      x: (cw / 2) + 5,
      y: (ch / 2) + 22,
      radius: 90,
      speed: 2,
      rotation: 0,
      angleStart: 270,
      angleEnd: 90,
      hue: 220,
      thickness: 18,
      blur: 25
    },
    particles = [],
    particleMax = 100,
    updateCircle = function(){
      if(circle.rotation < 360){
       circle.rotation += circle.speed;
      } else {
       circle.rotation = 0; 
      }
    },
    renderCircle = function(){
      ctx.save();
      ctx.translate(circle.x, circle.y);
      ctx.rotate(dToR(circle.rotation));
      ctx.beginPath();
      ctx.arc(0, 0, circle.radius, dToR(circle.angleStart), dToR(circle.angleEnd), true);
      ctx.lineWidth = circle.thickness;    
      ctx.strokeStyle = gradient1;
      ctx.stroke();
      ctx.restore();
    },
    renderCircleBorder = function(){
      ctx.save();
      ctx.translate(circle.x, circle.y);
      ctx.rotate(dToR(circle.rotation));
      ctx.beginPath();
      ctx.arc(0, 0, circle.radius + (circle.thickness/2), dToR(circle.angleStart), dToR(circle.angleEnd), true);
      ctx.lineWidth = 2;  
      ctx.strokeStyle = gradient2;
      ctx.stroke();
      ctx.restore();
    },
  renderCircleFlare = function(){
      ctx.save();
      ctx.translate(circle.x, circle.y);
      ctx.rotate(dToR(circle.rotation+185));
      ctx.scale(1,1);
      ctx.beginPath();
      ctx.arc(0, circle.radius, 30, 0, Math.PI *2, false);
      ctx.closePath();
      var gradient3 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 30);      
      gradient3.addColorStop(0, &#39;hsla(330, 50%, 50%, .35)&#39;);
      gradient3.addColorStop(1, &#39;hsla(330, 50%, 50%, 0)&#39;);
      ctx.fillStyle = gradient3;
      ctx.fill();     
      ctx.restore();
    },
    renderCircleFlare2 = function(){
      ctx.save();
      ctx.translate(circle.x, circle.y);
      ctx.rotate(dToR(circle.rotation+165));
      ctx.scale(1.5,1);
      ctx.beginPath();
      ctx.arc(0, circle.radius, 25, 0, Math.PI *2, false);
      ctx.closePath();
      var gradient4 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 25);
      gradient4.addColorStop(0, &#39;hsla(30, 100%, 50%, .2)&#39;);
      gradient4.addColorStop(1, &#39;hsla(30, 100%, 50%, 0)&#39;);
      ctx.fillStyle = gradient4;
      ctx.fill();     
      ctx.restore();
    },
     createParticles = function(){
      if(particles.length < particleMax){
        particles.push({
          x: (circle.x + circle.radius * Math.cos(dToR(circle.rotation-85))) + (rand(0, circle.thickness*2) - circle.thickness),
          y: (circle.y + circle.radius * Math.sin(dToR(circle.rotation-85))) + (rand(0, circle.thickness*2) - circle.thickness),
          vx: (rand(0, 100)-50)/1000,
          vy: (rand(0, 100)-50)/1000,
          radius: rand(1, 6)/2,
          alpha: rand(10, 20)/100
        });
      }
    },
    updateParticles = function(){
      var i = particles.length;
      while(i--){
       var p = particles[i];
        p.vx += (rand(0, 100)-50)/750;
        p.vy += (rand(0, 100)-50)/750;
        p.x += p.vx;
        p.y += p.vy;
        p.alpha -= .01;
        if(p.alpha < .02){
          particles.splice(i, 1)
        }
      }
    },
    renderParticles = function(){
      var i = particles.length;
      while(i--){
       var p = particles[i];
        ctx.beginPath();
        ctx.fillRect(p.x, p.y, p.radius, p.radius);
        ctx.closePath();
        ctx.fillStyle = &#39;hsla(0, 0%, 100%, &#39;+p.alpha+&#39;)&#39;;
      }
    },
    clear = function(){
      ctx.globalCompositeOperation = &#39;destination-out&#39;;
      ctx.fillStyle = &#39;rgba(0, 0, 0, .1)&#39;;
      ctx.fillRect(0, 0, cw, ch);
      ctx.globalCompositeOperation = &#39;lighter&#39;;  
    }
    loop = function(){
      clear();
      updateCircle();
      renderCircle();
      renderCircleBorder();
      renderCircleFlare();
      renderCircleFlare2();
      createParticles();
      updateParticles();
      renderParticles();
    }
/* Append Canvas */
//document.body.appendChild(c);
/* Set Constant Properties */
ctx.shadowBlur = circle.blur;
ctx.shadowColor = &#39;hsla(&#39;+circle.hue+&#39;, 80%, 60%, 1)&#39;;
ctx.lineCap = &#39;round&#39;
var gradient1 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
gradient1.addColorStop(0, &#39;hsla(&#39;+circle.hue+&#39;, 60%, 50%, .25)&#39;);
gradient1.addColorStop(1, &#39;hsla(&#39;+circle.hue+&#39;, 60%, 50%, 0)&#39;);
var gradient2 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
gradient2.addColorStop(0, &#39;hsla(&#39;+circle.hue+&#39;, 100%, 50%, 0)&#39;);
gradient2.addColorStop(.1, &#39;hsla(&#39;+circle.hue+&#39;, 100%, 100%, .7)&#39;);
gradient2.addColorStop(1, &#39;hsla(&#39;+circle.hue+&#39;, 100%, 50%, 0)&#39;);
/* Loop It, Loop It Good */
setInterval(loop, 16);
  </script>
</body>
</html>
 -

CSSとJSで美しい星空の軌跡移動エフェクトを実現

関連記事