Очень интересный эффект, создающий иллюзию быстрого погружения под воду, сопровождаемое обилием всплывающих пузырьков
Для начала посмотрите
ДЕМО
Моё тестирование в редакторе:
КЛИК
Установка:
1#: В самый низ вашего CSS вставьте:
|
|
#bgCanvas { width: 100%; height: 100%; z-index: -1; top: 0; left: 0; position: absolute; } |
2#: HTML + Javascript коды:
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 |
<canvas id='bgCanvas'></canvas> <script> var canvas = document.getElementById('bgCanvas'); var ctx = canvas.getContext('2d'); var particles = []; var particleCount = 100; for (var i = 0; i < particleCount; i++) particles.push(new particle()); function particle() { this.x = Math.random() * canvas.width; this.y = canvas.height + Math.random() * 300; this.speed = 2 + Math.random() * 5; this.radius = Math.random() * 3; this.opacity = (Math.random() * 100) / 1000; } function loop() { requestAnimationFrame(loop); draw(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = 'lighter'; for (var i = 0; i < particles.length; i++) { var p = particles[i]; ctx.beginPath(); ctx.fillStyle = 'rgba(255,255,255,' + p.opacity + ')'; ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, false); ctx.fill(); p.y -= p.speed; if (p.y <= -10) particles[i] = new particle(); } } loop(); </script> |
P.S. Поиграйтесь с числовыми значениями, чтобы достигнуть нужного вам эффекта
Автор публикации
12
Я не понял вашего вопроса, но постараюсь на него ответить...
