Прикольный скрипт "Dudu & Bubu" для uCoz

Несомненно, подобные забавные скрипты могут добавить изюминку и сделать времяпрепровождение более увлекательным. После внедрения этой функции, в левом нижнем углу вашей страницы будет отображаться медвежонок Дуду, а в правом — медвежонок Бубу. Они будут демонстрировать анимацию с прыжками, после чего исчезнут.

В этом коде не используется HTML, можно использовать только CSS и jаvascript.

CSS

Код:

<style>
.bear-wrap {
 position: fixed;
 bottom: 16px;
 z-index: 99999;
 pointer-events: none;
}

.bear-wrap.left { left: 16px; }
.bear-wrap.right { right: 16px; }

.bear-wrap img {
 width: 120px;
 height: auto;
 display: block;
}

@keyframes bear-left {
 0% { transform: translateX(-140%); opacity: 0; }
 20% { transform: translateX(0%); opacity: 1; }
 80% { transform: translateX(0%); opacity: 1; }
 100% { transform: translateX(-140%); opacity: 0; }
}

@keyframes bear-right {
 0% { transform: translateX(140%); opacity: 0; }
 20% { transform: translateX(0%); opacity: 1; }
 80% { transform: translateX(0%); opacity: 1; }
 100% { transform: translateX(140%); opacity: 0; }
}

.animate-left { animation: bear-left 4s ease-in-out forwards; }
.animate-right { animation: bear-right 4s ease-in-out forwards; }
</style>

jаvascript

Код:

<script>
const bearsData = [
 { name: "Dudu", img: "/img/Dudu.png", side: "left" },
 { name: "Bubu", img: "/img/Bubu.png", side: "right" }
];

function showBear(index) {
 const bearData = bearsData[index];
 const wrap = document.createElement("div");
 wrap.className = `bear-wrap ${bearData.side} animate-${bearData.side}`;
 wrap.innerHTML = `<img src="${bearData.img}" alt="${bearData.name}">`;
 document.body.appendChild(wrap);

 wrap.addEventListener("animationend", () => {
 wrap.remove();
 showBear((index + 1) % bearsData.length); // Следующий
 }, { once: true });
}

// Начать
showBear(0);
</script>