Креирање Сцроллабле Цонтент-а у ХТМЛ5 и ЦСС3 Без МАРКУЕЕ

Они који сте писали ХТМЛ дуго времена могу се сетити елемента. Ово је био елемент специфичан за претраживач који је креирао банер скроловања текста преко екрана. Овај елемент никада није додан у ХТМЛ спецификацију, а подршка за њега вариирала је широко у свим претраживачима. Људи су често имали веома снажна мишљења о употреби овог елемента - позитивног и негативног. Али да ли сте га волели или мрзили, то је служило сврси стварања садржаја који је прекривио границе кутије видљивим.

Дио разлога због кога га претраживачи нису никада у потпуности спровели, осим јаког личног мишљења, био је то што се сматра визуелним ефектом и као такав не би требало дефинисати ХТМЛ-ом, који дефинише структуру. Уместо тога, визуелне или презентацијске ефекте треба управљати ЦСС. ЦСС3 додаје маркуее модул како би контролисао како претраживачи додају ефекат маркуее елементима.

Нове ЦСС3 својства

ЦСС3 додаје пет нових својстава како би вам помогао да контролишете како се ваш садржај приказује у маркуее-стиле стиле-стиле, маркуе-стиле, маркуее-плаи-цоунт, маркуее-дирецтион и маркуее-спеед.

стил преливања
Својство преливног стила (који сам такође разматрао у чланку ЦСС Оверфлов) дефинише жељени стил за садржај који прелива кутију са садржајем. Ако поставите вредност на маркуее-лине или маркуее-блок, ваш садржај ће се померати у и излази на лево / десно (маркуе-лине) или горе / доље (маркуее-блоцк).

шарени стил
Ова својина дефинише како ће се садржај пребацити у поглед (и излаз).

Опције су померање, клизање и алтернативно. Скроловање почиње са екрана потпуно искљученог екрана, а затим се помиче преко видљивог подручја све док се потпуно не искључи екран. Слајд почиње са садржајем потпуно искљученим екраном, а затим се помера док се садржај не пресели на екран и нема више садржаја који је остављен да се клизи на екрану.

На крају, алтернативни одбија садржај са друге стране, клизајући напред и назад.

маркуее-плаи-цоунт
Један од недостатака коришћења елемента МАРКУЕЕ је тај да се марка никад не зауставља. Али са својственим карактеристикама маркуее-плаи-цоунт можете подесити маркицу да бисте у одређено време враћали и искључивали садржај.

маркуее-дирецтион
Такође можете да изаберете правац којим се садржај треба померати на екрану. Вредности напред и назад су засноване на правовремености текста када је преливни стил маркуе-лине и горе или доље када је преливни стил маркуее-блоцк.

Детаљи о смеровима

стил преливања Лангуаге Дирецтион напред обратно
маркуее-лине лтр лево јел тако
ртл јел тако лево
маркуее-блоцк уп доле

маркуее-спеед
Ова особина одређује колико брзо се садржај помиче на екрану. Вредности су споре, нормалне и брзе. Стварна брзина зависи од садржаја и прегледача који га приказује, али вриједности морају бити споре је спорије од нормалне, што је спорије од брзог.

Бровсер подршка Маркуее Пропертиес

Можда ћете морати да користите префиксу произвођача како бисте добили елементе ЦСС маркуее-а за рад. Оне су следеће:

ЦСС3 Вендорски префикс
прелив-к: маркуе-лине; прелив-к: -вебкит-маркуее;
шарени стил -вебкит-шминка-стил
маркуее-плаи-цоунт -вебкит-маркуее-понављање
смер вожње: напред | уназад; -вебкит-маркуее-дирецтион: форвард | назад;
маркуее-спеед -вебкит-маркуее-брзина
без еквивалента -вебкит-маркуее-инцремент

Последња својства вам омогућавају да дефинишете колико ће бити великих или малих корака како садржај буде померљив на екрану у маркуее-у.

Да би ваш маратон могао да ради, прво би требало да поставите претпостављене вриједности произвођача, а затим их пратите вриједностима спецификације ЦСС3. На примјер, овдје је ЦСС за маркуее који помјера текст пет пута с лијеве на десно унутар 200к50 бок-а.

{
ширина: 200пк; висина: 50пк; бело-простор: сада;
прелив: сакривен;
прелив-к: -вебкит-маркуее;
-вебкит-маркуее-дирецтион: форвард;
-вебкит-маркуее-стиле: скрол;
-вебкит-маркуее-брзина: нормална;
-вебкит-маркуее-инцремент: мали;
-вебкит-маркуее-понављање: 5;
прелив-к: маркуе-лине;
маркуее-дирецтион: форвард;
маркуее-стиле: сцролл;
маркуее-спеед: нормал;
маркуее-плаи-цоунт: 5;
}