0 просмотров

Создание прокручиваемого контента в HTML5 и CSS3 без MARQUEE

Женщина смотрит на стену с кодом

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

Те из вас, кто писал HTML в течение длительного времени, возможно, помнят этот элемент. Это был специфичный для браузера элемент, который создавал баннер с прокручивающимся текстом на экране. Этот элемент никогда не добавлялся в спецификацию HTML, и его поддержка сильно различалась в разных браузерах. У людей часто были очень сильные мнения об использовании этого элемента — как положительные, так и отрицательные. Но независимо от того, любили вы его или ненавидели, он действительно служил для того, чтобы сделать видимым контент, выходящий за границы окна.

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

Новые свойства CSS3

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

стиль переполнения
Свойство overflow-style (которое мы также обсуждали в статье CSS Overflow) определяет предпочтительный стиль для содержимого, выходящего за пределы блока содержимого. Если вы установите значение marquee-line или marquee-block, ваш контент будет скользить влево/вправо (marquee-line) или вверх/вниз (marquee-block).

шатровый стиль
Это свойство определяет, как содержимое будет отображаться (и исчезать). Возможные варианты: прокрутка, слайд и чередование. Прокрутка начинается с содержимого, полностью выходящего за пределы экрана, а затем перемещается по видимой области до тех пор, пока оно снова полностью не исчезнет с экрана. Слайд начинается с содержимого, полностью выходящего за пределы экрана, а затем перемещается до тех пор, пока содержимое полностью не переместится на экран и на экране больше не останется содержимого для скольжения. И, наконец, поочередно перебрасывает содержимое из стороны в сторону, скользя туда-сюда.

шатер-игра-счет
Одним из недостатков использования элемента MARQUEE является то, что выделение никогда не останавливается. Но с помощью свойства стиля marquee-play-count вы можете настроить бегущую строку для включения и выключения контента определенное количество раз.

шатер-направление
Вы также можете выбрать направление, в котором содержимое должно прокручиваться на экране. Значения вперед и назад основаны на направленности текста, когда стиль переполнения — это выделенная линия, и вверх или вниз, если стиль переполнения — это выделенный блок.

Детали направления бегущей строки

стиль переполненияЯзыковое направлениевпередзадний ход
линия выделениялтроставилПравильно
ртлПравильнооставил
шатер-блоквверхвниз

шатер-скорость
Это свойство определяет, насколько быстро содержимое прокручивается на экране. Значения медленные, нормальные и быстрые. Фактическая скорость зависит от контента и отображающего его браузера, но значения должны быть медленными, медленнее, чем обычно, что медленнее, чем быстро.

Браузерная поддержка свойств бегущей строки

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

CSS3Префикс поставщика
переполнение-x: выделенная линия;переполнение-x: -webkit-marquee;
шатровый стиль-webkit-шатер-стиль
шатер-игра-счет-webkit-шатер-повторение
направление выделения: вперед|назад;-webkit-marquee-direction: вперед|назад;
шатер-скорость-webkit-marquee-скорость
нет эквивалента-webkit-marquee-increment

Последнее свойство позволяет вам определить, насколько большими или маленькими должны быть шаги при прокрутке содержимого на экране в области выделения.

Чтобы бегущая строка работала, вы должны сначала разместить значения префикса поставщика, а затем следовать за ними со значениями спецификации CSS3. Например, вот CSS для бегущей строки, которая прокручивает текст пять раз слева направо внутри блока размером 200×50.

ширина: 200 пикселей; высота: 50 пикселей; пробел: nowrap;
переполнение: скрыто;
переполнение-x:-webkit-marquee;
-webkit-marquee-direction: вперед;
-webkit-marquee-style: прокрутка;
-webkit-marquee-скорость: нормальная;
-webkit-marquee-increment: маленький;
-webkit-marquee-repetition: 5;
переполнение-x: выделенная линия;
направление выделения: вперед;
стиль выделения: прокрутка;
бегущая строка: нормальная;
количество игр в шатре: 5;
>

голоса
Рейтинг статьи
Статья в тему:  Краткое содержание сюжета Алой буквы
Ссылка на основную публикацию
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
Adblock
detector