Осенний дождик, реагирующий на курсор с эффектом брызг на CSS3 + HTML5 Canvas
Классный дождик с эффектом брызг, который реагирует на курсор мышки
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего 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 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 |
#drops { --mouse-position: 0rem; width: 100%; height: 100%; padding: 0; margin: 0; background: #040d24; position: relative; overflow: hidden; } @keyframes fade { from { opacity: 1; } to { opacity: 0; } } .drop { width: 0.1rem; height: 2rem; left: var(--left); background: darkgray; opacity: var(--opacity); animation: drop linear var(--time) forwards; position: absolute; transform: rotate(var(--rotation)); } @keyframes drop { from { top: 0; left: var(--left); } to { top: 100%; left: calc(var(--left) - var(--mouse-position)); } } .splash { position: absolute; bottom: 0; } .splash:before { content: ""; position: absolute; left: var(--left); width: 0.25rem; height: 0.25rem; border-radius: 50%; background: white; bottom: 0; opacity: var(--opacity); animation: splash var(--drop-time) cubic-bezier(0.33, 1, 0.68, 1); } @keyframes splash { 0% { bottom: 0; left: var(--left); } 100% { bottom: var(--drop-height); left: calc(var(--left) - calc(var(--mouse-position) / 4)); opacity: 0; } } |
2#: После открывающего тега <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 |
<div id="drops"></div> <script type="text/javascript"> console.clear(); const drops = 25; const dropsContainer = document.querySelector("#drops"); dropsContainer.onmousemove = (e) => { mousePositionX = Math.floor( map(e.clientX, 0, dropsContainer.offsetWidth, 10, -10) ); if ( dropsContainer.style.getPropertyValue("--mouse-value") !== mousePositionX ) { dropsContainer.style.setProperty("--mouse-value", mousePositionX); dropsContainer.style.setProperty( "--mouse-position", `${mousePositionX}rem` ); dropsContainer.style.setProperty("--rotation", `${mousePositionX}deg`); } }; const createDrop = () => { const drop = document.createElement("div"); drop.classList.add("drop"); const rand = getRandomInt(3, 5); const randPosition = getRandomInt(-150, dropsContainer.offsetWidth + 150); const dropTime = getRandomInt(2, 4); const dropHeight = getRandomInt(3, 7); drop.style.setProperty("--left", `{randPosition}px`); drop.style.setProperty("--time", `.${rand}s`); drop.style.setProperty("--opacity", `.${rand}`); drop.style.setProperty("--drop-time", `.${dropTime}s`); drop.style.setProperty("--drop-height", `${dropHeight}rem`); drop.onanimationend = (animation) => { if (animation.animationName === "drop") { drop.classList.add("splash"); drop.classList.remove("drop"); createDrop(); } else { drop.remove(); } }; dropsContainer.append(drop); }; Array(drops) .fill(1) .forEach(() => { createDrop(); }); function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } function map(value, istart, istop, ostart, ostop) { return ostart + (ostop - ostart) * ((value - istart) / (istop - istart)); } </script> |
