Elementor-Marquee: Unendlicher Scrolltext, Logos und Aufkleber

Ein Festzelt ist ein Inhalt, der kontinuierlich in eine Richtung scrollt und nie aufhört: keine Pfeile, keine Punkte, keine Foliengrenzen Das Alte <marquee> HTML-Tag ist seit Jahren tot, aber der Effekt kam um 2021 zurück und es ist jetzt auf der Hälfte der Agenturseiten, die Sie besuchen werden.

Drei Möglichkeiten, eine in Elementor zu bauen: die freie Logo Slider Widget für Logos, die News-ticker Für Text, oder etwa zwölf Zeilen CSS, wenn Sie es auf etwas wollen, das die Widgets nicht abdecken Ein Festzelt ist wirklich ein Karussell Widget Mit entfernten Anschlägen, weshalb zwei der drei Methoden von einer ausgehen Alle drei unten, mit dem Detail, das entscheidet, ob Ihre Schleifen sauber oder sichtbar einrasten.

Das Einzige, was ein Festzelt kaputt aussehen lässt

Beginnen Sie hier, denn das ist der Grund, warum die meisten handgefertigten Festzelte falsch aussehen.

Ein Festzelt ist ein Inhaltsstreifen, der so lange nach links rutscht, bis er aus dem Bildschirm kommt, und dann zum Start zurückspringt, wenn es nur eine Kopie des Inhalts gibt, erhält man eine Lücke Der Schwanz geht, und es gibt leeren Raum, bis der Kopf wieder rundet.

Die Fixierung ist, den Track zu duplizieren Zwei identische Kopien nebeneinander, animiert über die Breite von genau einer Kopie, wenn die Animation zurückgesetzt wird, sitzt Kopie zwei genau dort, wo Kopie eins war, und der Sprung ist unsichtbar.

Das war's. Das ist die ganze Technik Jedes Festzelt, das du gesehen hast, das sich glatt schleift, macht das, und jedes, das stottert, nicht.

Methode 1: Logo-Festzelt mit dem kostenlosen Logo-Slider

Wenn Sie Client-Logos scrollen, wozu die meisten Marken dienen, ist die Logo Slider Widget Macht es ohne CSS. Steht im kostenlosen Plugin.

1. Logo Slider auf die Seite ziehen Und fügen Sie Ihre Logos im Repeater hinzu, jeweils eine Zeile, mit einem optionalen Link.
2. Karusselleinstellungen öffnen Und schalten Sie Autoplay ein, dann Infinite Loop.
3. Autoplay-Verzögerung auf 0 setzen. Das ist der Schalter, der ein Karussell in ein Festzelt verwandelt Eine Verzögerung von Null bedeutet, dass es auf einem Schlitten nie pausiert, sodass die Bewegung kontinuierlich statt abgestuft wird.
4. Stellen Sie die Geschwindigkeit auf etwas Langsames ein 4000 bis 6000 ms. Festzelte lesen sich ruhig, wenn sie langsamer sind, als man erwarten würde Schnelle sehen aus wie ein Fehlerzustand.
5. Schalten Sie Pfeile und Punkte aus. Die Navigation auf einem Festzelt ist widersprüchlich; Es gibt nichts, worauf man sich einlassen könnte.
6. Pause-on-hover ausschalten Wenn Sie es wirklich kontinuierlich wünschen, oder lassen Sie es eingeschaltet, wenn die Logos anklickbar sind.

Dias-per-View steuert die Dichte. Sechs auf dem Desktop, drei auf dem Tablet, zwei auf dem Handy halten das Logos lesbar. Fallen Sie nicht auf eins, denn ein Festzelt, das jeweils ein einzelnes Logo zeigt, liest sich nicht mehr als Streifen.

Mehr zum Styling von Logo-Streifen, einschließlich der Graustufen-Schweberbehandlung und zum Ausgleich nicht übereinstimmender Logo-Größen: Die Logo-Karussell-DurchführungWas sonst noch in der freien Stufe steht, siehe Die kostenlose Karussell Widget Aufschlüsselung.

Methode 2: Textmarkee mit News Ticker

Für das Scrollen von Text (Ankündigungen, Schlagzeilen, ein Stockticker-Streifen) ist das News Ticker-Widget die speziell entwickelte Option. Es ist ein Pro-Widget.

Es verarbeitet die Dinge, die ein handgerolltes Textmarkee falsch macht: Es kann aus einer Post-Abfrage und nicht aus einer statischen Liste ziehen, sodass sich ein Ticker „Neueste Nachrichten“selbst aktualisiert, und es hat links einen festen Beschriftungsblock, der an Ort und Stelle bleibt, während der Inhalt an ihm vorbeirollt. Dieses Etikett ist das Detail, das einen Ticker als Ticker und nicht als abweichenden Text lesen lässt.

Legen Sie die Richtung, Geschwindigkeit und das Pausenverhalten in den Einstellungen des Widgets fest. Zwei Dinge, die es wert sind, getan zu werden:

• Pause beim Schwebeflug, an. Wenn die Schlagzeilen Links sind, brauchen die Menschen ein stationäres Ziel.
• Halten Sie die Artikel kurz. Ein Ticker mit 90-Zeichen-Schlagzeilen dauert so lange, bis er geradelt ist, dass niemand Punkt vier sieht Auf etwa 50 Zeichen kürzen.

Wenn Sie tatsächlich Text ohne Schriftrolle verschieben möchten, eine Überschrift, in der sich Wörter an Ort und Stelle drehen, ist die Widget für animierte Schlagzeilen Passt besser als jedes Festzelt.

Methode 3: Erstellen Sie eine mit CSS

Für alles, was die Widgets nicht abdecken (ein Streifen mit Testimonial-Zitaten, eine Reihe von Symbolen, gemischte Inhalte), besteht ein Festzelt aus zwölf Zeilen CSS. Geben Sie das Markup in ein HTML-Widget und das CSS in das benutzerdefinierte CSS-Feld von Elementor oder Ihr Kind-Theme ein.

<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>

Beachten Sie, dass der Inhalt zweimal angezeigt wird. Das ist der doppelte Titel von früher, kein Copy-Paste-Fehler.

.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; }
}

Vier Dinge sind wichtig:

• translateX(-50%) Verschiebt den Track um genau die Breite einer Kopie, denn der Track ist zwei Kopien Das macht die Schleife unsichtbar.
• linear„Nicht ease. Ein entspanntes Festzelt beschleunigt und verlangsamt jeden Zyklus, was wie ein Käfer aussieht.
• width: max-content Stoppt die Flex-Track-Verwicklung.
• Die Abfrage mit reduzierter Bewegung Ist nicht optional. Kontinuierliche horizontale Bewegung ist ein dokumentierter Migräne- und Vestibularauslöser, und ein Festzelt ist der häufigste Täter im modernen Internet. Ehrt die Einstellung.

Um die Richtung umzukehren, animieren Sie von translateX(-50%) zu 0. Für vertikal, tauschen Sie zu translateY und die Behälterhöhe einstellen.

Wie schnell sollte sich ein Festzelt bewegen?

Langsamer als der Instinkt sagtEin guter Ausgangspunkt sind 30 Sekunden für einen vollen Zyklus eines Sechs-Punkte-Tracks, der sich im Editor fast zu langsam anfühlt und sich auf einer Live-Seite souverän liest.

Der Test: kann ein Besucher einen Gegenstand lesen, ohne ihn mit den Augen zu verfolgen? wenn er der Bewegung folgen muss, ist sie zu schnell, und der ganze Streifen wird zu etwas, von dem man wegschauen kann.

Logos können schneller gehen als Text, da ein Logo erkannt und nicht gelesen wird Text benötigt etwa das Doppelte der Verweilzeit Ein gestuftes Karussell ist der umgekehrte Fall, bei dem Autoplay ist meist ein Fehler Weil die Artikel anklickbar sind.

Ist ein Festzelt schlecht für SEO oder Barrierefreiheit?

SEO, nein. Der Inhalt ist echter Text im DOM, crawlbar und indexierbar Durch Duplizieren des Tracks erscheint der Text zweimal in der Quelle, was es wert ist, beachtet zu werden, aber in diesem Maßstab kein Duplicate-Content-Problem darstellt, da es sich um eine Handvoll Wörter innerhalb eines Elements handelt Wenn es Sie stört, markieren Sie die zweite Kopie aria-hidden="true"(was Sie ohnehin tun sollten.

Barrierefreiheit ist der eigentliche Gesichtspunkt, und es gibt drei echte Probleme:

• Bewegungsempfindlichkeit. Behandelt von der oben genannten Abfrage in reduzierter Bewegung. Nicht verhandelbar.
• Bewegliche Verbindungsziele. Wenn Elemente anklickbar sind, halten Sie mit dem Mauszeiger und beim Fokus an. Ein Link, der wegrutscht, während jemand danach greift, scheitert an den Zielgrößenerwartungen von WCAG 2.2 im Geiste, wenn nicht sogar im Buchstaben.
• Bildschirmleser lesen es zweimal. Der doppelte Titel wird zweimal angekündigt, es sei denn, Sie verbergen die zweite Kopie aus dem Barrierefreiheitsbaum. Ein Attribut behebt ihn.

All das macht ein Festzelt nicht verkehrt Es macht ein unkonfiguriertes zu einer schlechten Idee.

Häufig gestellte Fragen

Welche Methode verwendet werden soll

Logos: der kostenlose Logo Slider, autoplay verzögern null Erledigt in zwei Minuten und es behandelt responsive Dichte für Sie.

Keiner der zwanzig Widget-builder Designs ist ein Festzelt, so bleibt der Logo Slider das Werkzeug für diesen Job Die Preisseite Zeigt an, wo News Ticker sitzt, wenn Sie die speziell angefertigte Version haben möchten.

Scrollende Schlagzeilen: News Ticker, denn die Abfragequelle und das feste Etikett sind für sich genommen die Lizenz wert.

Alles andere: das CSS. Es ist kurz, es gehört dir, und nichts kann es veralten lassen Standalone-Slider-Builder können auch durchgehende Gleise machen, und Der Slider Plugin Vergleich Deckt ab, was sie die Seite kosten.

Alle Karussell- und Schieber-Widgets, einschließlich derjenigen, die Festzeltaufgaben erledigen, werden auf dem gesammelt Elementorkarussell-Widgets Seite, zusammen mit 20 importierbare Karussell- und Schieberkonstruktionen8 davon kostenlos Wenn sich Ihr Festzelt nach einem Caching-Plugin-Update schlecht benimmt, wird das Problem behoben Die Swiper Schieber Fehlersuche Anleitung Auch hier gelten.