Текст с эффектом bounce

@fell123123 · Регистрация: 04.10.2022

Студворк — интернет-сервис помощи студентам

Привет, можете помочь создать такой же текст, как и в начале этого сайте?
https://jacekjeznach.com/
Я попытался найти исходный код, но не нашел.
Хотел бы точно такой же текст, с таким же эффектом bounce.

@mr_dramm · 04.10.2022, 13:40

Песочница

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    .box {
        display: flex;
        min-height: 100vh;
        background-color: #1D1D1D;
        color: white;
        justify-content: center;
        align-items: center;
    }
 
    .item {
        font-size: 15rem;
        white-space: pre;
    }
 
    .item.appearance {
        opacity: 0;
        animation: appearance 400ms alternate forwards ease-out;
    }
 
    @keyframes appearance {
        0% {
            font-size: 0rem;
            opacity: 1;
        }
 
        100% {
            font-size: 15rem;
            opacity: 1;
        }
    }
 
    .bounce {
        animation: rubberband 800ms alternate ease-out;
    }
 
    @keyframes rubberband {
        0% {
            transform: scaleX(1);
        }
 
        40% {
            transform: scaleX(1.12) scaleY(0.75);
        }
 
        55% {
            transform: scaleX(0.85) scaleY(1);
        }
 
        65% {
            transform: scaleX(1.09) scaleY(0.85);
        }
 
        75% {
            transform: scaleX(0.9) scaleY(1);
        }
 
        90% {
            transform: scaleX(1.05) scaleY(0.95);
        }
 
        100% {
            transform: scaleX(1) scaleY(1);
        }
    }
    </style>
</head>
 
<body>
    <div class="box">
    </div>
    <script>
    const $box = document.querySelector(".box")
    const word = "Hello world"
    const waitMe = () => new Promise(resolve => setTimeout(() => resolve(true), 400))
    const showText = async () => {
        for (let i = 0; i < word.length; i++, await waitMe()) {
            const e = document.createElement("span");
            e.classList.add(...["item", "appearance"])
            e.innerHTML = word[i]
            e.addEventListener("animationend", function(e) {
                if (e.animationName === 'appearance') {
                    e.target.classList.remove('appearance')
                    e.target.classList.add('bounce')
                } else
                    this.classList.remove("bounce");
            });
            $box.append(e)
        }
    }
    showText()
    document.querySelector(".box").onmouseover = (e) => {
        if (!e.target.classList.contains("item")) return
 
        e.target.classList.add("bounce");
    };
    </script>
</body>
 
</html>

@Winter123321 · 04.10.2022, 19:09

Сообщение от mr_dramm

Песочница

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    .box {
        display: flex;
        min-height: 100vh;
        background-color: #1D1D1D;
        color: white;
        justify-content: center;
        align-items: center;
    }
 
    .item {
        font-size: 15rem;
        white-space: pre;
    }
 
    .item.appearance {
        opacity: 0;
        animation: appearance 400ms alternate forwards ease-out;
    }
 
    @keyframes appearance {
        0% {
            font-size: 0rem;
            opacity: 1;
        }
 
        100% {
            font-size: 15rem;
            opacity: 1;
        }
    }
 
    .bounce {
        animation: rubberband 800ms alternate ease-out;
    }
 
    @keyframes rubberband {
        0% {
            transform: scaleX(1);
        }
 
        40% {
            transform: scaleX(1.12) scaleY(0.75);
        }
 
        55% {
            transform: scaleX(0.85) scaleY(1);
        }
 
        65% {
            transform: scaleX(1.09) scaleY(0.85);
        }
 
        75% {
            transform: scaleX(0.9) scaleY(1);
        }
 
        90% {
            transform: scaleX(1.05) scaleY(0.95);
        }
 
        100% {
            transform: scaleX(1) scaleY(1);
        }
    }
    </style>
</head>
 
<body>
    <div class="box">
    </div>
    <script>
    const $box = document.querySelector(".box")
    const word = "Hello world"
    const waitMe = () => new Promise(resolve => setTimeout(() => resolve(true), 400))
    const showText = async () => {
        for (let i = 0; i < word.length; i++, await waitMe()) {
            const e = document.createElement("span");
            e.classList.add(...["item", "appearance"])
            e.innerHTML = word[i]
            e.addEventListener("animationend", function(e) {
                if (e.animationName === 'appearance') {
                    e.target.classList.remove('appearance')
                    e.target.classList.add('bounce')
                } else
                    this.classList.remove("bounce");
            });
            $box.append(e)
        }
    }
    showText()
    document.querySelector(".box").onmouseover = (e) => {
        if (!e.target.classList.contains("item")) return
 
        e.target.classList.add("bounce");
    };
    </script>
</body>
 
</html>

А как добавить цвет (только при нажатии)?

Новые блоги и статьи Все статьи Все блоги /
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .
Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .

@fell123123 0 / 0 / 0 Регистрация: 04.10.2022 Сообщений: 3

	Текст с эффектом bounce 04.10.2022, 12:21. Показов 321. Ответов 2 Метки нет (Все метки) Привет, можете помочь создать такой же текст, как и в начале этого сайте? https://jacekjeznach.com/ Я попытался найти исходный код, но не нашел. Хотел бы точно такой же текст, с таким же эффектом bounce. 0