Жуткий ливень на CSS3 + HTML5 Canvas
Классный ливень на 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 |
canvas { width: 100vw; height: 100vh; position: relative; z-index: 200; } @-webkit-keyframes lightning { 0%, 100% { filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2); } 8% { filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2); } 9.5% { filter: opacity(1) grayscale(0%) contrast(1) brightness(1); } 10% { filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2); } 73% { filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2); } 75% { filter: opacity(1) grayscale(0%) contrast(1) brightness(1); } 77% { filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2); } 80% { filter: opacity(1) grayscale(0%) contrast(1) brightness(1); } 90% { filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2); } } @keyframes lightning { 0%, 100% { filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2); } 8% { filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2); } 9.5% { filter: opacity(1) grayscale(0%) contrast(1) brightness(1); } 10% { filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2); } 73% { filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2); } 75% { filter: opacity(1) grayscale(0%) contrast(1) brightness(1); } 77% { filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2); } 80% { filter: opacity(1) grayscale(0%) contrast(1) brightness(1); } 90% { filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2); } } |
2#: Следующий код поместите после открывающего тега :
|
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 |
<script type="text/javascript" src="/js/easeljs.min.js"></script> <div class="container"> <div class="batman"></div> <canvas id="rain"></canvas> </div> <script type="text/javascript"> // https://cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js const rainCanvas = document.getElementById("rain"); const ctxRain = rainCanvas.getContext("2d"); const rainCount = 500; const rainArray = []; let w, h; const init = () => { w = rainCanvas.width = window.innerWidth; h = rainCanvas.height = window.innerHeight; window.addEventListener("resize", onResizeHandler); createjs.Ticker.addEventListener("tick", handleTick); createjs.Ticker.framerate = 60; populateRain(); }; const random = (min, max) => { return min + Math.random() * (max - min + 1); }; const onResizeHandler = ev => { w = rainCanvas.width = window.innerWidth; h = rainCanvas.height = window.innerHeight; }; const populateRain = () => { for (var i = 0; i < rainCount; i++) { // var element = array[i]; rainArray.push({ x: Math.random() * w * 1.2, // can go offscreen y: Math.random() * h, width: random(1, 1), length: Math.random() * 4, opacity: random(0.1, 0.3), speedX: random(-1, -3), speedY: random(7, 15) }); } }; // Gravity at work const moveRaindrops = () => { let i = 0; for (i = 0; i < rainArray.length; i++) { let raindrop = rainArray[i]; raindrop.x += raindrop.speedX; raindrop.y += raindrop.speedY; if (raindrop.y > h) { raindrop.x = Math.random() * w * 1.2; raindrop.y = -20; } } }; const drawRaindrops = () => { let i = 0; for (i = 0; i < rainArray.length; i++) { const raindrop = rainArray[i]; const startpoint = { x: raindrop.x, y: raindrop.y }; const endpoint = { x: raindrop.x + raindrop.speedX * raindrop.length, y: raindrop.y + raindrop.speedY * raindrop.length }; const grad = ctxRain.createLinearGradient( startpoint.x, startpoint.y, endpoint.x, endpoint.y ); grad.addColorStop(0, "rgba(255,255,255,0)"); grad.addColorStop(1, "rgba(255,255,255," + raindrop.opacity + ")"); ctxRain.beginPath(); ctxRain.moveTo(startpoint.x, startpoint.y); ctxRain.lineTo(endpoint.x, endpoint.y); ctxRain.strokeStyle = grad; ctxRain.lineWidth = raindrop.width; ctxRain.lineCap = "round"; ctxRain.stroke(); } }; // Control the Canvas const updateRain = () => { ctxRain.clearRect(0, 0, w, h); // clear canvas moveRaindrops(); drawRaindrops(); }; // The Ticker Function const handleTick = ev => { if (!ev.paused) { updateRain(); } }; init(); </script> |
Осталось лишь залить JS файл из прикреплённого архива в папку js
