Пример можно видеть на этой странице
Для того, чтобы клякса не перекрывала контекст, ей задается позиционированние по z-оси z-index: -1
. Поэтому в зависимости от верстки страницы, некоторые элементы могут ее перекрывать.
HTML:
1 2 3 4 5 6 7 8 9 |
<canvas id="canvas"></canvas> <svg id="blot" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="joint" /> </filter> </defs> </svg> |
Если убрать SVG-фильтр, получится не менее интересный эффект.
Убрать фильтр
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#canvas { filter: url("#goo"); height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: -1; } #blot { height: 0; width: 0; } |
JS:
Цвета кляксы задаются в массиве colorArray
, а ее размеры для разных экранов, в переменной maxRadius
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 |
window.addEventListener("load", function () { const canvas = document.getElementById('canvas'); if (typeof canvas.getContext === 'undefined') { return; } const ctx = canvas.getContext("2d"); function fitCanvasSize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } fitCanvasSize(); window.onresize = fitCanvasSize; (function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; })(); var mouse = { x: undefined, y: undefined } if (window.matchMedia("(min-width: 400px)").matches) { var maxRadius = 40; } else { var maxRadius = 24; } var colorArray = [ '#def0ff', '#c2e3ff', '#9ed3ff', '#78c2ff', '#62a9e3' ] window.addEventListener('mousemove', function () { mouse.x = event.x; mouse.y = event.y; }) function Circle(x, y, dx, dy, radius) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.radius = radius; this.minRadius = radius; this.color = colorArray[Math.floor(Math.random() * colorArray.length)]; this.draw = function () { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, Math.PI * 2, false); ctx.fillStyle = this.color; ctx.fill(); }; this.update = function () { if (this.x + radius > canvas.width || this.x - radius < 0) { this.dx = -this.dx; } if (this.y + radius > canvas.height || this.y - radius < 0) { this.dy = -this.dy; } this.x += this.dx; this.y += this.dy; if (mouse.x - this.x < 50 && mouse.x - this.x > -50 && mouse.y - this.y < 50 && mouse.y - this.y > -50) { this.radius += 1; if (this.radius > maxRadius) { this.radius -= 1; } } else if (this.radius > this.minRadius) { this.radius -= 1; } this.draw(); } } var circleArray = []; for (var i = 0; i < 800; i++) { var x = Math.random() * (canvas.width - radius * 2) + radius; var dx = (Math.random() - 0.5); var y = Math.random() * (canvas.height - radius * 2) + radius; var dy = (Math.random() - 0.5); var radius = Math.random() * 3 + 1; circleArray.push(new Circle(x, y, dx, dy, radius)); } function animate() { requestAnimationFrame(animate); ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < circleArray.length; i++) { circleArray[i].update(); } } animate(); }) |
Найдено на codepen.io у пользователя Hisami Kurita
Как сделать, чтобы вместо кляксы был дым?
Здравствуйте!
У меня не работает. Я что-то делаю не так?
Использую WordPress. HTML добавил в header.php, CSS – в CSS, JS – в корневую папку с сайтом (назвал goo.js).
JS должен находиться ниже HTML кода
И еще как вариант, эта клякса может перекрываться белым бекграундом сайта (как на этой странице перекрывается подвалом и шапкой). Поставьте в CSS z-index не -1, а 200
Если не поможет, дайте ссылку на сайт, я завтра посмотрю
Спасибо за совет!
Всё получилось, когда я добавил HTML и JS (обернул его в {script type="text/javascript"} {/script}) в header.php
Только сайт стал подтормаживать.
При значении "z-index -1" капли отображаются вокруг сайта – там, где фон (по краям), а не внутри статьи.
При значении "z-index -200" происходит то же самое.
Как сделать, чтобы капли появлялись в конкретной записи?
Сайт: asome.ru
При значении "z-index 200" (без минуса) пятная появляются везде, но сайт начинает работать некорректно: не нажимаются меню, ссылки и названия (переходы на записи через заголовок).
У вас в главном стиле темы есть класс:
Нужно убрать background-color: #fff;
И с остальными элементами по аналогии
Спасибо!