Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Ищу скрипт появления изображения (https://javascript.ru/forum/misc/83433-ishhu-skript-poyavleniya-izobrazheniya.html)

Alexprom 06.12.2021 11:56
Ищу скрипт появления изображения
 
Здравствуйте! Хочу на сайт снеговика поставить))
Хочеться чтобы он переодически вылазил слева из за экрана и прятался, и следующий раз вылазил чуть выше или ниже.

Такой скрипт есть? Долго ищу но как то глухо...
Снеговик есть а скрипта нет

рони 06.12.2021 12:49
Alexprom,
снеговика в студию!!! :)

ksa 06.12.2021 14:52
Началось... :-E

Alexprom 06.12.2021 15:11
Цитата:
Сообщение от рони (Сообщение 542193)
Alexprom,
снеговика в студию!!! :)
Воть :victory:
https://drive.google.com/file/d/1OQr...ew?usp=sharing

Alexprom 06.12.2021 15:12
Цитата:
Сообщение от ksa (Сообщение 542198)
Началось... :-E
Ну а что?))) Все любят снеговиков)))

ksa 06.12.2021 16:00
Alexprom, да сейчас пойдет:
- хочу падающий снег
- оленей с санями
- фейерверки
- елки с игрушками

Alexprom 06.12.2021 16:19
Цитата:
Сообщение от ksa (Сообщение 542201)
Alexprom, да сейчас пойдет:
- хочу падающий снег
- оленей с санями
- фейерверки
- елки с игрушками
Это все уже есть)) снеговика не хватает)))

рони 06.12.2021 17:09
Цитата:
Сообщение от Alexprom
Такой скрипт есть?
Рекурсивный setTimeout

рони 06.12.2021 18:13
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>

Alexprom 06.12.2021 19:13
Цитата:
Сообщение от рони (Сообщение 542207)
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>
Да, это именно то что нужно)))
Красиво и празнично) Большое спасибо рони :)


Часовой пояс GMT +3, время: 09:29.