There is such a demo here https://wp-lessons.com/demo/css/padayushhiy-sneg-dlya-sayta-na-html5-canvas.html

Everything would be fine, but because of the overlapping canvas on the site, all links were not clickable. Any idea how to fix this? You can of course write pointer-events: none; but then the snow drop effect disappears

$(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>

  • sign under mousemove not canvas, but document True, if you do not have an effect on the whole document, then you will have to adjust the position for the difference between canvas and document. - user220409
  • center - outdated tag (but not the essence), write this tag or all links position: relative; z-index: 888; position: relative; z-index: 888; like for example - HamSter
  • You can #xmas - set z-index: -1; - HamSter

1 answer 1

Add links position: relative; without it, z-index does not work

 $(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>