Артём Мáлков

Самопечатающийся текст на JavaScript

30 сен5 коммАртём Мáлков

Сейчас многие сайты все больше и больше хотят удивить посетителей интересными и необычными вещами и, тем самым, привлечь их внимание. Одним из таких вещей является текст, который как бы набирается сам по себе.

Самопечатающийся текст на JavaScript

Зрелище интересное, и как его сделать, я сейчас покажу.

Для реализации этой идеи мы воспользуемся следующим скриптом:

<script>

	var text = "Hello, World!"; // Ваш текст
	var delay = 100; // Скорость печатания
	var elem = document.getElementById("result"); // id элемента для вывода результата

	var print_text = function(text, elem, delay) {
		
		if(text.length > 0) {
		
			elem.innerHTML += text[0];
			
			setTimeout(
			
				function() {
				
					print_text(text.slice(1), elem, delay);  
					
				}, delay
				
			);
			
		}
		
	}

	print_text(text, elem, delay);
	
</script>

Его вы вставляете на нужную страницу, желательно перед закрывающим тегом </body>. В нем вы меняете надпись, которая будет печататься, а также скорость, с которой этот эффект будет происходить. Чем меньше число – тем выше скорость печатания.

После чего в нужное место на вашем сайте вы вставляете следующий код:

<div id="result"></div>

Он отвечает за вывод информации. Сохраняете все нововведения и любуетесь результатом. Если возникли трудности в добавлении этого эффекта на сайт – пишите об этом в комментариях.

Рекомендуем к просмотру
Узнаем, с какой стороны элемента был введен курсор мыши на JavaScript
Статьи и советы
Как сделать жирный текст (шрифт) в HTML/CSS/jQuery/JavaScript?
Статьи и советы
Поочередное выполнение функций на jQuery
Статьи и советы
5
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 1
    1
      •  Проверенный
    29 авг в 23:06

    Здравствуйте! Подскажите плз., как сделать если несколько слов или фраз нужно напечатать предварительно стирая по символу?

      • 6
      1080
        •  Команда Pandoge
      7 сен в 00:26

      Федор, Здравствуйте!

      То есть по буквам написали фазу (слово), потом также удалили её (по буквам) и написали новую?

    • 1
    1
      •  Пользователь
    4 дек в 13:24

    Здравствуйте! Подскажите, как сделать так, чтобы этот текст печатался заново каждые например 10 секунд, чтобы это время можно было установить? Вставила этот скрипт на сайт, текст печатается один раз без повтора, а хотелось бы с повтором))

      • 1
      1080
        •  Команда Pandoge
      7 дек в 02:46

      Macada, здравствуйте!

      После строки:

      print_text(text, elem, delay);

      добавьте:

      setInterval(function() {
            
      	elem.innerHTML = "";
            
      	print_text(text, elem, delay);
      	
      }, 10 * 1000);

      10 - это 10 секунд.

    • 2
    766
      •  Гости
    20 апр в 16:50

    Большое спасибо. Очень пригодиться )

Подняться наверх
Регистрация на сайте
Pandoge - уникальный проект, который собрал на своих страницах большой опыт многих людей в сфере сайтостроения.Присоединяйся и ты к сообществу, получай неограниченные знания и начинай творить свою мечту!Нажимая кнопку «Регистрация» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Логин
Пароль
Регистрация
Pandoge