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

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

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

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

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

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

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

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

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

Детали направления-шатёр

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

шатра-блок

л влево вправо
РТЛ вправо влево
до вниз

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

Браузерная поддержка Marquee Properties

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

CSS3
Поставщик Префикс







overflow-x: marquee-line; overflow-x: -webkit-marquee;
шатровым стиль -webkit-шатер стиле
шатра-игра-счетчик -webkit-шатёр-повторение
направление выделения: вперед | назад; -webkit-marquee-direction: вперед | назад;
шатровым скорость -webkit-шатер скорость
нет эквивалента -webkit-шатёр-инкремент

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

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

 {
ширина: 200 пикселей; высота: 50 пикселей; пробел: nowrap;
переполнение: скрытое;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: вперед;
-webkit-marquee-style : scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: small;
-webkit-marquee-repeating: 5;
overflow-x: линия выделения;
направление выделения: вперед;
стиль выделения: прокрутка;
скорость выделения: нормальная;
число воспроизведения рамки: 5;
}

Оцените статью
Solutics.ru
Добавить комментарий