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

Пример:

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

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

setInterval(function() { show(); let span = document.querySelectorAll(".typing span"); for( let i = 0; i < span.length; i++){ span[i].remove(); } }, 5000); show(); function show() { // Код из примера }

Алекс: 05.07.2021 в 13:37

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

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

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

Ответить

Пример:

HTML:

CSS:

JS:

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

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

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