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

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

Прикольный скрипт "Dudu & Bubu" для uCoz
Конечно, иногда такие функции тоже бывают интересными. Можно использовать код, созданный на основе маленьких медвежат «Dudu» и «Bubu». В этом коде не используется HTML, можно использовать только CSS и JavaScript.

CSS

Код
.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; }

JavaScript

Код
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);

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

• Продакшн: M.Rasulov
14 Августа 2025 Просмотров: 64

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

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

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

avatar