Анимация без программных языков – такое возможно? Неужели в веб-разработке возможно обойтись без JavaScript и JQuery, используя только HTML и CSS?
В HTML уже давно
В гипертексте уже давно присутствует нативный элемент для простого перемещения содержимого, заключенного в тег <marquee>.
<p data-height="265" data-theme-id="0" data-slug-hash="pZqGBw" data-default-tab="html,result" data-user="atas1980" data-pen-title="pZqGBw" class="codepen">See the Pen <a href="https://codepen.io/atas1980/pen/pZqGBw/">pZqGBw</a> by Roman (<a href="https://codepen.io/atas1980">@atas1980</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
Тег позволяет анимировать не только текст, но и картинки, таблицы и даже элементы форм.
<p data-height="265" data-theme-id="0" data-slug-hash="KBbOPG" data-default-tab="html,result" data-user="atas1980" data-pen-title="Pen2" class="codepen">See the Pen <a href="https://codepen.io/atas1980/pen/KBbOPG/">Pen2</a> by Roman (<a href="https://codepen.io/atas1980">@atas1980</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
При этом содержимое контейнера может двигаться не только горизонтально, но и вертикально. Для этого достаточно изменить значение атрибута direction.
<p data-height="265" data-theme-id="0" data-slug-hash="gjqyXX" data-default-tab="html,result" data-user="atas1980" data-pen-title="Pen3" class="codepen">See the Pen <a href="https://codepen.io/atas1980/pen/gjqyXX/">Pen3</a> by Roman (<a href="https://codepen.io/atas1980">@atas1980</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
Таким же образом проигрываются и изображения. В результате вы получаете самую простую галерею, код которой занимает не более десяти строк.
<body>
<marquee behavior="scroll" direction="down" loop="-1" style="background:#999999">
<div>
<img src="рис/1.jpg" alt="img1"/>
<img src="рис/2.jpg" alt="img2"/>
<img src="рис/3.jpg" alt="img3"/>
<img src="рис/4.jpg" alt="img4"/>
<img src="рис/5.jpg" alt="img5"/>
</div>
</marquee>
Основные атрибуты тега и их значения
За анимацию (прокрутку) в теге <marquee> отвечают только несколько его атрибутов:
1) behavior – задает тип движения содержимого контейнера. Принимаемые значения:
· alternate – перемещение происходит между левым и правым краями контейнера.
· scroll – движение в направлении, которое задано в атрибуте direction. Перемещение происходит «по кругу».
· slide – перемещение в направлении, установленном в direction. При этом движение прекращается при достижении элементом края контейнера.
<p data-height="265" data-theme-id="0" data-slug-hash="QBYXEd" data-default-tab="css,result" data-user="atas1980" data-pen-title="Pen4" class="codepen">See the Pen <a href="https://codepen.io/atas1980/pen/QBYXEd/">Pen4</a> by Roman (<a href="https://codepen.io/atas1980">@atas1980</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
2) direct – отвечает за направление, в котором будет двигаться содержимое тега <marquee>. Принимаемые значения:
· up.
· down.
· left.
· right.
<p data-height="265" data-theme-id="0" data-slug-hash="xJMorQ" data-default-tab="css,result" data-user="atas1980" data-pen-title="Pen5" class="codepen">See the Pen <a href="https://codepen.io/atas1980/pen/xJMorQ/">Pen5</a> by Roman (<a href="https://codepen.io/atas1980">@atas1980</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
Минималистично и не совсем валидно!
Несмотря на всю прелесть тега <marquee>, он обеспечивает минимальный функционал. В нем мало «рычажков» для настройки. Да и сама предлагаемая анимация на деле оказывается лишь перемещением в одну из четырех сторон. Кроме этого <marquee> в штыки воспринимается большинством валидаторов кода.
Говорить о том, что на основе только данного тега (без программного языка) можно реализовать хотя бы одно полноценное решение, глупо. Но это признак того, что в старом добром HTML еще скрыто множество неизведанного.
Это первая часть «двухсерийной» эпопеи о нативных возможностях анимации HTML и CSS. В следующий раз мы изучим, какие нововведения появились в третьей версии каскадных таблиц стилей. Материал выйдет уже совсем скоро. Так что далеко не отходим от своих мониторов!