Ние наскоро се намери JQuery плъгин. което го прави лесно да се създаде ефекта на писането на уебсайта. Този плъгин се нарича typed.js, това е с отворен код и може да бъде изтеглен от Github. В този урок ще ви обясни по-подробно за този плъгин, както и ви показва как да създадете ефекта на писането само с анимации CSS.
Монтаж на този плъгин е много проста, всичко, което трябва да направите - свързване плъгин приложение и използвайте следния код:
Когато дадена уеб страница се зарежда, първо започнете да пишете, първо изречение, а след него - втората. Можете да настроите скоростта на печат, минавайки анимацията в милисекунди.
Ние създадохме един пример, за да покажа как изглежда този ефект.
Ако е необходимо да се създаде такъв ефект, можете да изтеглите typed.js по проекта от Github.
Използването animatsiiCSS
typed.js плъгин - лесен и интересен плъгин JQuery, но тя все още е плъгин JQuery, така че да го използвате, е необходимо да се свържете с приложението, което ще изисква повече ресурси и увеличаване на броя на HTTP заявки към страницата. Не би ли някакво значение, ако това е единственият начин да се предизвика такъв ефект, но ефектът от писане може да бъде създаден с помощта само на CSS.
CSS анимация ви позволява да създаде временна функция анимация. който ще покаже, анимацията, тъй като, за да се развие до края. Едно време функции, стъпала () (стъпки), ви позволява да определите броя на кадрите, които да бъдат използвани от анимацията, това ще попречи на обичайната гладка анимация и да се създаде блок, точно това, което имаме нужда, за да пишете.
Използването на стъпки () функция, е възможно да се създаде анимации, които само ще увеличи размера на елемента 0 до края на първата алинея.
Първо, ние се създаде точка, че искаме да се определи ефекта на писане:
С CSS код необходимо да се добавят анимация, като се започне с ширината на работа раздел, така че анимацията е ограничение за разширяване. След това добавете скрит преливник имот, когато анимацията променя размера на параграф 0, текстът става невидим. Накрая добавете вида на анимационни стъпки с времева функция ():
Анимация ще увеличи размера на параграф 30em на от 0 до 50 кадъра и така се създават ефекта на писане.
Вижте един пример, за да видите как работи.
Демонстрация на време функция CSS стъпки
Превод - Dezhurko
Свързани статии