#1 News Ticker von Wolfgang 17.11.2015 15:49

avatar

Hallo Florian!
"Magister" aus meinem Forum fragt nach einer Erweiterung seines News Ticker.

Der News Ticker läuft ein, bleibt kurz stehen und die nächste Nachricht läuft dann ein.
Er möchte gern, dass nach dem Einlaufen der Nachricht, die Nachricht nochmal kurz blinkt.

Ich habe da etwas mit jQuery probiert, wird aber alles zu groß.

Hier das Script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
 
<body onLoad="newsticker();">
<style type="text/css">
.mtxt a {text-decoration:none;color: #ffff00;}
.mtxt a:hover {color:#ffffff;}
#mtxt{font-weight: bold; color: #000000; font-family: Baskerville Old Face; font-size: 12pt;background-color:#000000;}
</style>
 
<script language="JavaScript">
// Tickereinstellungen
var newslist=new Array();
var cnt=0; // Auswahl des Start-Tickers, hier newlist[0]
var curr = "";
var i=-1;

newslist[0]=new Array("+++ QSO Night auf FM Kanal 29 (27.295 Mhz) +++","color:#FF6600;")
newslist[1]=new Array("+++ Neues Mitglied '13 Osna Radio 09', Jens aus Osnabrück +++","color:#3399FF;")
newslist[2]=new Array("+++ Osna Radio QRV ab 18.00 Uhr MEZ, auf FM Kanal 29 (27.295 Mhz) +++","color:#C0CCCC;")
newslist[3]=new Array("+++ Über einen Eintrag im Gästebuch würden wir uns freuen! +++","color:#FFE599;")

function newsticker() {

if (i < newslist[cnt][0].length - 1)
{
i++;
temp1 = newslist[cnt][0];
temp1 = temp1.split('');
curr = curr+temp1[i];
temp2 = newslist[cnt][1];
mtxt.innerHTML = "<div class='mtxt' style='"+temp2+"'>"+curr+"</div>";

//Ticker-Geschwindigkeit
setTimeout('newsticker()',100) ///Speed
return;
}

//Pause
i = -1; curr = "";
if (cnt<newslist.length-1)
cnt++;
else
cnt=0;
setTimeout('newsticker()',3000) ///Pause
}
</script>
 
<center>
<div id="mtxt"></div>
</center>
 
</body>
</html>
 
 




Hast Du eine Idee (Wenn Du Zeit hast)?




Beste Grüße
Wolfgang

#2 RE: News Ticker von florian-zier 18.11.2015 01:51

avatar

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
@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%);
}
 

#3 RE: News Ticker von Wolfgang 20.11.2015 15:56

avatar

Hallo Florian,
besten dank für die ausführlichen Informationen.
Mal sehen, was sich umsetzen läßt.




Wolfgang

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz