Прикольный скрипт "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
Поделиться в социальных сетях
Материал разместил