Дождик, который обтекает нужные блоки на CSS3 и HTML5 Canvas
Классный дождик, который реалистично огибает нужные блоки и кнопочки
Для начала посмотрите ДЕМО
Установка:
1#: Сразу после открывающего тега <body> вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<canvas id="rain"></canvas> <div id="container"> <h1>Raindrop</h1> <div id="options"> <button class="raindrop">About us</button> <button class="raindrop">Learn More</button> <button class="raindrop">Contact</button> </div> </div> <script type="text/javascript"> var c = document.getElementById("rain"); c.width = window.innerWidth; c.height = window.innerHeight; var ctx = c.getContext("2d"); let rainDrops = []; let elements = document.getElementsByClassName("raindrop"); let length = 30; let speed = 7; let angle = 90 * Math.PI / 180; let angleSin = Math.sin(angle); let angleCos = Math.cos(angle); let spawnInterval = setInterval(newDrop, 50); window.addEventListener("resize", onResize); document.addEventListener("visibilitychange", function() { if (document.hidden) { clearInterval(spawnInterval); } else { spawnInterval = setInterval(newDrop, 50); } }); function RainDrop(x, y, angle) { this.x = x; this.y = y; rainDrops.push(this); } function newDrop() { for (let x = 0; x < 50; x++) { new RainDrop(Math.random() * c.width, -40 - 100 * Math.random(), angle); } } update(); function update() { for (let x = 0; x < rainDrops.length; x++) { let drop = rainDrops[x]; drop.x += speed * angleCos; drop.y += speed * angleSin; drop.endX = drop.x + length * angleCos; drop.endY = drop.y + length * angleSin; if (drop.y > c.height) { rainDrops.splice(x, 1); x--; } } //checkCollisions(); draw(); } function draw() { ctx.clearRect(0, 0, c.width, c.height); ctx.lineWidth = 1; ctx.lineCap = "round"; ctx.strokeStyle = "#0984e3"; let gradient = ctx.createLinearGradient(0, 0, 0, c.height); gradient.addColorStop(0, "#00a8ff"); gradient.addColorStop(0.6, "#00a8ff"); gradient.addColorStop(1, "white"); ctx.strokeStyle = gradient; ctx.beginPath(); for (let i = 0; i < rainDrops.length; i++) { ctx.moveTo(Math.floor(rainDrops[i].x), Math.floor(rainDrops[i].y)); ctx.lineTo(Math.floor(rainDrops[i].endX), Math.floor(rainDrops[i].endY)); } ctx.stroke(); clearRegions(); window.requestAnimationFrame(update); } function onResize() { c.width = window.innerWidth; c.height = window.innerHeight; } function clearRegions() { ctx.globalCompositeOperation = "destination-out"; for (let i = 0; i < elements.length; i++) { let boundingBox = elements[i].getBoundingClientRect(); let yDistanceBottom = c.height - boundingBox.bottom; let yDistanceTop = c.height - boundingBox.top; let bottomLeftX = boundingBox.left + yDistanceBottom * Math.tan(Math.PI / 2 - angle); let bottomRightX = boundingBox.right + yDistanceBottom * Math.tan(Math.PI / 2 - angle); let bottomLeftX2 = boundingBox.left + yDistanceTop * Math.tan(Math.PI / 2 - angle); let bottomRightX2 = boundingBox.right + yDistanceTop * Math.tan(Math.PI / 2 - angle); //From bottom of element to edge of page ctx.beginPath(); ctx.moveTo(boundingBox.left, boundingBox.bottom); ctx.lineTo(bottomLeftX, c.height); ctx.lineTo(bottomRightX, c.height); ctx.lineTo(boundingBox.right, boundingBox.bottom); ctx.closePath(); ctx.fill(); //From top of element to edge of page ctx.beginPath(); ctx.moveTo(boundingBox.left, boundingBox.top); ctx.lineTo(bottomLeftX2, c.height); ctx.lineTo(bottomRightX2, c.height); ctx.lineTo(boundingBox.right, boundingBox.top); ctx.closePath(); ctx.fill(); } ctx.globalCompositeOperation = "source-over"; } </script> |
2#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
#rain{ position: absolute; left: 0px; top: 0px; user-select: none; } h1{ text-align: center; margin-top: 130px; font-size: 42px; position: relative; color: white; } #options{ text-align: center; margin-top: 50px; position: relative; z-index: 2; } #options button{ padding: 20px; font-size: 22px; margin-left: 20px; margin-right: 20px; border-radius: 5px; cursor: pointer; background: white; border: 1px solid #95a5a6; } @media only screen and (max-width: 600px) { .raindrop:nth-child(3) { display: none; } } |
