Текст с исчезающими буквами

Пример:

Исчезающие и появляющиеся буквы

на javascript

HTML:

<div class="fading">текст</div>

1	<div class="fading">текст</div>

CSS:

.fading {
	color: #337AB7;
	font-size: 28px;
	line-height: 32px;	
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 30px 0;
}
.fading span {
	animation: fading 3s alternate infinite;
	opacity: 0;
}
@keyframes fading {
	0% {
		opacity: 0;
		filter: blur(10px);
	}
	50%, 100% {
		opacity: 1;
		filter: blur(0px);
	}
}

.fading {

color: #337AB7;

font-size: 28px;

line-height: 32px;

text-align: center;

text-transform: uppercase;

letter-spacing: 2px;

margin: 30px 0;

}

.fading span {

animation: fading 3s alternate infinite;

opacity: 0;

}

@keyframes fading {

0% {

opacity: 0;

filter: blur(10px);

}

50%, 100% {

opacity: 1;

filter: blur(0px);

}

JS:

let fadingHeading = document.querySelectorAll('.fading');
for (let a = 0; a < fadingHeading.length; a++){
let letters = fadingHeading[a].textContent.split('');
let content = letters.map((val, i) => {
	let delay = Math.floor((Math.random() * 1000) + 1);
	return ('<span style="animation-delay: '+ delay + 'ms">'+ val +'</span>');
});
fadingHeading[a].innerHTML = "";
for (let i = 0; i < content.length; i++) {
	fadingHeading[a].innerHTML += content[i];
}
}

let fadingHeading = document.querySelectorAll('.fading');

for (let a = 0; a < fadingHeading.length; a++){

let letters = fadingHeading[a].textContent.split('');

let content = letters.map((val, i) => {

let delay = Math.floor((Math.random() * 1000) + 1);

return ('<span style="animation-delay: '+ delay + 'ms">'+ val +'</span>');

});

fadingHeading[a].innerHTML = "";

for (let i = 0; i < content.length; i++) {

fadingHeading[a].innerHTML += content[i];

}

За основу взят скрипт, найденный на codepen.io у пользователя Kyle Wetton

Пример:

HTML:

CSS:

JS:

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

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

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