Пример:
Кликом мыши по фону меняются его цвета.
Данное решение можно удалить или заменить, например, на ховер.
HTML:
|
1 2 3 4 |
<div id="bg_container"> <div id="bg_glow"></div> <canvas id="canvas"></canvas> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#bg_container { width: 100%; height: 500px; margin: 20px 0; position: relative; background-color: #000; } #canvas{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #bg_glow{ background: radial-gradient(ellipse at center, rgba(0,0,0,.0) 10%, rgba(0,0,0,.8) 80%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%); width: 100%; height: 100%; } |
JS:
|
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 |
let container = document.getElementById("bg_container"); let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); let bgg = document.getElementById("bg_glow"); w = ctx.canvas.width = container.offsetWidth; h = ctx.canvas.height = container.offsetHeight; window.onresize = function() { w = ctx.canvas.width = container.offsetWidth; h = ctx.canvas.height = container.offsetHeight; maxHeight = h*.9 minHeight = h*.5; dots = []; pushDots(); ctx.globalCompositeOperation = "lighter"; }; // Клик по фону container.onclick = function(){ hue = Math.random()*360; bgg.style.background = "radial-gradient(ellipse at center, hsla("+hue+",50%,50%,.8) 0%,rgba(0,0,0,0) 100%)"; dots = []; pushDots(); } dots=[{}]; md = 100; maxWidth = 15; minWidth = 2; maxHeight = h*.8 minHeight = h*.4; maxSpeed = 25; minSpeed = 5; hue = 230; hueDif = 50; glow = 10; ctx.globalCompositeOperation = "lighter"; function pushDots(num){ for(i=1; i<md; i++){ dots.push({ x:Math.random()*w, y:Math.random()*h/2, h:Math.random()*(maxHeight-minHeight)+minHeight, w:Math.random()*(maxWidth-minWidth)+minWidth, c:Math.random()*((hue+hueDif)-(hue-hueDif))+(hue-hueDif), m:Math.random()*(maxSpeed-minSpeed)+minSpeed }); } }pushDots(); function render(){ ctx.clearRect(0,0,w,h); for(i=1; i<dots.length; i++){ ctx.beginPath(); grd = ctx.createLinearGradient(dots[i].x, dots[i].y, dots[i].x+dots[i].w, dots[i].y+dots[i].h); grd.addColorStop(.0, "hsla("+dots[i].c+",50%,50%,.0)"); grd.addColorStop(.2, "hsla("+dots[i].c+20+",50%,50%,.5)"); grd.addColorStop(.5, "hsla("+dots[i].c+50+",70%,60%,.8)"); grd.addColorStop(.8, "hsla("+dots[i].c+80+",50%,50%,.5)"); grd.addColorStop(1., "hsla("+(dots[i].c+100)+",50%,50%,.0)"); ctx.shadowBlur = glow; ctx.shadowColor = "hsla("+(dots[i].c)+",50%,50%,1)"; ctx.fillStyle=grd; ctx.fillRect(dots[i].x,dots[i].y,dots[i].w,dots[i].h); ctx.closePath(); dots[i].x += dots[i].m/100; if(dots[i].x > w+maxWidth){ dots.splice(i,1); dots.push({ x:-maxWidth, y:Math.random()*h/2, h:Math.random()*(maxHeight-minHeight)+minHeight, w:Math.random()*(maxWidth-minWidth)+minWidth, c:Math.random()*((hue+hueDif)-(hue-hueDif))+(hue-hueDif), m:Math.random()*(maxSpeed-minSpeed)+minSpeed }); } }window.requestAnimationFrame(render); } bgg.style.background = "radial-gradient(ellipse at center, hsla("+hue+",50%,50%,.8) 0%,rgba(0,0,0,0) 100%)"; render(); |
Найдено на codepen.io у пользователя Tibix
Добавить комментарий: