37 lines
946 B
PHP
37 lines
946 B
PHP
@props([
|
|
'symbol' => '❄️',
|
|
'duration' => 300,
|
|
])
|
|
|
|
<style>
|
|
.falling-symbol {
|
|
position: fixed;
|
|
top: -10px;
|
|
color: white;
|
|
font-size: 1rem;
|
|
user-select: none;
|
|
animation: fall linear infinite;
|
|
z-index: 50;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes fall {
|
|
to {
|
|
transform: translateY(100vh);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div x-data x-init="setInterval(() => {
|
|
const el = document.createElement('div');
|
|
el.className = 'falling-symbol';
|
|
el.style.left = Math.random() * window.innerWidth + 'px';
|
|
el.style.opacity = Math.random();
|
|
el.style.fontSize = (Math.random() * 10 + 10) + 'px';
|
|
el.style.animationDuration = (Math.random() * 5 + 5) + 's';
|
|
el.innerHTML = `<img src='{{ $symbol }}' style='width: 1em; height: 1em;'>`;
|
|
document.body.appendChild(el);
|
|
setTimeout(() => el.remove(), 10000);
|
|
}, {{ $duration }});">
|
|
</div>
|