<title>Какашки с неба ☄💩</title>
<style>
body {
margin: 0;
height: 100vh;
overflow: hidden;
background: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 100%);
font-family: Arial, Helvetica, sans-serif;
cursor: default;
}
.poop {
position: absolute;
font-size: 40px;
user-select: none;
pointer-events: none;
animation: fall linear forwards;
}
@keyframes fall {
to {
transform: translateY(120vh) rotate(720deg);
}
}
.button-area {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
}
button {
font-size: 28px;
padding: 20px 60px;
border: none;
border-radius: 50px;
background: #8B4513;
color: white;
cursor: pointer;
box-shadow: 0 8px #5c2f0d;
transition: transform 0.1s;
}
button:active {
transform: translateY(4px);
box-shadow: 0 4px #5c2f0d;
}
h1 {
text-align: center;
color: #444;
margin-top: 30px;
text-shadow: 2px 2px 0 white;
}
</style>
Жми и будет дождик 💩
💩 ДАВАЙ!
<script>
function poopRain() {
for(let i = 0; i < 18; i++) {
setTimeout(() => {
createOnePoop();
}, i * 80 + Math.random()*60);
}
}
function createOnePoop() {
const poop = document.createElement("div");
poop.className = "poop";
poop.textContent = ["💩","💩","💩","🐄","🤎","💦"][Math.floor(Math.random()*6)];
// случайная позиция по горизонтали
const x = Math.random() * window.innerWidth;
poop.style.left = x + "px";
// разная скорость падения и поворота
const duration = 2.5 + Math.random() * 3.5; // 2.5–6 сек
poop.style.animationDuration = duration + "s";
// небольшой разброс по размеру
const scale = 0.7 + Math.random() * 0.8;
poop.style.transform = `scale(${scale})`;
document.body.appendChild(poop);
// удаляем после окончания анимации
setTimeout(() => {
poop.remove();
}, duration * 1000 + 100);
}
// Можно ещё и кликом по экрану запускать :)
document.addEventListener('click', (e) => {
// не запускаем когда жмём по кнопке
if (e.target.tagName !== 'BUTTON') {
poopRain();
}
});
</script>
Жми и будет дождик 💩