Следующая за курсором клякса

Пример можно видеть на этой странице

Для того, чтобы клякса не перекрывала контекст, ей задается позиционированние по z-оси z-index: -1. Поэтому в зависимости от верстки страницы, некоторые элементы могут ее перекрывать.

HTML:

<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>

<defs>

</filter>

</defs>

</svg>

Если убрать SVG-фильтр, получится не менее интересный эффект.

Убрать фильтр

CSS:

#canvas {
	filter: url("#goo");
	height: 100%;
	width: 100%;	
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
#blot {
	height: 0;
	width: 0;
}

#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

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();
})

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

Стас: 21.02.2024 в 21:07

Как сделать, чтобы вместо кляксы был дым?

Ответить
Александр: 11.05.2020 в 15:39

Здравствуйте!

У меня не работает. Я что-то делаю не так?

Использую WordPress. HTML добавил в header.php, CSS – в CSS, JS – в корневую папку с сайтом (назвал goo.js).

Ответить
- Alexander: 11.05.2020 в 19:23
  
  JS должен находиться ниже HTML кода
  И еще как вариант, эта клякса может перекрываться белым бекграундом сайта (как на этой странице перекрывается подвалом и шапкой). Поставьте в CSS z-index не -1, а 200
  Если не поможет, дайте ссылку на сайт, я завтра посмотрю
  
  Ответить
  - Александр: 11.05.2020 в 22:26
    
    Спасибо за совет!
    Всё получилось, когда я добавил HTML и JS (обернул его в {script type="text/javascript"} {/script}) в header.php
    Только сайт стал подтормаживать.
    
    При значении "z-index -1" капли отображаются вокруг сайта – там, где фон (по краям), а не внутри статьи.
    При значении "z-index -200" происходит то же самое.
    
    Как сделать, чтобы капли появлялись в конкретной записи?
    
    Сайт: asome.ru
    
    Ответить
    - Александр: 11.05.2020 в 23:04
      
      При значении "z-index 200" (без минуса) пятная появляются везде, но сайт начинает работать некорректно: не нажимаются меню, ссылки и названия (переходы на записи через заголовок).
      
      Ответить
    - Alexander: 12.05.2020 в 10:32
      
      У вас в главном стиле темы есть класс:
      
      .site { padding: 0 24px; padding: 0 1.714285714rem; background-color: #fff; }
      
      Нужно убрать background-color: #fff;
      И с остальными элементами по аналогии
      
      Ответить
      - Александр: 12.05.2020 в 12:31
        
        Спасибо!
        
        Ответить

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий:

Комментарии: