Ті з вас, хто давно пише HTML, може запам’ятати цей елемент. Це був елемент для браузера, який створив банер для прокрутки тексту на екрані. Цей елемент ніколи не був доданий до специфікації HTML, і підтримка його широко варіювалась у різних браузерах. Люди часто мали дуже тверді думки щодо використання цього елемента – як позитивні, так і негативні. Але незалежно від того, любили ви це або ненавиділи, це справді слугувало тому, щоб зробити вміст, який переповнював межі поля, видимим. Частково причиною того, що браузери його ніколи не реалізовували повністю, окрім сильної особистої думки, було те, що він вважається візуальним ефектом, і як такий, він не повинен визначатися HTML, який визначає структуру. Натомість візуальними або презентаційними ефектами повинен керувати CSS. А CSS3 додає модуль розмітки, щоб контролювати, як браузери додають ефект виділення до елементів.
Змістовий покажчик
Нові властивості CSS3
CSS3 додає п’ять нових властивостей, які допомагають контролювати відображення вашого вмісту в області розміщення: стиль переповнення, стиль виграшів, кількість відтворень виступу, напрямок виступу та швидкість виступу.
переповнений стиль
Властивість стилю переповнення (про яку ми також говорили в статті CSS Overflow) визначає бажаний стиль вмісту, який переповнює поле вмісту. Якщо для значення встановлено значення marquee-line або marquee-block, ваш вміст буде ковзати всередину та вліво / вправо (marquee-line) або вгору / вниз (marquee-block).
шатер у стилі
Ця властивість визначає, як вміст буде переглядатись (і виходити). Варіанти: прокрутка, слайд та альтернативна. Прокрутка починається з вмісту, який повністю виходить за межі екрана, а потім переміщається по видимій ділянці, доки весь екран знову не буде повністю вимкнено. Слайд починається з вмісту повністю поза екраном, а потім переміщається поперек, поки вміст повністю не переміститься на екран, і більше не залишиться вмісту для ковзання по екрану. Нарешті, альтернативний відбиває вміст з боку в бік, ковзаючи вперед-назад.
шатер-гра-підрахунок
Одним з недоліків використання елемента MARQUEE є те, що шатер ніколи не зупиняється. Але за допомогою властивості стилю marquee-play-count ви можете встановити область для повернення та вимкнення вмісту протягом певної кількості разів.
шатер-напрямок
Ви також можете вибрати напрямок, по якому вміст повинен прокручуватися на екрані. Значення вперед і назад зворотно базуються на спрямованості тексту, коли стиль переповнення – штрих-лінія та вгору або вниз, коли стиль переповнення – блок-штрих.
Відомості про напрямок шатра
overflow-style |
Мовний напрямок | вперед | зворотний |
|---|---|---|---|
marquee-line |
ltr | зліва | правильно |
| rtl | правильно | зліва | |
marquee-block |
вгору | вниз |
шатер-швидкість
Ця властивість визначає швидкість прокручування вмісту на екрані. Значення повільні, нормальні та швидкі. Фактична швидкість залежить від вмісту та браузера, який його відображає, але значення повинні бути повільними, повільнішими, ніж звичайно, що повільнішими, ніж швидкі.
Підтримка браузером властивостей Marquee
Можливо, вам знадобиться використовувати префікси постачальників, щоб елементи шарів CSS працювали. Вони такі:
| CSS3 | Префікс постачальника |
|---|---|
overflow-x: marquee-line; |
overflow-x: -webkit-marquee; |
marquee-style |
-webkit-marquee-style |
marquee-play-count |
-webkit-marquee-repetition |
marquee-direction: forward|reverse; |
-webkit-marquee-direction: forwards|backwards; |
marquee-speed |
-webkit-marquee-speed |
| ніякого еквівалента | -webkit-marquee-increment |
Остання властивість дозволяє визначити, наскільки великими чи малими повинні бути кроки, коли вміст прокручується на екрані в області розмітки. Для того, щоб ваш шатер працював, вам слід спочатку поставити префіксовані значення постачальника, а потім слідувати за ними із значеннями специфікації CSS3. Наприклад, ось CSS для області, що прокручує текст п’ять разів зліва направо всередині поля 200×50. {
ширина: 200px; висота: 50px; пробіл: nowrap;
переповнення: приховане;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: вперед;
-webkit-marquee-style: прокрутка;
-webkit-marquee-speed: нормальний;
-webkit-marquee-прирост: малий;
-вебкіт-шатер-повторення: 5;
overflow-x: рядок-штрих;
шатер-напрямок: вперед;
шатер у стилі: прокрутка;
швидкість шатру: нормальна;
кількість шатрів-п’єс: 5;
}
type = «code»>
Формат mla apa chicago Ваше посилання
Кірнін, Дженніфер. «Створення прокручуваного вмісту в HTML5 та CSS3 без MARQUEE.» ThoughtCo, травень. 14, 2021, thinkco.com/scrollable-content-html5-css3-without-marquee-3467007.
Кірнін, Дженніфер. (2021, 14 травня). Створення прокручуваного вмісту в HTML5 та CSS3 без MARQUEE. Отримано з https://www.thoughtco.com/scrollable-content-html5-css3-without-marquee-3467007
Кірнін, Дженніфер. «Створення прокручуваного вмісту в HTML5 та CSS3 без MARQUEE.» ДумкаCo. https://www.thoughtco.com/scrollable-content-html5-css3-without-marquee-3467007 (доступ 21 липня 2021 р.).
копія цитування
-
Намет у веб-дизайні
-
Як стилізувати IFrames за допомогою CSS
-
Різниця між CSS2 та CSS3
-
Як використовувати CSS для центрування зображень та інших об’єктів HTML
-
Як вставити рядки в HTML за допомогою тегу HR
-
Поле прокрутки HTML
-
Змушуйте елементи веб-сторінки зникати та зникати за допомогою CSS3
-
Що таке мови розмітки?
-
Як розтягнути фонове зображення, щоб розмістити веб-сторінку
-
Використання атрибутів елемента HTML TABLE
-
Використання HTML5 для відображення відео у поточних браузерах
-
Як створити макет із 3 колонками в CSS
-
Коли використовувати HTML5 ‘розділ’ Елемент
-
Як використовувати стовпці CSS для макетів веб-сайтів із декількох стовпців
-
Як створити безперервну текстову рамку в JavaScript
-
Полотно HTML5: що це таке і чому воно використовується
Ваші права на конфіденційність
ThoughtCo та наші сторонні партнери використовують файли cookie та обробляють особисті дані, такі як унікальні ідентифікатори, на основі вашої згоди зберігати та / або отримувати доступ до інформації на пристрої, показувати персоналізовану рекламу та для вимірювання вмісту, аналізу аудиторії та розробки продукту. Щоб змінити або скасувати вибір вашої згоди на ThoughtCo.com, включаючи ваше право на заперечення, де використовується законний інтерес, натисніть нижче. Ви можете будь-коли оновити свої налаштування за посиланням «Конфіденційність ЄС» внизу будь-якої сторінки. Цей вибір буде повідомлений нашим партнерам у всьому світі та не впливатиме на дані веб-перегляду. Список партнерів (постачальників)
Ми та наші партнери обробляємо дані для:
Активно скануйте характеристики пристрою для ідентифікації. Використовуйте точні дані геолокації. Зберігайте та / або отримуйте доступ до інформації на пристрої. Виберіть персоналізований вміст. Створіть персоналізований профіль вмісту. Вимірюйте ефективність реклами. Виберіть основні оголошення. Створіть профіль персоналізованої реклами. Виберіть персоналізовану рекламу. Застосовуйте дослідження ринку, щоб генерувати інформацію про аудиторію Виміряйте продуктивність вмісту. Розробляти та вдосконалювати продукти. Список партнерів (постачальників)