Красивая типографика на сайте крайне важна, мы уже не раз подчеркивали необходимость уделять больше внимания этому элементу на сайте. Сегодня мы хотели бы поделиться с вами анимацией для типографики. Мы полностью анимируем все элементы при загрузке страницы, что вдохнет жизнь в страницу. мы будем использовать библиотеки anime.js для анимации и Charming для эффектов текста. Увидев интересный подход  Дианы Хлевняк  «Топография градиента», мы подумали, что было бы интересно оживить эти градиентные слои установленной формы интересным способом.

 

Для этого мы создали небольшую раскладку, которая имеет несколько форм, распространяемых на странице. Мы используем переменные CSS, grid и flexbox для демонстрации, поэтому, пожалуйста, обратите внимание, что работать будет только в последних версиях браузера. Смотрите также, бесплатные и не только, шаблоны для вашего сайта:

Органические формы состоят из слоев, где каждый из них имеет одинаковый градиент, но мы уменьшаем непрозрачность заливки. Это создает интересный вид и при анимировании заполняет весь экран полупрозрачными слоями, пока он не станет полностью непрозрачным после того, как последний слой увеличится. При этом другие формы уменьшаются.

Посмотрите несколько скриншотов:

Мы надеемся, что вам понравится этот эффект и вы его примените в своих проектах!

Основано на:

  • На основе публикации “градиент рельефа” от Diana Hlevnjak
  • Аниме.js от Julian Garnier
  • Charming от Yuan Qing

Материал предоставлен сайтом tympanus и представлен для ознакомления. Мы можете использовать данный урок в своих целях. А какой эффект вы бы хотели увидеть в следующий раз у нас на сайте?