» »

Анимированный фон для сайта или страниц

Анимированный фон для сайта или страниц

Прекрасные эффекты в исполнение анимированного фона, который используется с помощью jQuery для красивой и оригинальной анимации на страницах. В материале представлено 2 варианта анимационного фона, который украсит и оживит сайт при заходе на его. Сама анимация смотрится просто великолепно, которая связана на прямую с фигурами, что идут в движение, где веб разработчик сам задает скорость

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

Первый вариант:

Анимация background-position

HTML

Код
<canvas id="vkedsam-gedumilag"></canvas>

CSS

Код
#vkedsam-gedumilag {  
background:#3d67b5;
width:100%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#vkedsam-gedumilag:hover {  
background:#2c578c;
}

JS

Код
(function() {

  var width, height, canvas, ctx, circles, target, animateHeader = true;

  initHeader();
  addListeners();

  function initHeader() {
  width = window.innerWidth;
  height = window.innerHeight;
  target = {x: 0, y: height};

  canvas = document.getElementById('vkedsam-gedumilag');
  canvas.width = width;
  canvas.height = height;
  ctx = canvas.getContext('2d');

  circles = [];
  for(var x = 0; x < width*0.9; x++) {
  var c = new Circle();
  circles.push(c);
  }
  animate();
  }

  function addListeners() {
  window.addEventListener('scroll', scrollCheck);
  window.addEventListener('resize', resize);
  }

  function scrollCheck() {
  if(document.body.scrollTop > height) animateHeader = false;
  else animateHeader = true;
  }

  function resize() {
  width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
  }

  function animate() {
  if(animateHeader) {
  ctx.clearRect(0,0,width,height);
  for(var i in circles) {
  circles[i].draw();
  }
  }
  requestAnimationFrame(animate);
  }

  function Circle() {
  var _this = this;

  (function() {
  _this.pos = {};
  init();
  console.log(_this);
  })();

  function init() {
  _this.pos.x = Math.random()*width;
  _this.pos.y = height+Math.random()*100;
  _this.alpha = 0.1+Math.random()*0.9;
  _this.scale = 0.1+Math.random()*0.9;
  _this.velocity = Math.random();
  }

  this.draw = function() {
  if(_this.alpha <= 0) {
  init();
  }
  _this.pos.y -= _this.velocity;
  _this.alpha -= 0.0005;
  ctx.beginPath();
  ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'rgba(157,188,225,'+ _this.alpha+')';
  ctx.fill();
  };
  }

})();

Режим скорости и палитру цвета, все задаем в прикрепленных стилях.

Демонстрация

Второй вариант:

Анимированный фон для сайта jquery

В этом варианте нужно подключить библиотеку.

Код
<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>

HTML

Код
<canvas id="kepogsevcam"></canvas>

CSS

Код
#kepogsevcam {  
background:#5089d0;
width:100%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#kepogsevcam:hover {  
background:#3e70ad;
}

JS

Код
$(function () {
  var lines = document.getElementById('kepogsevcam');
  lines.width = window.innerWidth;
  lines.height = window.innerHeight;
  });

$(function () { var e, t, n, r, i = [], s, o, u = 10; n = $("#kepogsevcam")[0]; r = n.getContext("2d"); s = window.innerWidth; o = window.innerHeight; r.strokeStyle = "#a3c3e8"; r.lineWidth = .1; for (e = 0; e < 4 * u; e += 1) { i.push({ x: Math.random() * s, y: Math.random() * o, vx: Math.random() * 4 - 2, vy: Math.random() * 4 - 2 }) } var a = 0; setInterval(function () { if (a <= 3e4) { for (t = 0; t < u; t += 1) { r.beginPath(); r.moveTo(i[t * 4].x, i[t * 4].y); r.bezierCurveTo(i[t * 4 + 1].x, i[t * 4 + 1].y, i[t * 4 + 2].x, i[t * 4 + 2].y, i[t * 4 + 3].x, i[t * 4 + 3].y); r.stroke() } for (e = 0; e < i.length; e += 1) { i[e].y += i[e].vx; i[e].x += i[e].vy; a++ } } else { clearInterval(setInterval) } }, 1e3 / 24) })

Стильно выполнены эффекты для фона с использованием Canvas.

Демонстрация
2019-01-22 Просмотров: 368 Комментарий: (0)

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

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

Комментарий: 0
avatar