Marquee: ungewollte Umbrüche in Laufschrift (Allgemein)
Hallo!
Erstmal danke für das tolle Marquee Tutorial
Hat auch super geklappt (bin total Anfängerin), bis auf das seltsame Problem, dass innerhalb der Laufschrift nach jedem Wort ein Umbruch eingefügt wurde und ich nicht raus finde, wieso. Außerdem wird meine Schriftgröße nicht angezeigt, die Schrift bleibt klein. Font allerdings schon...
HTML:
<body>
<p>
<div id="marquee" class="marquee"><span>Still busy, website coming <del> soon </del>.</span></div>
</p>
</body>
</html>
CSS:
<style>
.marquee {
max-width: 100vw; /* iOS braucht das */
white-space: nowrap;
overflow: hidden;
font-family: cormorant;
font-weight: lighter;
font-style: italic;
font-size: 150px;
color: #292828;
}
.marquee span {
display: inline-block;
padding-left: 105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
animation: marquee 10s linear infinite;
}
/* Make it move */
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>