Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.85/47: Рейтинг темы: голосов - 47, средняя оценка - 4.85
0 / 0 / 0
Регистрация: 07.05.2019
Сообщений: 54

Анимация: эффект набора текста («пишущей машинки»)

06.03.2020, 08:43. Показов 9854. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Нужно будет реализовать:
слева – направо (обычный набор), справа – налево, центрирование набираемой строки обычного набора.
в html будет отображаться.
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
06.03.2020, 08:43
Ответы с готовыми решениями:

Эффект печатной машинки
привет. помогите с задачей. нужна программка, имитирующая набор текста. проблема в том, что должен быть не только набор текста, но и...

Эффект печатающей машинки
Доброй ночи! Подскажите как можно реализовать такой эффект? Ну из идей у меня тока разобрать текст на слова, а слова на буквы. Как ниюудь...

Эффект печатной машинки
Как посимвольно, с задержкой вывести текст на экран? Что-то типа: for (int i=0;i<s.Lenght;i++) { console.writeline(s); ...

4
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
06.03.2020, 11:48
Есть две идеи. 1.

Не по теме:

Только что придумал:

HTML5
1
<h1>printer</h1>
CSS
1
h1 span{color:transparent}
JavaScript
1
2
3
4
5
6
const paper=document.querySelector('h1');
const text=paper.innerText.split('');
const t='<span>'+text.join('</span><span>')+'</span>';
paper.innerHTML=t;
let i=0;
setInterval(()=>{if(i<text.length){document.querySelectorAll('h1 span')[i].style.color='black'; i++}}, 500)
Добавлено через 6 минут
2.
JavaScript
1
2
3
let i=0;
function printy(text){if(i<text.length){paper.insertAdjacentHTML('beforeend', text.split("")[i])}; i++};
function printIt(){setInterval(function (){printy('Hello!')}, 500)};
Добавлено через 12 минут
Второй вариант позволяет осуществить центрирование строки, достаточно задать для элемента text-align:center
0
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
06.03.2020, 12:23
Лучший ответ Сообщение было отмечено Sebastian404 как решение

Решение

index.html
HTML5
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 100px;
            height: 20px;
            border: 1px solid black;
            display: flex;
            align-items: center;
 
        }
 
        #container1 {
            justify-content: flex-start;
        }
 
        #container2 {
            justify-content: flex-end;
        }
 
        #container3 {
            justify-content: center;
        }
    </style>
 
</head>
<body>
    <div id="container1"></div>
    <div id="container2"></div>
    <div id="container3"></div>
    <script src="scripts/app.js"></script>
</body>
</html>
scripts/app.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Promise.delay = (ms) => new Promise(resolve => { setTimeout(resolve, ms); });
 
async function printer(cssSelector, text, r2l) {
    let el = document.querySelector(cssSelector);
    if (r2l)
        for (let i = text.length - 1; i >= 0; i--) {
            let c = text[i];
            await Promise.delay(300);
            el.textContent = c + el.textContent;
        }
    else
        for (let c of text) {
            await Promise.delay(300);
            el.textContent = el.textContent + c;
        }
}
 
(async function main() {
    let str = "Предложение";
    await printer("#container1", str);
    await printer("#container2", str, true);
    await printer("#container3", str);
})();
2
0 / 0 / 0
Регистрация: 07.05.2019
Сообщений: 54
12.03.2020, 18:26  [ТС]
Благодарю
0
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
12.03.2020, 18:34
Sebastian404, до async/await народ ковырял таймером. Например, Эффект печатающей машинки

И библиотека typed.js есть. Если захочется чего-то типа крутого. Там эмулирован и бегающий вертикальный курсор.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
12.03.2020, 18:34
Помогаю со студенческими работами здесь

Анимация. Эффект волн
Приветствую! Есть потребность пустить повторяющуюся картинку (волна) по подвалу сайта. В JQ можно как-то &quot;размножить&quot; эту...

Анимация. Эффект волнообразного движения линий
Помогите, пожалуйста, построить семейство разноцветных линий на форме так, чтобы был устроен цикл, при котором каждая последующая линия...

Эффект пульсации текста
Добрый вечер. Если анимацию на текст наложить как &quot;изменение размера&quot;, текст увеличивается и остается в таком положении. Начинается...

Эффект печатающегося текста
Как написать на чистом JS чтобы слово печаталось красиво на странице сайта? &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; ...

3D эффект при написании текста
Здравствуйте, вот код при нажатии кнопки выходит надпись DElPHI как поменять цвет черный на белый скажите пожалуйста procedure...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru