Тыя з вас , хто пісаў HTML ў працягу доўгага часу можа ўспомніць элемент. Гэта браузерная спецыфічны элемент, які стварыў банэр пракруткі тэксту па экране. Гэты элемент не быў дададзены ў спецыфікацыю HTML і падтрымку яго адрозніваліся ва ўсіх браўзэрах. Людзі часта мелі вельмі моцныя меркаванні наконт выкарыстання гэтага элемента - як станоўчых, так і адмоўных. Але ці любіце вы ці ненавідзелі яго, гэта было служыць мэтамі стварэння кантэнту, перавысіўшы мяжой вокны бачнай.
Адной з прычын, яна ніколі не была цалкам рэалізавана ў браўзэрах, акрамя моцнага асабістага меркавання, тое, што лічыцца візуальны эфект і, як такое, яно не павінна быць вызначана ў HTML, які вызначае структуру. Замест гэтага, візуальныя або прэзентацыйныя эфекты павінны кіравацца CSS. І CSS3 дадае намёт модуля для кіравання , як браўзэры дадаць намёт эфекту да элементаў.
Новыя ўласцівасці CSS3
CSS3 дадае пяць новых ўласцівасці , каб дапамагчы кантраляваць , як ваш кантэнт адлюстроўваецца ў шатры: Перапаўненне стыль, шатровым стылі, шацёр-плэй-рахунак, шацёр-кірунак і шатровыя хуткадзейнае.
перапаўненне стыль
Ўласцівасць Перапаўненне стылі (які я таксама абмяркоўвалася ў артыкуле Перапаўненне CSS) вызначае пераважны стыль для змесціва, які перацякае ў поле кантэнту. Калі вы ўсталюеце значэнне Marquee радкі або шатра-блок кантэнт будзе слізгаць ў і налева / направа (бягучага радка радкі) або уверх / уніз (шацёр-блок).
шатровым стыль
Гэта ўласцівасць вызначае, якім чынам ўтрыманне будзе перамяшчацца ў поле зроку (і выхад).
Варыянты пракруткі слайдаў і чаргуюцца. Скрутак пачынаецца з утрыманнем цалкам выключаным экрана, а затым ён перамяшчаецца па бачнай вобласці да таго часу, пакуль усё цалкам выключыць экран зноў. Slide пачынаецца з утрыманнем цалкам выключаным экрана, а затым ён перамяшчаецца праз, пакуль змест не поўнасцю перанесены на экран, і там застаўся слізгаць на экране больш не зместу.
Нарэшце, альтэрнатыўны адскоквае ўтрыманне з боку ў бок, слізгаючы ўзад і наперад.
шатровыя-гульні падлік
Адным з недахопаў выкарыстання MARQUEE элемента з'яўляецца тое, што намёт ніколі не спыняецца. Але са стылем ўласнасць шатровых гульнямі падлікам вы можаце ўсталяваць намёт, каб павярнуць змесціва і выключаецца на працягу пэўнага колькасці часу.
шатровае-кірунак
Вы таксама можаце выбраць кірунак, у якім ўтрыманне павінна пракруткі на экране. Значэння ў прамым і зваротным заснаваныя на Скіраванасць тэксту, калі перапаўненне-стыль шатра лініі і ўверх ці ўніз, калі перапаўненне-стыль шатра-блок.
Больш падрабязна Marquee-Direction
| перапаўненне стыль | мова Direction | наперад | зваротны |
|---|---|---|---|
| шатровым лініі | л | злева | права |
| РТЛ | права | злева | |
| шатровым-блок | уверх | ўніз |
шатровая хуткасць
Гэта ўласцівасць вызначае, як хутка скруткі кантэнту на экране. Значэння павольна, нармальна і хутка. Фактычная хуткасць залежыць ад зместу і браўзэра адлюстроўваецца, але значэнні павінны быць павольнымі павольней, чым звычайна, якая адбываецца павольней, чым хутка.
Браўзэр Падтрымка Уласцівасці Marquee
Магчыма , вам давядзецца выкарыстоўваць прэфіксы , каб атрымаць CSS шатра элементы работы. Яны заключаюцца ў наступным:
| CSS3 | вытворца Prefix |
|---|---|
| Перапаўненне-х: бягучы радок радок; | Перапаўненне-х: -webkit-бягучы радок; |
| шатровым стыль | -webkit-намёт стыль |
| шатровыя-гульні падлік | -webkit-шацёр-паўтор |
| шатровае-кірунак: наперад | зваротны; | -webkit-шацёр-кірунак: наперад | назад; |
| шатровая хуткасць | -webkit-намёт хуткасць |
| не існуе эквіваленту | -webkit-шацёр-инкремент |
Апошняе ўласцівасць дазваляе вызначыць, як вялікія ці малыя крокі павінны быць як скруткі кантэнту на экране ў шатры.
Для таго, каб мець свой шацёр працу, вы павінны змясціць пастаўшчык прыстаўкай значэння першым, а затым ісці за імі са значэннямі спецыфікацый CSS3. Напрыклад, вось CSS для бягучага радка, што пракрутка тэксту ў пяць разоў злева направа ўнутры 200x50 скрынкі.
{
шырыня: 200px; вышыня: 50px; бел-прастору: Nowrap;
перапаўненне: схаваны;
Перапаўненне-х: -webkit-бягучы радок;
-webkit-шатровае-кірунак: наперад;
-webkit-намёт стыль: пракрутка;
-webkit-бягучы радок хуткасць: нармальная;
-webkit-шатровым-инкремент: маленькі;
-webkit-шатровае-паўтор: 5;
Перапаўненне-х: бягучы радок радок;
шатровае-кірунак: наперад;
шатровым стыль: пракрутка;
бягучы радок хуткасць: нармальная;
шатровым-гульня падлік: 5;
}