Блоки с разноцветными пузырями

Пример:

data-bubble-hue="20"

data-bubble-count="60"

data-bubble-hue="70"

data-bubble-count="80"

data-bubble-hue="110"

data-bubble-count="120"

data-bubble-hue="220"

data-bubble-count="30"

data-bubble-hue="290"

data-bubble-count="40"

HTML:

<div data-bubble-hue="290" data-bubble-count="40" class="bubble-container">
	<div class="bubble-content">
		<p>Текст</p>
	</div>
</div>

<p>Текст</p>

</div>

Где:

data-bubble-hue - Цвет в градусах HSL (таблица цветов)

data-bubble-count - Количество пузырей

CSS:

.bubble-container {
	justify-content: center;
	padding: 40px;
	margin: 30px;
	position: relative;
}
.bubble-content {
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	background: rgba(255,255,255,0.9);
	position: relative;
	z-index: 10;
	display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
	min-height: 200px;
    border-radius: 20px;
}
span.bubble {
	border-radius: 50%;
	position: absolute;
	pointer-events: none;
	transform: translate(-50%, -50%);
	animation: blow 2s ease-in infinite;
	transition: all 400ms ease;
}
@keyframes blow {
	0% {
		transform: translate(-50%, -50%) scale(0.1);
		opacity: 0;
	}
	10% {
		transform: translate(-50%, -50%);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -100%);
		opacity: 0;
	}
}

.bubble-container {

justify-content: center;

padding: 40px;

margin: 30px;

position: relative;

}

.bubble-content {

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

background: rgba(255,255,255,0.9);

position: relative;

z-index: 10;

display: flex;

flex-flow: column;

align-items: center;

justify-content: center;

min-height: 200px;

border-radius: 20px;

}

span.bubble {

border-radius: 50%;

position: absolute;

pointer-events: none;

transform: translate(-50%, -50%);

animation: blow 2s ease-in infinite;

transition: all 400ms ease;

}

@keyframes blow {

0% {

transform: translate(-50%, -50%) scale(0.1);

opacity: 0;

}

10% {

transform: translate(-50%, -50%);

opacity: 1;

}

100% {

transform: translate(-50%, -100%);

opacity: 0;

}

JS:

const clip = (v, min, max = Infinity) => {
	if (v < min) return min;
	else if (v > max) return max;
	else return v;
};
const randRange = (min, max) => Math.random() * max + min;
function bubble(x, y, rect, hue, target) {
	const size = randRange(20, rect.width / 10);
	const circleHue = hue + randRange(-20, 20);
	const animDuration = randRange(clip(size ** 2/1000, 1), 6) 
	const zIndex = Math.random() < 0.1 ? 2 : -1;
	const circle = document.createElement("span");
	circle.className = "bubble";
	circle.style.left = x + "px";
	circle.style.top = y + "px";
	circle.style.width = size + "px";
	circle.style.height = size + "px";
	circle.style.background = `hsl(${circleHue}deg, 100%, 60%)`;
	circle.style.zIndex = zIndex
	circle.style.animationDuration = animDuration + "s";
	target.appendChild(circle);
}
function bubblestart() { 
	document.querySelectorAll("[data-bubble-hue]").forEach((target) => {
		const rect = target.getBoundingClientRect();
		const hue = Number(target.getAttribute("data-bubble-hue"));
		const count = Number(target.getAttribute("data-bubble-count") || 50);
		for (let i = 0; i < count; i++) {
			const x = randRange(0, rect.width);
			const y = randRange(0, rect.height);
			bubble(x, y, rect, hue, target);
		}
	});
}
window.addEventListener("resize", () => {
	let del = document.querySelectorAll(".bubble");
	del.forEach( e => e.remove() );
	bubblestart();
});
bubblestart();

const clip = (v, min, max = Infinity) => {

if (v < min) return min;

else if (v > max) return max;

else return v;

};

const randRange = (min, max) => Math.random() * max + min;

function bubble(x, y, rect, hue, target) {

const size = randRange(20, rect.width / 10);

const circleHue = hue + randRange(-20, 20);

const animDuration = randRange(clip(size ** 2/1000, 1), 6)

const zIndex = Math.random() < 0.1 ? 2 : -1;

const circle = document.createElement("span");

circle.className = "bubble";

circle.style.left = x + "px";

circle.style.top = y + "px";

circle.style.width = size + "px";

circle.style.height = size + "px";

circle.style.background = `hsl(${circleHue}deg, 100%, 60%)`;

circle.style.zIndex = zIndex

circle.style.animationDuration = animDuration + "s";

target.appendChild(circle);

}

function bubblestart() {

document.querySelectorAll("[data-bubble-hue]").forEach((target) => {

const rect = target.getBoundingClientRect();

const hue = Number(target.getAttribute("data-bubble-hue"));

const count = Number(target.getAttribute("data-bubble-count") || 50);

for (let i = 0; i < count; i++) {

const x = randRange(0, rect.width);

const y = randRange(0, rect.height);

bubble(x, y, rect, hue, target);

}

});

}

window.addEventListener("resize", () => {

let del = document.querySelectorAll(".bubble");

del.forEach( e => e.remove() );

bubblestart();

});

bubblestart();

Найдено на codepen.io у пользователя Manan Tank

Пример:

HTML:

Где:

CSS:

JS:

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

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