Нещодавно ми виявили плагін jQuery. який дозволяє легко створити ефект набору тексту на веб-сайті. Цей плагін називається typed.js, у нього відкритий вихідний код, і його можна завантажити з Github. У цьому уроці ми розповімо детальніше про це плагін, а також покажемо, як створити ефект набору тексту за допомогою тільки анімацій CSS.
Установка цього плагіна дуже проста, все, що треба зробити, - підключити плагін в додаток і використовувати наступний код:
Коли веб-сторінка завантажиться, спочатку почне друкуватися перше речення, а після нього - друге. Можна задавати швидкість друку, передаючи тривалість анімації в мілісекундах.
Ми створили приклад, щоб показати, як виглядає цей ефект.
Якщо Вам знадобиться створити такий ефект, можете завантажити проект typed.js з Github.
Використання анімацііCSS
Плагін typed.js - легкий і цікавий плагін jQuery, але це все ж плагін jQuery, так що, щоб ним скористатися, його потрібно підключити в додаток, що потребують більше ресурсів і збільшить кількість запитів HTTP на сторінку. Це було б не особливо важливо, якщо б це був єдиний спосіб створити такий ефект, але ефект набору тексту можна створити, використовуючи тільки CSS.
Анімація CSS дозволяє створити тимчасову функцію анімації. яка вкаже анімації, як їй розвиватися до кінця. Одна з тимчасових функцій, steps () (кроки), дозволяє задавати кількість кадрів, які буде використовувати анімація, це відключить звичну плавну анімацію і створить більш блочну, як раз те, що треба для набору тексту.
Використовуючи функцію steps (), можна створити анімацію, яка буде тільки збільшувати розмір елемента від 0 до кінця абзацу.
Для початку створимо абзац, яким хочемо задати ефект набору тексту:
За допомогою коду CSS додамо необхідну анімацію, почнемо з завдання ширини параграфа, щоб у анімації був межа розширення. Після цього додамо властивість приховування переповнення, щоб коли анімація змінювала розмір абзацу на 0, текст ставав невидимим. І, нарешті, додамо тип анімації з тимчасової функцією steps ():
Анімація буде збільшувати розмір абзацу від 0 до 30em за 50 кадрів, таким чином створюючи ефект набору тексту.
Подивіться приклад, щоб побачити, як це працює.
Демонстрація роботи тимчасової функції CSS steps
Переклад - Вартівня