정보실

웹학교

정보실

css 2D Canvas 멋진 애니메이션

본문

https://codepen.io/alexsafayan/pen/VYmXLM


HTML

<canvas id="c"></canvas>


<!-- HOVER PLAS -->


CSS

body, html, canvas {

  margin: 0px; 

  padding: 0px; 

  position: absolute; 

  background-color: #323232; 

  cursor: none; 

}


JS

var partNum = 750;

//particle number - change it!


window.requestAnimFrame = (function(){

    return window.requestAnimationFrame ||

        window.webkitRequestAnimationFrame ||

        window.mozRequestAnimationFrame ||

        function(callback){

            window.setTimeout(callback, 1000 / 60);

        };

})();


function between(min, max) {

  return Math.random() * (max - min) + min;

}


var istruehover = true;


var c = document.getElementById('c');

var ctx = c.getContext('2d');

//context and id of canvas


var w = window.innerWidth;

var h = window.innerHeight;

//width and height of canvas


c.width = w;

c.height = h;

//setting the width and height for canvas


var mouse = {

  x: w / 2, 

  y: h / 2

};

//mouse position


document.addEventListener('mousemove', function(e){ 

    mouse.x = e.clientX || e.pageX; 

    mouse.y = e.clientY || e.pageY;

  

  istruehover = false;

}, false);


document.addEventListener('mouseover', function(){ 

  istruehover = false;

}, false);

//finding the mouse position


var particles = [];

for(var x = 0; x < c.width / 33; x++) {

  for(var y = 0; y < c.height / 34; y++) {

    particles.push(new particle(x*33, y*33));

  }

}


//the particle function

function particle(x, y) {

  this.x = x + 20;

  this.y = y + 20;

  

  this.xo = x + 20;

  this.yo = y + 20;

  

  this.vx = 0;

  this.vy = 0;

  

  this.r = 15;

  

  var one = 'rgba(10, 255, 255, 0.7)';

  var two = 'rgba(255, 255, 255, 0.7)';

  var three = 'rgba(10, 255, 255, 0.9)';

  var four = 'rgba(255, 255, 255, 0.9)';

  var five = 'rgba(10, 255, 255, 0.5)';

  var six = 'rgba(255, 255, 255, 0.5)';

  var colors = [one, two, three, four, five, six];

  this.color = colors[Math.round(Math.random() * 2)];

  //only random colors of the variables

}


function draw() {

  requestAnimFrame(draw);

  

  ctx.fillStyle = 'rgba(52, 52, 53, 0.75)';

  ctx.fillRect(0, 0, c.width, c.height);

  

  /*

  ctx.beginPath();

  ctx.fillStyle = 'orange';

  ctx.arc(mouse.x, mouse.y, 40, Math.PI * 2, false);

  ctx.fill();

  */

  

  for(t = 0; t < particles.length; t++) {

    var p = particles[t];

    

    ctx.beginPath();

    ctx.fillStyle = p.color;

    ctx.arc(p.x, p.y, p.r, Math.PI * 2, false);

    ctx.fill();

    //the context of the particle(s)

    

   var dist,

dx = mouse.x - p.x,

dy = mouse.y - p.y;

dist = Math.sqrt(dx*dx + dy*dy);

  

if(dist <= 100) {

var ax = dx,

ay = dy;


      p.x -= ax/25;

  p.y -= ay/25;

  }

    

 

  var disto,

dxo = p.x - p.xo,

dyo = p.y - p.yo;

    

    disto = Math.sqrt(dxo*dxo + dyo*dyo);


    p.x -= dxo/50;

    p.y -= dyo/50;

    // making the particles move back into place

    

    if(disto != 0) {

       p.r = (disto / 4) + 15; 

      // simple algebra XD

    }


}

}


draw();




setInterval(mousemove, 1000);



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 81회 ]  작성일18-09-03 17:03
css

웹학교