Имитация набора текста с переливающимся эффектом

Пример:

Имитация набора текста с переливающимся эффектом.

HTML:

<div class="typing">
	<p class="text">Имитация набора текста с переливающимся эффектом. </p>
</div>

<p class="text">Имитация набора текста с переливающимся эффектом. </p>

</div>

CSS:

.typing {
	padding: 20px 30px;
	font-size: 36px;
	line-height: 46px;
	font-family: 'Roboto', sans-serif; 
	font-weight: bold;
	background: #337AB7;
}
.typing span{
	color: #BFE2FF;
	animation: 0.5s typing-color infinite;
}
@keyframes typing-color {
	50% {
		color: #FFF;
	}
}

.typing {

padding: 20px 30px;

font-size: 36px;

line-height: 46px;

font-family: 'Roboto', sans-serif;

font-weight: bold;

background: #337AB7;

}

.typing span{

color: #BFE2FF;

animation: 0.5s typing-color infinite;

}

@keyframes typing-color {

50% {

color: #FFF;

}

JS:

var wrapper = document.querySelector(".typing");
var text = document.querySelector(".typing .text");
var textCont = text.textContent;
text.style.display = "none";
for (var i = 0; i < textCont.length; i++) {
	(function(i) {
		setTimeout(function() {
			var texts = document.createTextNode(textCont[i])
			var span = document.createElement('span');
			span.appendChild(texts);
			wrapper.appendChild(span);
		}, 75 * i);
	}(i));
}

var wrapper = document.querySelector(".typing");

var text = document.querySelector(".typing .text");

var textCont = text.textContent;

text.style.display = "none";

for (var i = 0; i < textCont.length; i++) {

(function(i) {

setTimeout(function() {

var texts = document.createTextNode(textCont[i])

var span = document.createElement('span');

span.appendChild(texts);

wrapper.appendChild(span);

}, 75 * i);

}(i));

}

Найдено на codepen.io у пользователя Mehmet Burak Erman

Алекс: 05.07.2021 в 13:37

Спасибо, интересный код.
А как его зациклить? Чтобы текст исчезал, потом печатался заново и так постоянно.

Ответить
- Alexander: 05.07.2021 в 15:32
  
  Можно пропустить скрипт через интервал
  [code]setInterval(function() {
  show();
  let span = document.querySelectorAll(".typing span");
  for( let i = 0; i < span.length; i++){
  span[i].remove();
  }
  }, 5000);
  show();
  function show() {
  // Код из примера
  }[/code]
  Интервал в 5 секунд выставить как нужно.
  
  Или, как вариант, воспользоваться плагином [url="https://atuin.ru/blog/pechatayushhijsya-tekst-na-jquery/"]jquery-bubble-text[/url]
  
  Ответить
maximilian: 01.07.2019 в 15:13

Спасибо, много взял себе на сайт))))

Ответить

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий:

Комментарии: