Шатер - это контент, который непрерывно прокручивается в одном направлении и никогда не останавливается: ни стрелок, ни точек, ни границ слайдов Старый <marquee> HTML-тег мертв уже много лет, но эффект вернулся примерно в 2021 году, и теперь он находится на половине сайтов агентств, которые вы посетите.
Три способа построить один в Элементоре: бесплатный Виджет Logo Slider для логотипов, Новости Тикер для текста, или около двенадцати строк CSS, если вы хотите, чтобы это было на чем-то, что виджеты не покрывают. шатер действительно является карусельный виджет с удаленными остановками, поэтому два из трех методов начинаются с одного Все три ниже, с деталью, которая решает, чистые ваши петли или видимые щелкает.
Единственное, что делает шатер сломанным
Начните здесь, потому что именно поэтому большинство шатрах ручной сборки выглядят неправильно.
Шатер - это полоска контента, которая скользит влево до тех пор, пока не окажется за кадром, а затем возвращается к началу. Если копия контента всего одна, вы получаете щель. хвост уходит, и остается пустое место, пока голова снова не огибается.
Исправление заключается в дублировании трека. две одинаковые копии рядом, анимированные по ширине ровно одного экземпляра. когда анимация сбрасывается, копия два сидит именно там, где была копия один, и прыжок невидим.
Вот и все. такова вся техника. каждый шатер, который вы видели, что петли плавно делают это, а каждый, что заикается, - нет.
Способ 1: Шатер логотипа с бесплатным ползунком логотипа
Если вы прокручиваете логотипы клиентов, для чего и предназначено большинство шатров, то Виджет слайдера логотипа делает это без CSS. Это в бесплатном плагине.
- Перетащите слайдер логотипа на страницу и добавьте свои логотипы в ретранслятор по одной строке каждый с дополнительной ссылкой.
- Открыть настройки карусели и включите автоигра, затем бесконечную петлю.
- Установите задержку автовоспроизведения на 0. Это переключатель, который превращает карусель в шатер Задержка в ноль означает, что он никогда не останавливается на слайде, поэтому движение становится непрерывным, а не ступенчатым.
- Установите скорость на что-то медленное, 4000 до 6000ms.Marquees читаются как спокойные, когда они медленнее, чем вы ожидаете. быстрые выглядят как состояние ошибки.
- Выключите стрелки и точки. Навигация по шатру противоречива, ориентироваться не к чему.
- Выключите паузу на зависании если вы хотите, чтобы он был по-настоящему непрерывным, или оставьте его включенным, если на логотипы можно нажать.
Слайды-за-просмотр контролирует плотность Шесть на рабочем столе, три на планшете, два на мобильном сохраняет логотипы разборчивыми Не опускайтесь до одного, потому что шатер, показывающий единичный логотип за раз, перестает читать как полоску.
Подробнее о стиле полосок с логотипом, включая обработку зависания в оттенках серого и о том, как выровнять несоответствующие размеры логотипа: прохождение карусели с логотипом. Что еще находится на свободном уровне, см разбивка виджета бесплатной карусели.
Метод 2: Текстовый шатёр с тикером новостей
Для прокрутки текста (объявления, заголовки, лента для биржевых билетов) виджет News Ticker - это специально созданный вариант. Это виджет Pro.
Он обрабатывает вещи, которые ручной свернутый текстовый шатер получает неправильно: он может извлекать из пост-запроса, а не из статического списка, поэтому “latest news” тикер обновляется, и он имеет фиксированный блок метки слева, который остается на месте, пока контент прокручивается мимо него. Эта метка - это деталь, которая заставляет тикер читать как тикер, а не как дрейфующий текст.
Установите направление, скорость и паузу в настройках виджета. Стоит сделать две вещи:
- Пауза на зависании, на. Если заголовки - ссылки, людям нужна стационарная цель.
- Держите предметы короткими. Циклический тикер с заголовками из 90 символов занимает так много времени, что никто не видит четвертый элемент. Усечь примерно до 50 символов.
Если на самом деле вам нужно перемещать текст без прокрутки, один заголовок, в котором слова вращаются на месте, - это Виджет анимационных заголовков подходит ближе, чем любой шатер.
Метод 3: Создайте один с помощью CSS
Для всего, что виджеты не покрывают (полоска свидетельских цитат, ряд значков, смешанный контент) шатер - двенадцать строк CSS. Поместите разметку в HTML-виджет, а CSS - в пользовательское CSS-поле Elementor или в дочернюю тему.
<div class="ma-marquee">
<div class="ma-marquee__track">
<span>Item one</span><span>Item two</span><span>Item three</span>
<span>Item one</span><span>Item two</span><span>Item three</span>
</div>
</div>Обратите внимание, что контент появляется дважды. Это дубликат трека из более раннего, а не ошибка копирования-вставки.
.ma-marquee {
overflow: hidden;
}
.ma-marquee__track {
display: flex;
gap: 3rem;
width: max-content;
animation: ma-scroll 30s linear infinite;
}
.ma-marquee:hover .ma-marquee__track {
animation-play-state: paused;
}
@keyframes ma-scroll {
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ma-marquee__track { animation: none; }
}Четыре вещи имеют значение:
translateX(-50%)перемещает трек ровно на одну копию шириной, т.к. трек - две копии. именно это делает цикл невидимым.linear, нетease. Облегченный шатер ускоряет и замедляет каждый цикл, что выглядит как ошибка.width: max-contentостанавливает обертку гибкой дорожки.- Запрос уменьшенного движения не является необязательным Непрерывное горизонтальное движение является документально подтвержденным мигренью и вестибулярным триггером, а шатер является единственным наиболее распространенным нарушителем в современной сети. Чтите обстановку.
Чтобы изменить направление, оживите из translateX(-50%) чтобы 0. Для вертикали поменяйте местами на translateY и задают высоту контейнера.
Насколько быстро должен двигаться шатер?
Медленнее, чем говорит инстинкт Хорошая отправная точка - 30 секунд для одного полного цикла трека из шести пунктов, который кажется в редакторе почти слишком медленным и читается как уверенный на живой странице.
Тест: может ли посетитель прочитать один предмет, не отслеживая его глазами, если надо следить за движением, это слишком быстро, и вся полоса становится чем-то, от чего можно отвести взгляд.
Логотипы могут идти быстрее, чем текст, потому что логотип распознается, а не читается. Текст требует примерно удвоить время пребывания. ступенчатая карусель - это противоположный случай, когда автоигра обычно является ошибкой потому что элементы кликабельны.
Вреден ли шатер для SEO или доступности?
SEO, нет. Содержимое - это реальный текст в DOM, сканируемый и индексируемый. Дублирование трека означает, что текст появляется дважды в источнике, о чем стоит знать, но это не проблема дубликата контента в таком масштабе, потому что это горстка слов внутри одного элемента. Если это вас беспокоит, отметьте второй экземпляр aria-hidden="true", что вам все равно следует сделать.
Доступность является реальным соображением, и есть три реальные проблемы:
- Чувствительность движения. Обрабатывается запросом уменьшенного движения, приведенным выше. Не подлежит обсуждению.
- Цели движущегося звена. Если элементы кликабельны, остановитесь на наведении и на фокусе Ссылка, которая ускользает, когда кто-то тянется к ней, не соответствует ожиданиям WCAG 2.2 целевого размера по духу, если не по букве.
- Читатели экрана читают его дважды. Дубликат трека объявляется дважды, если вы не спрячете вторую копию из дерева доступности. Один атрибут исправляет это.
Ничто из этого не делает шатер плохой идеей. Это делает ненастроенный вариант плохой идеей.
Часто задаваемые вопросы
Есть ли у Элементора виджет-шатер?
Не в ядре. у Elementor нет выделенного виджета шатров или тикеров ни в бесплатном, ни в Pro плагине. эффект вы получаете от дополнения (бесплатный ползунок логотипа с задержкой автозапуска, установленной на ноль, или News Ticker для прокрутки текста) или написав CSS самостоятельно. Ничто здесь не продается как виджет шатёр; News Ticker (Pro) - это самая близкая специально созданная вещь, так как непрерывная прокрутка - это то, для чего она нужна, но она формируется вокруг полосок заголовков, а не произвольного контента.
Как заставить текст непрерывно прокручиваться в Элементоре?
Два варианта. виджет News Ticker обрабатывает его с настройками, включая извлечение заголовков из пост-запроса. Или добавьте HTML-виджет с дублированной дорожкой контента и анимацией ключевого кадра CSS translateX чтобы -50% на линейном бесконечном цикле.
Почему мой шатер прыгает или заикается, когда он зацикливается?
Трек не дублируется, или расстояние анимации не совпадает с шириной одной копии. шатру нужны две одинаковые копии контента и анимация, которая перемещается ровно на 50% от общей ширины трека. Любое другое расстояние, и вы увидите видимый снэп на каждом цикле.
Как мне приостановить наведение шатра?
С виджетом Logo Slider - переключатель в настройках карусели. В CSS это animation-play-state: paused на зависании контейнера Добавить :focus-within рядом :hover таким образом, пользователи клавиатуры получают такую же паузу.
Могу ли я сделать вертикальный шатер в Элементоре?
Да. Оживлять translateY вместо translateX, установить фиксированную высоту контейнера, и уложить дублированный трек в столбец вместо строки Вертикальные шатры подходят полосы отзывов и подачи уведомлений лучше, чем логотипы.
Поддерживается ли по-прежнему тег HTML-шатров?
Браузеры по-прежнему отображают <marquee>, но он устаревал в течение многих лет, его нет в спецификации HTML, и он не дает вам никакого контроля над смягчением, паузой или уменьшением движения. Вместо этого используйте CSS-анимацию: тот же эффект, лучшее поведение, и она не исчезнет в будущем выпуске браузера.
Какой метод использовать
Логотипы: бесплатный слайдер логотипа, нулевая задержка автовоспроизведения. Сделано за две минуты и обрабатывает для вас адаптивную плотность.
Ни один из двадцати Виджет Строитель дизайн является шатер, поэтому Логотип Слайдер остается инструментом для этой работы. The страница ценообразования показывает, где находится News Ticker, если вам нужна специально созданная версия.
Прокрутка заголовков: News Ticker, потому что источник запроса и фиксированная метка сами по себе стоят лицензии.
Все остальное: CSS. Коротко, твоя, и ничто не может обесценить. автономные строители ползунков тоже могут делать непрерывные пути, и сравнение плагинов ползунков покрывает, сколько они стоят странице.
Все виджеты карусели и слайдера, включая те, которые выполняют обязанности шатров, собираются на сайте Виджеты карусели Элементор пейдж, вместе с 20 импортных конструкций каруселей и ползунков, 8 из них бесплатно. Если ваш шатер плохо себя ведет после обновления плагина кэширования, исправляются руководство по устранению неполадок ползунка Swiper примените и здесь.
