Показать сообщение отдельно
  #9 (permalink)  
Старый 06.12.2021, 18:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

snowman animate
Alexprom,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .snowman {
            height: 100px;
            width: 100px;
            position: fixed;
            bottom: 0;
            left: -100px;
            z-index: 500;
            transform: rotate(30deg);
            transition: left .6s;
        }
    </style>
</head>
<body>
    <img class="snowman" src="https://i.pinimg.com/originals/52/59/75/5259755c4573bd4e45817c2e6737c991.jpg" alt="">
    <script>
        let show = 1;
        (function tick() {
            function random(base, up) {
                return base + Math.random() * up | 0
            }
            let img = document.querySelector(".snowman");
            img.style.left = show ? "-54px" : "-150px";
            show && (img.style.bottom = random(0, 300) + "px");
            show ^= 1;
            setTimeout(tick, show ? random(3000, 5000) : 3000 );
        })();
    </script>
</body>
</html>
Ответить с цитированием