Украшения к новому году

Сергей
Сергей
967
5
Содержание:
  1. Комментарии
Привет, какие есть украшения для сайта к новому году для bootstrap?

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

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

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

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

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

    1. Александр Мальцев
      Александр Мальцев
      26.04.2017, 08:30
      Привет. Добавь в CSS следующее:
      #particles-js {
        z-index: 1001;
      }
      
      1. Александр
        Александр
        26.04.2017, 08:51
        С одной стороны, вроде, да. Это я попробовал в первую очередь. Но решение не «кошерное», потому что, если в при таком раскладе, например вместо
        <h1>ЗАГОЛОВОК</h1>
        сделать
        <a href="#"><h1>ЗАГОЛОВОК</h1></a>
        , ничего не поменяется.(((
        В этом случае придется наоборот жертвовать ссылками в угоду «свистелкам», а хочется и ссылок и «свистелок» )
    2. Сергей
      Сергей
      07.12.2016, 18:47
      отлично получилось, правда немного загружается долго но это мелочи)) спасибо большое))
      1. Александр Мальцев
        Александр Мальцев
        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>
        
        Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.