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

Привет, какие есть украшения для сайта к новому году для bootstrap?


   Вопросы 0    70 0

Комментарии (2)

  1. Александр Мальцев # 0
    Тут можно придумать много вариантов, например, можно сделать какой-нибудь баннер, праздничный логотип, обратный отсчёт до наступления нового года.
    Например, немного «украсить» сайт можно, если добавить снег на страницу:
    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>
    
    1. Сергей # 0
      отлично получилось, правда немного загружается долго но это мелочи)) спасибо большое))

      Вы должны авторизоваться, чтобы оставлять комментарии.