Marquee-Effekt in Elementor
Ich kann mich genau daran erinnern, wie ich vor einigen Jahren nach einem Tutorial dafür gesucht habe. Ich wusste nicht, wie man so eine Animation für bewegenden Text nennt. Ich habe alles Mögliche in der Google-Suchleiste eingegeben: Text bewegt sich von links nach rechts, laufender Text oder auch Animation für bewegenden Text. Es hat damals eine Weile gedauert, bis ich herausgefunden habe, dass dieser Effekt Marquee genannt wird.
Heute zeige ich dir, wie du einen Marquee-Effekt in Elementor hinzufügst. Ein Marquee zieht die Aufmerksamkeit auf sich, wird aber gleichzeitig von manchen Menschen als störend empfunden. Das ist der Hauptgrund, warum ich seit gut zwei Jahren auf diesen Effekt verzichte.
Warum wurde der Lauftext erfunden? Weil nicht alle Informationen auf das Anzeigefeld passen. Passt im Browserfenster alle Informationen? Ja, sie passen, weil wir scrollen können. Braucht man im Browser einen Lauftext? Nein, das braucht man nicht.
Der einzige Anwendungsbereich des Lauftextes im Browser ist dekorativ, was zulasten der Zugänglichkeit der Informationen geht. Die Entscheidung für deine Website überlasse ich dir.
So setzt du Marquee-Effekt in Elementor um
Es geht ganz einfach und nur mit Hilfe von CSS-Code. Du fügst eine Überschrift zu deinem Container hinzu. In der Überschrift platzierst du diesen Code:
<div class="marquee"><span> + LETS MAKE MAGIC TOGETHER + LETS MAKE MAGIC TOGETHER + LETS MAKE MAGIC TOGETHER + LETS MAKE MAGIC TOGETHER + LETS MAKE MAGIC TOGETHER + LETS MAKE MAGIC LETS MAKE MAGIC TOGETHER + LETS MAKE MAGIC TOGETHER + LETS MAKE MAGIC TOGETHER + LETS MAKE MAGIC TOGETHER</span></div>
Du musst meinen Text durch deinen eigenen Text ersetzen. Anschließend gehst du zu „Erweitert“ und fügst bei „Eigenes CSS“ folgenden Code ein:
.marquee {
text-align: left;
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.marquee span {
display: inline-block;
width: 100%;
text-indent: 0;
animation: marquee 20s linear infinite;
}
.marquee span:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% { transform: translate(0%, 0); }
100% { transform: translate(-200%, 0); }
}
@media only screen and (max-width: 440px) {
.marquee span {
animation: none;
padding-left: 0;
}
} Jetzt sollte sich dein Text von links nach rechts bewegen. Wenn du etwas daran ändern möchtest, musst du den CSS-Code anpassen. Möchtest du, dass der Text schneller läuft, solltest du die Anzahl der Sekunden reduzieren. Gefällt es dir nicht, dass die Animation bei Mouseover pausiert, kannst du die entsprechende Zeile löschen (einfach animation-play-state: paused entfernen).
Natürlich kannst du diesen Effekt mit JavaScript flüssiger gestalten. Hier ist jedoch eine gute Alternative für alle, die ihre Website nicht mit unnötigem Code überladen wollen.
Für mehr Inspiration, schau dir mein letztes Tutorial zu Hover-Effekten bei Elementor an.
