<style> .marquee { max-width: 100vw; /* iOS braucht das */ white-space: nowrap; overflow: hidden; /* hier evtl. noch font-size, color usw. */ } .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 15s linear infinite; } /* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */ .marquee span:hover { animation-play-state: paused } /* Make it move */ @keyframes marquee { 0% {transform: translate3d(0,0,0);} 100% {transform: translate3d(-100%,0,0);} } </style> |
<div id="marquee" class="marquee"><span>Dieser Text wird horizontal wie am Laufband gescrollt und per classes und IDs so durchs Bild laufen gelassen, dass es ruckelfrei ist</span></div> |
font-family: trebuchet ms, arial, helvetica,verdana, georgia, 'times new roman', sans-serif; display:block; color:firebrick; text-align:center; padding:0rem 0rem; font-size:1.3rem; letter-spacing:1px; font-weight:bold; font-variant:small-caps; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); |