- Натхнення для буквених ефектів за допомогою anime.js
- WWF Tiger Challenge
- Petar Stojakovic
- YEOSH
- Unitasking
Краща анімаційна типографіка у всьому інтернеті. Приклади в попередній публікації про фреймворки для анімації тексту демонструють відмінні способи прокачування навичок анімації, і як ви знаєте, це тільки приклади коду, які вже закодованих за вас. Але де знайти натхнення, щоб створити свою власну анімаційну напис? Не турбуйтеся, ми прикрили ваш тил. Ми, перерахували найпотужнішу анімацію типографіку, яка допоможе вашому сайту виділитися. Спробуйте оживити його, якщо зможете!
Натхнення для буквених ефектів за допомогою anime.js
У жовтні 2016 року, Codrops об'єднали anime.js з трьома іншими фреймворками, щоб створити навчальний посібник з кодування простих і творчих буквених ефектів. Результат являє собою набір з 18 елегантно анімованих заголовків і підсилень повідомлення, які інакше загубилися б на тлі. Це, безумовно, самі надихаючі приклади текстової анімації тут.
WWF Tiger Challenge
Сайт WWF's Run4Tiger, був розроблений Hungry Boys , Креативним агентством в Москві. Він спритно перетворює сильне типографським повідомлення в зображення біжить тигра візуально повідомляючи про проблему зникаючих тигрів, яка може бути вирішена шляхом застосування подібних позитивних рішень в майбутньому. Анімація побудована з використанням HTML5, JavaScript, Canvas і запускається користувачем при прокручуванні веб-сайту вниз. Це відмінний приклад використання анімації тексту для зміцнення бізнес-повідомлення.
Ось як творець проекту Ксенія Апресян описує його на творчому блозі :
Ми об'єднали використання трекпада і скролінгу, щоб посилити рух вперед, щоб малювати паралелі з допомогою бігу і нарешті зробити щось по-справжньому важливе для підтримки цих вимираючих видів, які самі по собі - вельми хороші атлети!
Petar Stojakovic
Петар Стояковіч - дизайнер цифрових продуктів і арт-директор, який керує власною невеликою студією в Сербії. Незважаючи на те, що команда невелика, дизайн його веб-сайту дуже вражаючий і використовує передові веб-технології. У наведеному вище заголовку використовується фреймворк для анімації букв, згаданий раніше, і є чудовим прикладом того, як використовувати вже існуючий фреймворк для створення вашої власної персоналізованої анимированной типографіки.
YEOSH
Веб-сайт YEOSH відмінно ілюструє те, наскільки простим може бути поступове зникання тексту над зображенням. У цитаті використовується властивість CSS transform для переміщення тексту від низу до верху, коли користувач прокручує до відповідної частини сторінки.
Unitasking
Веб-сайт Трента Уолтона по справжньому особливий. Будучи веб-дизайнером і розробником з інтересом до типографике, він створює унікальні заголовки для кожного з постів в блозі на його веб-сайті. У наведеному вище прикладі він використовує CSS і JavaScript для того, щоб 'I' в слові 'Unitasking' виділялася при наведенні курсору миші і перетворювалася в '1'. При тому, що це виглядає дуже симпатично, намір стоїть позаду ефекту пов'язано зі змістом статті. І як ніби цього було недостатньо, так його анімовані заголовки виглядає чудово у всіх браузерах і завжди чуйні. Як це розумно, чорт забирай!
VIA
Але де знайти натхнення, щоб створити свою власну анімаційну напис?