Часто свое вдохновение я черпаю просматривая сайты номинированные на https://www.awwwards.com. Недавно я увидел очередной номинированный сайт — https://bearideas.fr, и возникла идея разобрать некоторые технологии используемые при создании верстки этого сайта, тем самым предоставляя визуальное представление заказчику, тех технологий, которые я использую в своей работе, а также дать полезную информацию своим коллегам. Ниже я подробнее опишу технологии, а также укажу где они применяются на данном сайте, их описание, преимущества и возможные недостатки.
SplitText Text Animation (GSAP) — https://greensock.com/SplitText. SplitText — простая в использовании утилита JavaScript, которая позволяет разделить текст HTML на символы, слова и строки, чрезвычайно гибкая и работает в IE8. Хотя SplitText, естественно, подходит для создания эффектов анимации текста HTML5, с помощью средств анимации GreenSock, он не имеет никаких зависимостей от GSAP, jQuery или других библиотек.
SplitText целенаправленно использует divы вместо spanов, чтобы максимизировать совместимость в широком диапазоне браузеров для многочисленных эффектов анимации. Разделение текста на символы, слова и строки — это просто new SplitText («#myTextID»).
Каждый элемент анимации разбивки текста может иметь свое положение: относительное или абсолютное. Если для каждого из блоков, на которые мы разбили текст, задано абсолютное позиционирование, то весь блок с текстом перестает быть респонсив (не будет менять свои размеры при изменении размера окна браузера, а будет обрезаться). Если же каждому блоку будет задано относительное позиционирование, то при изменении размера окна браузера блок с текстом будет изменять свой размер. Каждый объект SplitText хранит массивы всех разделенных элементов. Например, mySplitText.words вернет массив всех div, которые оборачивают каждое слово.
SplitText позволяет вернуть текст в исходное состояние до разделения с помощью метода revert (). Вы можете указать новый класс, который будет добавлен к каждому разделяемому элементу, а также добавить класс с автоматическим добавлением, например .word1, .word2, .word3 и т. д.. Вам не нужно вручную вставлять теги, SplitText отличает естественные разрывы строк. SplitText не форсирует неразрывные пробелы в div, как многие другие решения в Интернете.Среди недостатков можно выделить то, что SplitText не предназначен для работы с узлами SVG и этот дополнительный функционал платный.
Библиотека GreenSock доступна на условиях лицензии “No Charge”, т.е. вы можете использовать этот код бесплатно в коммерческих или некоммерческих приложениях, веб-сайтах, играх, компонентах и другом программном обеспечении до тех пор, пока с конечного пользователя не будет взиматься какая-либо плата за использование вашего продукта или доступ к любой его части.
SVG Animation
DrawSVGPlugin — https://greensock.com/drawSVG.
Позволяет постепенно раскрывать(reveal) (или скрывать hide) ход SVG. Также вы можете анимировать наружу от центра, или любого положения /сегмента. Это достигается контролем таких CSS свойств как stroke-dashoffset и stroke-dasharray. Поскольку DrawSVGPlugin является частью GSAP, вы можете использовать его в любой анимации TweenLite, TweenMax, TimelineLite или TimelineMax.
Все функции, которые вы любите в GSAP (средства управления временем выполнения, обратные вызовы, easing, overwrite management, вложенность), будут работать с вашими фантастическими анимациями SVG.
“DrawSVGPlugin — это бонусный плагин для всех членов клуба GreenSock. Для разработчиков библиотеки это способ сказать «Спасибо» тем, кто подпитывает инновации в GreenSock”. Данный плагин опять таки платный.
Полностью функциональная версия DrawSVGPlugin есть на Codepen https://codepen.io/collection/DYmKKD/
Все функции SVG будут работать в IE9 + (IE8 не поддерживает SVG) и всех других основных настольных и мобильных браузерах, если не указано иное.
На сегодня все, надеюсь был вам полезен. Если вам понравилась статья и вы хотите увидеть подобные обзоры инструментов для других сайтов, подписывайтесь и следите за обновлениями.
До связи, Александр Рыбка.
