Увидел на одном сайте прикольную анимацию, при наведении на строку, на каждой букве по отдельности появляется анимация, буква меняют цвет и пропорции свои, очень грациозно, прямо как мыльные шарики))
Хочу сделать подобное, при наведении на букву определенную она будет переворачиваться, например.
Не знаю как перебрать строку так, чтобы можно было на каждую повесить событие.
Вот, что мне в голову пришло, но чет мне кажется.. это не правильно)) хД)
<h3 id="title">Основная информация</h3>window.onload = function title() {
let title = document.getElementById('title').textContent;
let arr = [];
for (var i = 0; i < title.length; i++) {
arr = title.split('', title.length);
var x = arr.indexOf(' ', 0);
arr.splice(x, 1);
}
console.log(arr)
};
Вот такой получаю массив
(18) ["О", "с", "н", "о", "в", "н", "а", "я", "и", "н", "ф", "о", "р", "м", "а", "ц", "и", "я"]
Дальше думаю перебрать массив и перезаписать каждый символ массива в span, и после все вместе вставить в заголовок, вместо текста. Получится:
<h3 id="title"><span>О</span><span>с</span><span>н</span><span>о</span>..</h3>
после перебрать все span"ы и повесить на onmouseover анимацию.
Как вообще такое делается?
