Hmm, mal wieder ein Newsticker. Marquee und Blink sollte man eigentlich sowieso eher vermeiden, oftmals wird sowas nicht mal mehr wahrgenommen, da es aufgrund der vielen blinkenden Werbung aus Gewohnheit übersehen wird.

Das Skript nun dementsprechend umzuschreiben ist den Aufwand eigentlich nicht wert. Immer wieder werden Ticker in ähnlicher, aber dennoch etwas anderer Form gewünscht. Wirklich Sinn machen meiner Meinung nach die wenigsten. Es wäre nur wieder eine sehr aufwendige Spezialanpassung.

Wenn schon, dann lieber keine durchgehend animierten Ticker. Ganz hübsch fand ich z. B. Marquee with CSS3 Animation (zur Anleitung), da macht die Animation nur einen sehr geringen Teil aus. Habe das Beispiel auch irgendwann mal als Herausforderung selbst aufgegriffen und leicht optimiert wieder als CSS3-Marquee auf CSSDeck veröffentlicht, wobei nicht für jedes Element eine komplett eigene Animation erstellt werden muss, sondern nur eine einzige auf den Elementen leicht verzögert gestartet wird. Der Ticker funktioniert übrigens nur mit CSS und komplett ohne JavaScript, damit sind auch die Animationen so flüssig wie möglich und ruckeln nicht wie die JavaScript-Ticker.


Wenn ihr dennoch unbedingt einen Ticker wollt, probiert ihr euch vielleicht auch mal an CSS3-Animationen und konstruiert einen eigenen Ticker. Oder, um nicht ganz ohne Lösung zu bleiben, nutzt meine Vorlage (oder die verlinkte Original-Anleitung) und erzeugt optisch ein Blinken, indem ihr die CSS-Eigenschaft opacity beeinflusst. In meinem Beispiel sind 0-5% das Einfahren, 5-15% das Stehen an der gleichen Position und 15-20% das Herausfahren des Textes. Die ganze Animationen ist übrigens innerhalb 20% abgewickelt, weil für 5 Elemente aufgrund der passenden Verzögerung jedes 100% / 5 = 20% der Animationsdauer benutzen kann (ist kein Problem, da auch feinjustierte Komma-Werte möglich sind).

Da das Blinken nur stattfinden soll, während der Text bereits eingelaufen ist, werden nun innerhalb der stillstehenden 5-15% der Animation weitere Keyframes definiert. Diese verwenden die CSS-Eigenschaft opacity, welche zu Anfang und Ende des stehenden Textes sichtbar, also 1 sein soll, dazwischen wird der Text zweimal kurz aus- und eingeblendet.

@keyframes shownews {
	0%  {
		transform:translateY(-100%);
	}
	5% {
		transform:translateY(0);
		opacity: 1;
	}
	8% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	12% {
		opacity: 0;
	}
	15% {
		transform:translateY(0);
		opacity: 1;
	}
	20% {
		transform:translateY(100%);
	}
	100%{
		transform:translateY(100%);
}