Отправить заявку

JavaScript. Анимированные частицы в форме сердца.

С каждый днем на сайте можно сделать все больше и больше полезных эффектов не подключая плагинов или громоздких библиотек. Уже сегодня только при помощи CSS можно достаточно плавно анимировать персонажей, фото, svg и многое другое.

Для того, что бы сделать анимацию в виде сердца на сайте достаточно взять простой скрипт на JS, который использует Canvas для рисования графики.

Итак, напишем в ХТМЛ часть:

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

После определим небольшой CSS стиль:

#c {
  display: block;
  margin: 50px auto;
  margin: calc(50vh - 250px) auto;
}

И внедрим JS скрипт:

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = 500;
var ch = c.height = 500;
var cx = cw / 2,  cy = ch / 2;
var rad = Math.PI / 180;
var howMany = 500;
var p = [];
var colors = ["242,41,41", "222,80,80", "247,111,111", "255,145,145", "252,199,199"];
ctx.strokeStyle = "white";
ctx.globalAlpha = .7;

function particles() 
{
  this.r = randomIntFromInterval(2, 12);
  var innerR = Math.round(Math.random() * 130) + 1;
  var innerA = Math.round(Math.random() * 360) + 1;
  this.x = cx + innerR * Math.cos(innerA * rad);
  this.y = cy + 20 + innerR * Math.sin(innerA * rad);
  this.ix = (Math.random()) * (Math.random() < 0.5 ? -1 : 1);
  this.iy = (Math.random()) * (Math.random() < 0.5 ? -1 : 1);
  this.alpha = Math.random();
  this.c = "rgba(" + colors[Math.round(Math.random() * colors.length) + 1] + "," + this.alpha + ")";
}

for (var i = 0; i < howMany; i++) 
{
  p[i] = new particles();
}

function Draw() 
{
  ctx.fillStyle = "rgba(255,255,255,.1)";
  ctx.fillRect(0, 0, cw, ch);
  for (var i = 0; i < p.length; i++) 
{
    ctx.fillStyle = p[i].c;
    // Текущий путь для  isPointInPath 
    thePath(p[i].r);

    if (ctx.isPointInPath(p[i].x, p[i].y)) 
{
      p[i].x += p[i].ix;
      p[i].y += p[i].iy;
      ctx.beginPath();
      ctx.arc(p[i].x, p[i].y, p[i].r, 0, 2 * Math.PI);
      ctx.fill();

    } else {
      p[i].ix = -1 * p[i].ix;
      p[i].iy = -1 * p[i].iy;
      p[i].x += p[i].ix;
      p[i].y += p[i].iy;
    }
  }
  window.requestAnimationFrame(Draw);
}
window.requestAnimationFrame(Draw);

function thePath(r) 
{
  //Рисуем наше сердечко
  ctx.beginPath();
  ctx.moveTo(250, 200);
  ctx.arc(350, 200, 100 - r, Math.PI, Math.PI * 0.23);
  ctx.lineTo(250, 450);
  ctx.arc(150, 200, 100 - r, Math.PI * 0.77, 0);
}

function randomIntFromInterval(mn, mx) 
{
  return ~~(Math.random() * (mx - mn + 1) + mn);
}

Изменить форму сердца на любую другую совсем не сложно. Необходимо просто переписать координаты на числа вашей формы. Этот эффект можно использовать практически на любом сайте для привлечения внимания к какой-либо его части. Это может быть большой портал или сайт-визитка. Если вам нужен сайт визитка недорого - обращайтесь. Также этот пример можно использовать в качестве баннера на сайте или анимации в публикации.

Другие публикации