Анимация букв у заголовков при прокрутке страницы

Пример на WOW.js:

Анимированные буквы у заголовка с библиотекой WOW.js

HTML:

<div class="animimate-heading">Анимированные буквы у заголовка</div>

1	<div class="animimate-heading">Анимированные буквы у заголовка</div>

CSS:

Добавляем на сайт библиотеку animate.min.css (подробнее о ней в теме "Набор анимаций animate.css") и стили для заголовка:

.wow {
	visibility: hidden;
}
.animimate-heading {
	text-align: center;
	font-weight: 500;
	font-size: 38px;
	line-height: 1.35;
	margin: 20px;
	text-transform: uppercase;
	color: #337AB7;
}
.animimate-heading span {
	display: inline-block;
}
.animimate-heading div {
	display: inline-block;
	padding: 0 2px;
}
@media screen and (max-width:767px) {
	.animimate-heading {
		font-size: 24px;
	}	
}

.wow {

visibility: hidden;

}

.animimate-heading {

text-align: center;

font-weight: 500;

font-size: 38px;

line-height: 1.35;

margin: 20px;

text-transform: uppercase;

color: #337AB7;

}

.animimate-heading span {

display: inline-block;

}

.animimate-heading div {

display: inline-block;

padding: 0 2px;

}

@media screen and (max-width:767px) {

.animimate-heading {

font-size: 24px;

}

Еще один пример заголовка

JS:

Добавляем на сайт библиотеку wow.min.js (подробнее о ней в теме "Анимация элементов при прокрутке — WOW.js") и скрипт:

let anim = document.querySelectorAll('.animimate-heading');
for (let a = 0; a < anim.length; a++){
	let arr = anim[a].innerHTML.split(/\s+/);
	let str = '';
	for(let i = 0; i < arr.length; i++) {
		if(arr[i]){
			arr[i] = '<div>'+arr[i]+'</div>';
		}
	}
	anim[a].innerHTML = arr.join(' ');
}
let animHeading = document.querySelectorAll('.animimate-heading div');
for (let a = 0; a < animHeading.length; a++){
	let letters = animHeading[a].textContent.split('');
	let effects = ['fadeIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'shake', 'flash', 'pulse', 'zoomIn', 'rotateIn', 'jackInTheBox', 'zoomInDown', 'heartBeat', 'headShake'];
	let content = letters.map((val, i) => {
		let delay = Math.floor((Math.random() * 600) + 1);
		let rand = Math.floor(Math.random() * effects.length);
		if (val != " ") {
			return ('<span class="wow '+ effects[rand] + '" style="animation-delay: '+ delay + 'ms">'+ val +'</span>');
			} else {
			return (' &nbsp;');
		}
	});
	animHeading[a].innerHTML = "";
	for (let i = 0; i < content.length; i++) {
		animHeading[a].innerHTML += content[i];
	}
}
new WOW().init();

let anim = document.querySelectorAll('.animimate-heading');

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

let arr = anim[a].innerHTML.split(/\s+/);

let str = '';

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

if(arr[i]){

arr[i] = '<div>'+arr[i]+'</div>';

}

anim[a].innerHTML = arr.join(' ');

}

let animHeading = document.querySelectorAll('.animimate-heading div');

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

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

let effects = ['fadeIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'shake', 'flash', 'pulse', 'zoomIn', 'rotateIn', 'jackInTheBox', 'zoomInDown', 'heartBeat', 'headShake'];

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

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

let rand = Math.floor(Math.random() * effects.length);

if (val != " ") {

return ('<span class="wow '+ effects[rand] + '" style="animation-delay: '+ delay + 'ms">'+ val +'</span>');

} else {

return ('  ');

}

});

animHeading[a].innerHTML = "";

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

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

}

new WOW().init();

В массив effects можно добавить любые эфффекты из анимаций animate.css

Пример на AOS.js:

Анимированные буквы у заголовка с библиотекой AOS.js

Библиотека AOS - альтернатива WOW, которая позволяет анимировать элементы при прокрутке вниз и вверх. Другими словами, если вернуться к началу страницы, элементы перейдут в прежнее состояние и будут готовы к повторной анимации.

HTML:

<div class="animimate-heading-aos">Анимированные буквы у заголовка</div>

1	<div class="animimate-heading-aos">Анимированные буквы у заголовка</div>

CSS:

Добавляем на сайт библиотеку aos.css и стили для заголовка:

.animimate-heading-aos {
	text-align: center;
	font-weight: 500;
	font-size: 38px;
	line-height: 1.35;
	margin: 20px;
	text-transform: uppercase;
	color: #337AB7;
}
.animimate-heading-aos span {
	display: inline-block;
}
.animimate-heading-aos div {
	display: inline-block;
	padding: 0 2px;
}
@media screen and (max-width:767px) {
	.animimate-heading-aos {
		font-size: 24px;
	}	
}

.animimate-heading-aos {

text-align: center;

font-weight: 500;

font-size: 38px;

line-height: 1.35;

margin: 20px;

text-transform: uppercase;

color: #337AB7;

}

.animimate-heading-aos span {

display: inline-block;

}

.animimate-heading-aos div {

display: inline-block;

padding: 0 2px;

}

@media screen and (max-width:767px) {

.animimate-heading-aos {

font-size: 24px;

}

Еще один пример заголовка

JS:

Добавляем на сайт библиотеку aos.js и скрипт:

let animAOS = document.querySelectorAll('.animimate-heading-aos');
for (let a = 0; a < animAOS.length; a++){
	let arr = animAOS[a].innerHTML.split(/\s+/);
	let str = '';
	for(let i = 0; i < arr.length; i++)
	{
		if(arr[i]){
			arr[i] = '<div>'+arr[i]+'</div>';
		}
	}
	animAOS[a].innerHTML = arr.join(' ');
}
let animHeadingAOS = document.querySelectorAll('.animimate-heading-aos div');
for (let a = 0; a < animHeadingAOS.length; a++){
	let letters = animHeadingAOS[a].textContent.split('');
	let effects = ['fade', 'fade-up', 'fade-down', 'fade-left', 'fade-right', 'fade-up-right', 'fade-up-left', 'fade-down-right', 'fade-down-left', 'zoom-in'];
	let content = letters.map((val, i) => {
		let delay = Math.floor((Math.random() * 600) + 1);
		let dur = Math.floor((Math.random() * 1500) + 500);
		let rand = Math.floor(Math.random() * effects.length);
		if (val != " ") {
			return ('<span data-aos="'+ effects[rand] + '" data-aos-delay="'+ delay + '" data-aos-duration="'+ dur + '">'+ val +'</span>');
			} else {
			return (' &nbsp;');
		}
	});
	animHeadingAOS[a].innerHTML = "";
	for (let i = 0; i < content.length; i++) {
		animHeadingAOS[a].innerHTML += content[i];
	}
}
AOS.init();

let animAOS = document.querySelectorAll('.animimate-heading-aos');

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

let arr = animAOS[a].innerHTML.split(/\s+/);

let str = '';

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

{

if(arr[i]){

arr[i] = '<div>'+arr[i]+'</div>';

}

animAOS[a].innerHTML = arr.join(' ');

}

let animHeadingAOS = document.querySelectorAll('.animimate-heading-aos div');

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

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

let effects = ['fade', 'fade-up', 'fade-down', 'fade-left', 'fade-right', 'fade-up-right', 'fade-up-left', 'fade-down-right', 'fade-down-left', 'zoom-in'];

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

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

let dur = Math.floor((Math.random() * 1500) + 500);

let rand = Math.floor(Math.random() * effects.length);

if (val != " ") {

return ('<span data-aos="'+ effects[rand] + '" data-aos-delay="'+ delay + '" data-aos-duration="'+ dur + '">'+ val +'</span>');

} else {

return ('  ');

}

});

animHeadingAOS[a].innerHTML = "";

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

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

}

AOS.init();

В массив effects можно добавить любые эфффекты из анимаций aos.css:

Fade animations:

fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left

Zoom animations:

zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

Flip animations:

flip-up
flip-down
flip-left
flip-right

Slide animations:

slide-up
slide-down
slide-left
slide-right

Подробнее о библиотеке AOS можно посмотреть на github

Заключение:

Заголовок WOW

Заголовок AOS

Пример на WOW.js:

HTML:

CSS:

JS:

Пример на AOS.js:

HTML:

CSS:

JS:

Заключение:

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

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