» »

Анимация фона пузырьков на JavaScript

Анимация фона пузырьков на JavaScript
Здесь предоставлен материал по анимированному фону, что состоит из частицы, где красиво смотрится при установках на страницу сайта с помощью JS. Сам он выполнен в темных тонах, а вот частицы, что по умолчанию или при открытии страницы будут анимационные, что просто дополняют темный фон, чтоб ярко смотрелось.

Вероятно на главной страницы его можно не увидеть, на вновь созданной станет отличным вариантом. Ведь при создании можно разместить различные функций, но если смотреть описание, то здесь безусловно такой формат не подойдет. Хотя с другой стороны сейчас сайты идут в современном стиле, что фон дополнит дизайн.

А если установить что-то, что связано с анимацией, это как генераторы или функций, который связаны с тематикой сайта, то безусловно смотрится оригинально. Основной элемент HTML5, который используется для создания графики на веб странице, набирают все большую популярность в настоящее время.

Проверено на адаптивность, где все корректно смотрится:

Анимационный фон из пузырьков

HTML

Код
<canvas id="animirovan-casikitsun"></canvas>

CSS

Код
#animirovan-casikitsun {
  background: #15203a;
  vertical-align:bottom;
}

JS

Код
const canvas = document.getElementById("animirovan-casikitsun"),
  context = canvas.getContext("2d"),
  width = canvas.width = window.innerWidth,
  height = canvas.height = window.innerHeight,
  densityX = 60,
  densityY = 50,
  devideX = Math.floor(width / densityX),
  devideY = Math.floor(height / densityY),
  largeSize = [12, 9, 8],
  middleSize = [7, 6.5],
  smallSize = [6, 4],
  colorPallet_1 = ["#c19d2d", "#a90f59", "#f1c14c", "#1cbbd2"],
  colorPallet_2 = ["#9e7510", "#30525aB", "#266e7d"],
  colorPallet_3 = ["#443106", "#103f4a"],
  originSpeed = .1,
  speed2 = 1.4;
   
var largeParticles = [],
  middleParticles = [],
  smallParticles = [],
  collision = false;

class Particle{
  constructor(x, y, size, color){
  this.x = x;
  this.y = y;
  this.r = size;
  this.angle = Math.random() * Math.PI * 2;
  this.vx = originSpeed * Math.cos(this.angle);
  this.vy = originSpeed * Math.sin(this.angle);
  this.color = color;
  }
   
  update(){
  if(this.x - this.r < 0 || this.x + this.r > width){
  this.vx *= -1;
  } else if (this.y - this.r < 0 || this.y + this.r > height){
  this.vy *= -1;
  }
   
  if(!collision){

  var cv = {s:this.currentSpeed(), a:this.currentAngle()};

  if(originSpeed < cv.s){
  this.vx -= Math.cos(cv.a) * (cv.s - originSpeed) * .1;
  this.vy -= Math.sin(cv.a) * (cv.s - originSpeed) * .1;
  }
  }
   
  this.x += this.vx;
  this.y += this.vy;
  }
   
  currentSpeed(){
  return Math.sqrt(this.vx * this.vx + this.vy * this.vy);
  }
   
  currentAngle(){
  return Math.atan2(this.vy, this.vx);
  }
}

for(var h = 0; h < devideY; h += 1){
  for(var w = 0; w < devideX; w += 1){

  var x = densityX * w + 40 + (densityX - 80) * Math.random(),
  y = densityY * h + 40 + (densityY - 80) * Math.random(),
  randomNum = Math.floor(Math.random() * 3.5);
  if(randomNum === 0 || randomNum === 2){
  largeParticles.push(
  new Particle(x, y, largeSize[Math.floor(Math.random() * largeSize.length)],  
  colorPallet_1[Math.floor(Math.random() * colorPallet_1.length)])
  );
  }
  if(randomNum === 0 || randomNum === 1){
  middleParticles.push(
  new Particle(x, y, middleSize[Math.floor(Math.random() * middleSize.length)],
  colorPallet_2[Math.floor(Math.random() * colorPallet_2.length)])
  );
  }
  if(randomNum === 1 || randomNum === 2){
  smallParticles.push(
  new Particle(x, y, smallSize[Math.floor(Math.random() * smallSize.length)],
  colorPallet_3[Math.floor(Math.random() * colorPallet_3.length)])
  );
  }
  }
}

function checkDistance(array){
  for(var i = 0, len = array.length; i < len - 1; i++){
  for(var j = i + 1; j < len; j++){
  var p0 = array[i],
  p1 = array[j],
  pDistance = (p1.x - p0.x) * (p1.x - p0.x) + (p1.y - p0.y) * (p1.y - p0.y),
  pAngle = Math.atan2(p1.y - p0.y, p1.x - p0.x);
   
  if((pDistance < 7500 && array === largeParticles) ||
  (pDistance < 5000 && array === middleParticles) ||
  (pDistance < 3000 && array === smallParticles)
  ){
  context.globalAlpha = .4;
   
  if(array === largeParticles){
  context.strokeStyle = "#fff";
  } else if(array === middleParticles){
  context.strokeStyle = "#666";
  } else if(array === smallParticles){
  context.strokeStyle = "#333";
  }
   
   
  context.beginPath();
  context.moveTo(p0.x, p0.y);
  context.lineTo(p1.x, p1.y);
  context.stroke();
  }
   
  if(pDistance < (p0.r + p1.r) * (p0.r + p1.r)){
  collision = true;
  p1.vx = Math.cos(pAngle) * speed2;
  p1.vy = Math.sin(pAngle) * speed2;
  p0.vx = -Math.cos(pAngle) * speed2;
  p0.vy = -Math.sin(pAngle) * speed2;
  } else {
  collision = false;
  }
  }
  }
}

function draw(array){
  checkDistance(array);
  for(var i = 0, len = array.length; i < len; i++){
  var p = array[i];
  p.update();
  context.globalAlpha = 1;
  context.fillStyle = p.color;
  context.beginPath();
  context.arc(p.x, p.y, p.r, 0, Math.PI * 2, false);
  context.fill();
  }
}

render();
function render(){
  context.clearRect(0, 0, width, height);
  draw(smallParticles);
  draw(middleParticles);
  draw(largeParticles);
  requestAnimationFrame(render);
}

Используя только обычные инструменты и совершенно немного магии Javascript, примитивные точки на экране начинают хаотично двигаться, подпрыгивать, которые не станут реагировать на курсор, так как это чистый фон, который выполнен с анимационным эффектом.

PS - если кратко по настройке, то здесь цветовой фон ставится в стилистике CSS, а вот сами предметы, виде частиц, вот их нужно по цветовой гамме прописывать в прикрепленном js файле.

Демонстрация
2019-09-26 Загрузок: 1 Просмотров: 478 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 1
Kosten
Kosten 2019-09-27 14:121
0
Если у вас тематика связано с водой, это рыбки или даже рыбалка, то рекомендую посмотреть этот анимированный фон, что прекрасно сделан по анимации.
avatar