Анимированная бегущая строка текста в 3D на чистом CSS

Анимированная бегущая строка текста в 3D на чистом CSS

От автора: на протяжении долгого времени я горел желанием создать бегущую анимированную строку текста, которая бы изгибалась на углах. Есть несколько способов сделать такую строку, среди которых WebGL, но мне хотелось найти настолько простой способ, чтобы его можно была написать только на HTML и CSS.

Острые углы

Базовая разметка состоит из двух div с одинаковым контентом, которые находятся внутри другого контейнера

Второй div является копией первого, но у него есть атрибут aria-hidden=»true», который делает его недоступным для приложений. Таким образом, текст читается один раз.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Внутренние DIV’ы размещены под углом друг к другу при помощи 3D ротации, а родительскому контейнеру задано подходящее значение свойства perspective. У родителя также задано свойство font-size: 0. Это сделано для того, чтобы внутренние элементы со свойством display: inline-block отображались без каких-либо зазоров:

Внутренние div’ы повернуты под немного разными углами при помощи свойства transform-origin. Также внутренним блокам задан отличающийся фон (для симуляции направления падения света) и значения цвета.

Текст в блоках помещен в тег span, который растянут для того, чтобы вместился весь текст. Обрезание текста, когда он выходит за рамки блоков, имитируется при помощи свойства overflow: hidden:

Бегущая строка

Тегов span несколько штук, и они занимают разные позиции: текст справа сдвинут на 30rem (т.е. на ширину контейнера div, чтобы текст вышел за пределы видимой области). Текст же слева сдвинут вправо уже на две ширины блока, а также ему задана тонкая тень text-shadow.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Если родительским блокам div не задать свойство overflow:hidden и сделать текст разных цветов, то вы получите примерно следующее:

Обе строки текста необходимо анимировать. Мы не ставим задержку на левую строку текста, вместо этого обе строки двигаются одновременно, подходя к перегибу в один и тот же момент:

Задана линейная функция анимации, текст и не ускоряется и не замедляется.

Адаптивность

Данная техника будет работать вне зависимости от изменения трех параметров, перечисленных ниже. В этом вы можете убедиться в демо на CodePen:

Текст

Значение перспективы

Угол наклона DIV’ов

Тем не менее, код плохо работает на экранах маленькой ширины: текст становится меньше, а перспектива сильно увеличивается, что затрудняет чтение бегущей строки. Поэтому если ширина видимой области меньше 993px, мы заменяем презентацию на 2D версию и показываем только один из DIV’ов:

Интересный факт заключается в том, что если задать элементу свойство display: none, то анимация полностью прекратится и возобновится только, когда элемент станет снова видимым. По этой причине я воспользовался другой техникой для сокрытия элементов: второму div’у было задано свойства opacity и htight в 0. Таким образом, при растяжении или сужении области просмотра анимация не будет останавливаться.

Заключение и улучшения

В общем и целом, я доволен результатом. В скором времени надеюсь применить данную технику на моих CSS синемаграфах. Однако в данную методику можно внести пару улучшений, большая часть из которых связана с дублированием контента. JavaScript может легко дублировать элементы и текст, но намного лучше реализовать это при помощи псевдоэлементов.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree