ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Прикольный скрипт "Dudu & Bubu" для uCoz

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

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

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

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>

JavaScript

Код
<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); // Döwrebap
  }, { once: true });
}

// Başla
showBear(0);
</script>

Важно помнить: в скрипте нужно загрузить изображения и не забыть указать ссылку на ваш веб-сайт.

• Prod By M.Rasulov

Источник: tazeje.com

14 Августа 2025 Загрузок: 1 Просмотров: 146

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

avatar