Порада: Трансформація окремих символів за допомогою CSS і JS

28

Від автора: якщо ви шукайте цікавий ефект для свого нового проекту, тоді наш рада має допомогти вам. Сьогодні ми розберемо, як трансформувати окремі символи в реченні. Для навігації усередині обраної пропозиції і включення анімації на кожній букві у нашому прикладі ми вдалися до допомоги JQuery. Проте ми використовуємо CSS анімацію, а не JQuery.

З чого почати

Для початку нам потрібно JQuery. Після підключення JQuery можна додавати нашу JS функцію в функцію document.ready().

jQuery(document).ready(function() {
// Весь код буде тут
});

Для роботи нам потрібно додати найпростішу розмітку. Ми додамо в HTML файл на кілька рядків тексту з класом .sentence і стандартну кнопку.

Fancy Slide In Text

Embrance the fanciness!

Click to Animate

Готуємо нашу пропозицію

Наш приклад просіює всі елементи розмітки на клас .sentence. Після відбору елементів їх проганяють в циклі для отримання тексту і створення підрядка. За один прогін з пропозиції витягується один символ. Всі літери обертаються в тег span, щоб пізніше ми могли анімувати їх окремо.

Також ми повинні перевіряти пропозицію на наявність порожніх символів (тобто прогалин « »). Прогалини ми пропускаємо, так як нам потрібно анімувати тільки видимі літери.

Після просіювання тексту ми повертаємо отриманий контент назад у речення, замінюючи звичайний текст символи в тегах span.

// Пробегаемся за пропозицією і загорнути кожен символ у span
function setUpCharacters() {
var $sentences = $(‘.sentence’);
// Пробегаемся по кожній пропозиції
$sentences.each(function() {
var $sentence = $(this);
var newContent = «;
// Просіваємо всі символи пропозиції
for (i = 0; i < $sentence.text().length; i++) {
var substring = $sentence.text().substr(i, 1);
// Якщо символ є, загорнути його в тег
if (substring != «») {
newContent += ‘‘ + substring + ‘‘;
} else {
newContent += substring;
}
}
// Замінюємо контент
$sentence.html(newContent);
});
}
setUpCharacters();

Запускаємо анімацію

Ось і весела частина статті. Ми пробіжимося по кожному елементу .sentence і його дочірнім тегам span і анимируем їх. Функція нижче насправді не запускає анімацію, вона просто додає клас .active до елементів. Після додавання активного стану, ми можемо прикріпити до символів будь-яку CSS анімацію, про який можна тільки мріяти!

// Пробегаемся за пропозицією і додаємо активний стан
function triggerCharacters() {
var sentenceCounter = 0;
var sentenceDelay = 600;
$(‘.sentence’).each(function() {
var $sentence = $(this);
// Робимо це для кожної пропозиції
setTimeout(function() {
var $spans = $sentence.find(‘span’);
var spanCounter = 0;
var spanDelay = 75;
// Проходимо по всіх span і запускаємо їх
$spans.each(function() {
var $span = $(this);
// Встановлюємо timeout для запуску span-ів з затримкою
setTimeout(function() {
$span.toggleClass(‘active’);
}, (spanCounter * spanDelay));
spanCounter++;
});
}, (sentenceCounter * sentenceDelay));
sentenceCounter++;
});
}
// У нашому прикладі анімація запускається натисканням на кнопку
$(‘.button’).on(‘click’, function() {
triggerCharacters();
});

Розберемося, що тут відбувається:

Наша пропозиція плавно з’являється з затримкою для створення ефекту шахового порядку. Кожному символу задається початкова затримка в 600ns, яка використовується зовнішньої функцією setTimeout().

Ми знаходимо і проганяємо в циклі всі елементи .sentence і забираємо все span’и. Ставимо нову затримку, на цей раз для кожного символу. Так кожен span буде з’являтися окремо.

Далі спрацьовує внутрішня функція setTimeOut() і анімує кожен символ.

У нашому прикладі анімація запускається натисканням кнопки. Для цього ми знаходимо елемент .button і чіпляємо на нього функцію triggerCharacters(). Функцію можна прив’язати до будь-якого іншого елементу або ж запускати після завантаження сторінки, тут все залежить від вас.

Сама анімація

Всім span’ам в реченні ми задаємо базові стилі, а анімацію застосовуємо тільки при наявності класу .active.

.sentence span {
opacity: 0;
position: relative;
display: inline-block;
}
.sentence span.active {
animation: bounceUp 600ms ease 0ms 1 normal both;
}

Ми застосовуємо цікаву анімацію до кожного span тегу. Ми зрушуємо позицію елемента спочатку вгору, потім вниз і у вихідне положення.

/* Стрибок вгору */
@keyframes bounceUp {
0% {
transform: translate3d(0px 0px 0px);
opacity: 0;
}
50% {
transform: translate3d(0px, -50px, 0px);
opacity: 0.7;
}
80% {
transform: translate3d(0px 20px, 0px);
opacity: 1;
}
100% {
transform: translate3d(0px 0px 0px);
opacity: 1;
}
}

При натисканні на кнопку перше речення стає активним, і всі його span’и приходять в рух. З невеликою затримкою активується друге речення з його тегами span.

Анімація в дії

Нижче я дав посилання на CodePen демо, де ви можете подивитися на роботу нашого прикладу. Покопатися в анімації і створіть свій власний ефект! Анімація кожного символу в рядку від SitePoint (@SitePoint) на сайті CodePen.

Про доступність

Після того, як ми розбили пропозицію на окремі символи, є ймовірність, що у скрін рідерів виникнуть проблеми з читанням слів. Щоб такого не виникло, можна повідомити скрін рідера, що це пропозиція з допомогою атрибута aria-label. А потім додати кожному span’у атрибут aria-hidden=»true», щоб приховати ці теги від нього. Таким чином, скрін рідер повинен правильно читати анимируемое пропозицію і не помічати теги span. Розмітка після обробки JS виглядає наступним чином: