Canvas, z-index и новогодний снежок

386
07 января 2017, 14:41

Есть вот такое вот демо https://wp-lessons.com/demo/css/padayushhiy-sneg-dlya-sayta-na-html5-canvas.html

Все бы хорошо, но из-за перекрывающего canvas на сайте все ссылки стали не кликабельные. Есть идеи как это исправить? Можно конечно прописать pointer-events: none; но тогда эффект отбрасывания снега пропадает

$(document).ready(function() { 
  initLetItSnow(); 
}); 
var initLetItSnow = function() { 
  (function() { 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { 
      window.setTimeout(callback, 1000 / 60); 
    }; 
    window.requestAnimationFrame = requestAnimationFrame; 
  })(); 
  var flakes = [], 
    canvas = document.getElementById("xmas"), 
    ctx = canvas.getContext("2d"), 
    mX = -100, 
    mY = -100; 
  if ($(window).width() < 999) { 
    var flakeCount = 125; 
  } else { 
    var flakeCount = 450; 
  } 
  canvas.width = window.innerWidth; 
  canvas.height = window.innerHeight; 
 
  function snow() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    for (var i = 0; i < flakeCount; i++) { 
      var flake = flakes[i], 
        x = mX, 
        y = mY, 
        minDist = 250, 
        x2 = flake.x, 
        y2 = flake.y; 
      var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)), 
        dx = x2 - x, 
        dy = y2 - y; 
      if (dist < minDist) { 
        var force = minDist / (dist * dist), 
          xcomp = (x - x2) / dist, 
          ycomp = (y - y2) / dist, 
          deltaV = force; 
        flake.velX -= deltaV * xcomp; 
        flake.velY -= deltaV * ycomp; 
      } else { 
        flake.velX *= .98; 
        if (flake.velY <= flake.speed) { 
          flake.velY = flake.speed 
        } 
        flake.velX += Math.cos(flake.step += .05) * flake.stepSize; 
      } 
      ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")"; 
      flake.y += flake.velY; 
      flake.x += flake.velX; 
      if (flake.y >= canvas.height || flake.y <= 0) { 
        reset(flake); 
      } 
      if (flake.x >= canvas.width || flake.x <= 0) { 
        reset(flake); 
      } 
      ctx.beginPath(); 
      ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2); 
      ctx.fill(); 
    } 
    requestAnimationFrame(snow); 
  }; 
 
  function reset(flake) { 
    flake.x = Math.floor(Math.random() * canvas.width); 
    flake.y = 0; 
    flake.size = (Math.random() * 3) + 2; 
    flake.speed = (Math.random() * 1) + 0.5; 
    flake.velY = flake.speed; 
    flake.velX = 0; 
    flake.opacity = (Math.random() * 0.5) + 0.3; 
  } 
 
  function init() { 
    for (var i = 0; i < flakeCount; i++) { 
      var x = Math.floor(Math.random() * canvas.width), 
        y = Math.floor(Math.random() * canvas.height), 
        size = (Math.random() * 3) + 4, 
        speed = (Math.random() * 1) + 0.5, 
        opacity = (Math.random() * 0.5) + 0.3; 
      flakes.push({ 
        speed: speed, 
        velY: speed, 
        velX: 0, 
        x: x, 
        y: y, 
        size: size, 
        stepSize: (Math.random()) / 160, 
        step: 0, 
        opacity: opacity 
      }); 
    } 
    snow(); 
  }; 
  canvas.addEventListener("mousemove", function(e) { 
    mX = e.clientX, mY = e.clientY 
  }); 
  window.addEventListener("resize", function() { 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
  }) 
  init(); 
};
#xmas { 
  position: fixed; 
  width: 100%; 
  height: 100%; 
  z-index: 2; 
      background: rgba(0, 0, 0, 0.39); 
} 
a{ 
  z-index: 9999; 
      font-size:30px; 
        margin-top:25% 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<canvas id="xmas"></canvas> 
 
<center><a href="http://ru.stackoverflow.com/">LINK</a> 
</center>

Answer 1

Добавьте ссылкам position: relative; без него z-index не срабатывает

$(document).ready(function() { 
  initLetItSnow(); 
}); 
var initLetItSnow = function() { 
  (function() { 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { 
      window.setTimeout(callback, 1000 / 60); 
    }; 
    window.requestAnimationFrame = requestAnimationFrame; 
  })(); 
  var flakes = [], 
    canvas = document.getElementById("xmas"), 
    ctx = canvas.getContext("2d"), 
    mX = -100, 
    mY = -100; 
  if ($(window).width() < 999) { 
    var flakeCount = 125; 
  } else { 
    var flakeCount = 450; 
  } 
  canvas.width = window.innerWidth; 
  canvas.height = window.innerHeight; 
 
  function snow() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    for (var i = 0; i < flakeCount; i++) { 
      var flake = flakes[i], 
        x = mX, 
        y = mY, 
        minDist = 250, 
        x2 = flake.x, 
        y2 = flake.y; 
      var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)), 
        dx = x2 - x, 
        dy = y2 - y; 
      if (dist < minDist) { 
        var force = minDist / (dist * dist), 
          xcomp = (x - x2) / dist, 
          ycomp = (y - y2) / dist, 
          deltaV = force; 
        flake.velX -= deltaV * xcomp; 
        flake.velY -= deltaV * ycomp; 
      } else { 
        flake.velX *= .98; 
        if (flake.velY <= flake.speed) { 
          flake.velY = flake.speed 
        } 
        flake.velX += Math.cos(flake.step += .05) * flake.stepSize; 
      } 
      ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")"; 
      flake.y += flake.velY; 
      flake.x += flake.velX; 
      if (flake.y >= canvas.height || flake.y <= 0) { 
        reset(flake); 
      } 
      if (flake.x >= canvas.width || flake.x <= 0) { 
        reset(flake); 
      } 
      ctx.beginPath(); 
      ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2); 
      ctx.fill(); 
    } 
    requestAnimationFrame(snow); 
  }; 
 
  function reset(flake) { 
    flake.x = Math.floor(Math.random() * canvas.width); 
    flake.y = 0; 
    flake.size = (Math.random() * 3) + 2; 
    flake.speed = (Math.random() * 1) + 0.5; 
    flake.velY = flake.speed; 
    flake.velX = 0; 
    flake.opacity = (Math.random() * 0.5) + 0.3; 
  } 
 
  function init() { 
    for (var i = 0; i < flakeCount; i++) { 
      var x = Math.floor(Math.random() * canvas.width), 
        y = Math.floor(Math.random() * canvas.height), 
        size = (Math.random() * 3) + 4, 
        speed = (Math.random() * 1) + 0.5, 
        opacity = (Math.random() * 0.5) + 0.3; 
      flakes.push({ 
        speed: speed, 
        velY: speed, 
        velX: 0, 
        x: x, 
        y: y, 
        size: size, 
        stepSize: (Math.random()) / 160, 
        step: 0, 
        opacity: opacity 
      }); 
    } 
    snow(); 
  }; 
  canvas.addEventListener("mousemove", function(e) { 
    mX = e.clientX, mY = e.clientY 
  }); 
  window.addEventListener("resize", function() { 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
  }) 
  init(); 
};
#xmas { 
  position: fixed; 
  width: 100%; 
  height: 100%; 
  z-index: 2; 
      background: rgba(0, 0, 0, 0.39); 
} 
a{ 
  position: relative; 
  z-index: 9999; 
      font-size:30px; 
        margin-top:25% 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<canvas id="xmas"></canvas> 
 
<center><a href="http://ru.stackoverflow.com/">LINK</a> 
</center>

READ ALSO
Как убрать зазоры между блоками div?

Как убрать зазоры между блоками div?

ПриветствуюХотел сделать блок в виде стрелочки

463
Использование звёздочки в стилях

Использование звёздочки в стилях

Я в исходниках одного сайта нашел *aЧто это значит? Что значит сама звездочка, *?

460
Не корректно работает .toggleClass() jquery

Не корректно работает .toggleClass() jquery

Здравствуйте, есть сайт, фильтр которой открывается и закрывается с помощью функцииtoggleClass(), сам код выглядит следующим образом:

449
Относительный путь

Относительный путь

Здравствуйте! Столкнулся с проблемой не отображения картинкиКартинка задана через

332