HTML
CSS
JavaScript
Bootstrap

Как украсить сайт к Новому году?

Сергей

03.12.2016, 14:22

1.2K

Привет! Мне нужно как-то украсить сайт к Новому году. Может кто что видел интересного? Желательно что-то красивое, но не перегружающее сайт. Можно с использованием стилей Bootstrap.

Комментарии: 5

Александр

26.04.2017, 08:13

Александр, приветствую.
Это место — единственное, которое поиском по сайту находится по слову canvas более менее подходящее к моему запросу.

Есть вот такая разметка, с использованием particles-js в качестве заднего плана.

Условно поверх заднего плана есть 3 блока с классами:
— rRpageTop;
— HeadContent;
— rRnavigation.

particles-js — следит за перемещением курсора в пределах canvas и дорисовывает линии к курсору, выглядит вполне симпатично, однако, как только курсор заходит в границы какого-нибудь из этих трех блоков, слежение за ним прекращается и «красота» не отрисовывается.
Возможно-ли это как-то побороть?

Александр Мальцев

26.04.2017, 08:30

Привет. Добавь в CSS следующее:

#particles-js {
  z-index: 1001;
}

Александр

26.04.2017, 08:51

С одной стороны, вроде, да. Это я попробовал в первую очередь. Но решение не «кошерное», потому что, если в при таком раскладе, например вместо

<h1>ЗАГОЛОВОК</h1>

сделать

<a href="#"><h1>ЗАГОЛОВОК</h1></a>

, ничего не поменяется.(((
В этом случае придется наоборот жертвовать ссылками в угоду «свистелкам», а хочется и ссылок и «свистелок» )

Сергей

07.12.2016, 18:47

отлично получилось, правда немного загружается долго но это мелочи)) спасибо большое))

Александр Мальцев

06.12.2016, 13:46

Тут можно придумать много вариантов, например, можно сделать какой-нибудь баннер, праздничный логотип, обратный отсчёт до наступления нового года.
Например, немного «украсить» сайт можно, если добавить снег на страницу:
CSS

canvas {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

HTML

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

JavaScript

window.onload = function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var W = window.innerWidth;
  var H = window.innerHeight;
  canvas.width = W;
  canvas.height = H;
  var mp = 50; // макисмальное количество частиц
  var particles = [];
  for(var i = 0; i < mp; i++) {
    particles.push({
      x: Math.random()*W,
      y: Math.random()*H,
      r: Math.random()*4+1,
      d: Math.random()*mp
    })
  }
  function draw() {
    ctx.clearRect(0, 0, W, H);
 	ctx.fillStyle = "rgba(14, 157, 193, 0.8)"; // цвет частиц
    ctx.beginPath();
    for(var i = 0; i < mp; i++) {
      var p = particles[i];
      ctx.moveTo(p.x, p.y);
      ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
    }
	ctx.fill();
    update();
  }
  var angle = 0;
  function update() {
    angle += 0.01;
    for(var i = 0; i < mp; i++) {
      var p = particles[i];
      p.y += Math.cos(angle+p.d) + 1 + p.r/2;
      p.x += Math.sin(angle) * 2;
      if (p.x > W+5 || p.x < -5 || p.y > H) {
        if(i%3 > 0) {
          particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
        } else {
          if (Math.sin(angle) > 0) {
            particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
          } else {
            particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
          }
        }
      }
    }
  }
  setInterval(draw, 25); // интервал в мс
}
</script>