HTML
CSS
JavaScript
Bootstrap

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

Сергей 315

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); // интервал в мс
}