#1 Start/Stop für Laufschriften von Wolfgang 22.09.2013 13:26

avatar

Hallo Florian,
eigentlich sollten Laufschriften informieren, aber sie können durch ihr ständiges flackern auch nerven. Da ich auch eine Laufschrift habe, wollte ich hier etwas verändern.

Version 1:
Laufschrift "Marquee" mit Start/Stopp ein- und ausschalten (Habe ich bereits angefangen: http://www.hilfe-tricks-tipps.de/forum.php).


• Laufschrift steht im Ruhezustand
• Laufschrift läuft beim Mouseover der Laufschrift und beim Mouseover des Ein/Ausschalters an.
• Ein Klick auf den Ein/Ausschalter lässt die Laufschrift eingeschaltet
• Ein-Ausschalter wechselt sein Aussehen passend zum Zustand der Laufschrift


<style>
.marquee1{margin-left:75px;margin-right:30px;padding:10px;width:auto;}
.trenn_li{border-right:1px solid #dddddd;position:absolute;height:27px;margin:5px 0 5px 60px}
</style>

<div class="box">
<div class="boxheader"><strong>Info Ticker!</strong></div>
<div class="boxcontent">

<img onclick="Laufschrift:permanent ein;" style="position:absolute;padding-left:10px;padding-top:12px;" title="Info Ticker ein! - Noch in Arbeit!" border=0 width="45px" src="http://www.bilder-hochladen.net/files/kr03-y-e369.png" onmouseover="src='http://www.bilder-hochladen.net/files/kr03-x-182b.png';Laufschrift:Start;" onmouseout="src='http://www.bilder-hochladen.net/files/kr03-y-e369.png';Laufschrift:Stopp;"></div>
<span class="trenn_li">&nbsp</span><marquee id="start_stopp" class="marquee1" behavior="alternate" scrollamount="0" onmouseover="scrollAmount=3" onmouseout="scrollAmount=0"><nobr><span style="margin-right:200px;"><a href="/t23f24-Herzlich-willkommen-im-Forum.html">Herzlich Willkommen</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/heart.gif" border=0 width="14">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="/forum.php?show=last">Beiträge der letzten Tage!</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/idee.gif" border=0 width="14"></span></nobr></marquee>

</div>
</div>


Ich habe mir gedacht: Ist es möglich über id="start_stopp" den Zustand von

scrollamount="0" onmouseover="scrollAmount=3" onmouseout="scrollAmount=0"

auf

scrollamount="1" onmouseover="scrollAmount=0" onmouseout="scrollAmount=3"

zu setzen?
Ist das so mit "marquee" möglich oder muss man auf ein anderes Laufschrift-Script zugreifen?


Version 2:

• Laufschrift springt Zeile für Zeile weiter
• Laufschrift passt sich der Breite des Fensters an, d.h. die Links werden in die nachfolgende Zeile verschoben.
• sonst alles offen, Animation, Zeiten, ....


Besten Dank im Voraus

#2 RE: Start/Stop für Laufschriften von florian-zier 22.09.2013 23:22

avatar

Hallo Wolfgang,
Marquees sind in der Tat etwas bedenklich. Ich bin mir jetzt auch nicht ganz sicher, wie genau Version 2 sein sollte, aber vertikal durchlaufende Schriften halte ich für noch bedenklicher. Eine Leserichtung von links nach rechts ist dann doch etwas natürlicher und auch z.B. auf Bahn-Tickern im Alltag gängiger. Ich kenne z.B. auch eine Seite, auf welcher der Text von unten nach oben durchscrollt, gerade bei viel Information ist der erste Teil zu schnell weg und man muss eine Runde warten, bis der Text wieder da ist. Alternativ ist man schnell gelangweilt, falls die Geschwindigkeit zu gering ist. Dann wartet man auch nicht mehr darauf, den ganzen Inhalt zu lesen. Zwei bis drei Zeilen vertikal sind eben oft zu schnell weg, als dass man sie über die komplette Breite lesen könnte. Horizontal liest man einfach mit und hat eine "ganze Zeile breit" Zeit.

Ansonsten habe ich für deinen konkreten Vorschlag eine Testseite erstellt. Der Text scrollt beim Hovern des Marquees oder Schalters. Wird der Schalter geklickt, bleibt er auch nach Verlassen mit der Maus aktiv und der Text scrollt weiter. Fährt man danach über das Marquee hält der Text an, um ihn in Ruhe lesen und ggf. einen Link klicken zu können.

Das JavaScript habe ich so gekapselt, dass keine Konflikte mit anderen Skripten entstehen sollten. Außer die Variable customMarquee wurde bereits woanders verwendet …
Die Scroll-Geschwindigkeiten kannst du bei Bedarf nochmals am Anfang des Skriptes anpassen und auch die Bilder für den Schalter austauschen. Wäre auch zu umständlich bei jedem einzelnen Bildwechsel die komplette URL reinzuschreiben …

Um die Funktionalität zu gewährleisten, müsste es reichen, wenigstens die Attribute des Schalter-Bildes und Marquees aus der Testseite so ins Forum zu übernehmen. Ich habe zusätzlich noch einige Style-Anweisungen in den HEAD übernommen. Für die sonst noch vorkommenden Border- und Width-Attribute habe ich das dann zwar nicht mehr, aber zumindest sind diese jetzt Anweisungen in Style-Attributen gewichen. Der HTML-Validator wollte eben keine Border-Attribute in meiner HTML5-Testseite. Auf lange Sicht sollten solche alten Attribute also weichen und gegen entsprechende CSS-Anweisungen ausgetauscht werden. Auch alle IMG-Tags freuen sich über Alt-Attribute, selbst wenn diese leer sind.

Vor einer 1:1 Übernahme ins Forum würde ich dennoch empfehlen, nochmal zu prüfen, ob ich die korrekte Verschachtelung des HTML-Codes verwendet habe. Nach dem Bild des Schalters kam noch ein schließendes DIV. Für mich erschien dieses aus Versehen hineingeraten zu sein, sollte es aber dennoch korrekt gewesen sein, dann wird am Ende eines zu viel geschlossen.


Interessant finde ich, auf welche Art Attribute eines HTML-Tags wie z.B. dieses SRC-Attribut auch gesetzt werden können:

1
 
onmouseover="src='http://www.bilder-hochladen.net/files/kr03-x-182b.png';"
 


Ich würde mich nie darauf verlassen, aber das kannte ich vorher noch nicht. Gut zu wissen …
Im Normalfall gibt es eine setAttribute(…)-Methode, falls du das sonst nochmals brauchen solltest (und kein jQuery verfügbar ist).

#3 RE: Start/Stop für Laufschriften von Wolfgang 26.09.2013 09:51

avatar

Hallo Florian, funktioniert super!

Frage:
Ist es möglich, dass der Schalter beim Maus-Klick seinen Zustand sofort anzeigt, ohne ein "mouseout"?

Mal wieder besten Dank

#4 RE: Start/Stop für Laufschriften von florian-zier 28.09.2013 00:06

avatar

Meinst du so, dass beim Deaktivieren der Zustand direkt als Aus angezeigt wird? Dann müsste aber wohl der beim Hovern angezeigte An-Zustand wieder raus.
Dann hat der Schalter keinen Hover-Effekt mehr, sondern zeigt dementsprechend nur noch an, ob er aktiviert ist oder nicht.

Ein Beispiel dazu wieder im Anhang.

#5 RE: Start/Stop für Laufschriften von Wolfgang 28.09.2013 23:20

avatar

Hallo Florian,
beide Varianten sind klasse!
Ich werden die letzte nehmen. Passt besser, denke ich!



#6 RE: Start/Stop für Laufschriften von Wolfgang 25.02.2015 23:09

avatar

Hallo Florian,
die Start/Stop-Funktion funktioniert bei den neuen Updates von "Opera" und "GoogleChrome" nicht mehr.


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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MarqueeTest</title>
 
<style type="text/css">
.marquee1 {margin-left:75px;margin-right:30px;padding:10px;width:auto;}
.trenn_li {border-right:1px solid #dddddd;position:absolute;height:27px;margin:5px 0 5px 60px}
 
#startStopMarquee {
width: 45px;
position: absolute;
padding-left: 10px;
padding-top: 12px;
border: 0;
}
 
/* Nur zur Sichtbarkeit des Container-Rahmens auf der Testseite */
#start_stopp {
border: 1px solid black;
}
</style>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var customMarquee = {
defaultValue: 0,
customValue: 3,
scrollPermanent: false,
 
defaultImage: 'http://www.bilder-hochladen.net/files/kr03-y-e369.png',
hoverImage: 'http://www.bilder-hochladen.net/files/kr03-x-182b.png',
 
activateSwitch: function(clicked) {
if (clicked) {
// Bilder und Scroll-Geschwindigkeit tauschen:
if (this.scrollPermanent) {
$('#startStopMarquee').attr('src', this.defaultImage);
$('#start_stopp').attr('scrollAmount', this.defaultValue);
}
else {
$('#startStopMarquee').attr('src', this.hoverImage);
$('#start_stopp').attr('scrollAmount', this.customValue);
}
// Aktuellen Scroll-Status bei Klick umdrehen:
this.scrollPermanent = !this.scrollPermanent;
}
else {
// Bei hovern des Schalters scrollen:
$('#start_stopp').attr('scrollAmount', this.customValue);
}
},
mouseOutSwitch: function() {
// Bei Hover-Ende ggf. Scroll-Ende und Standard-Bild:
if (!this.scrollPermanent) {
$('#startStopMarquee').attr('src', this.defaultImage);
$('#start_stopp').attr('scrollAmount', this.defaultValue);
}
},
hoverMarquee: function(hover) {
// Bei Hovern des Marquees je nach Schalter-Einstellung scrollen oder anhalten:
if ((hover && this.scrollPermanent) || (!hover && !this.scrollPermanent)) {
$('#start_stopp').attr('scrollAmount', this.defaultValue);
}
else {
$('#start_stopp').attr('scrollAmount', this.customValue);
}
}
};
</script>
 
</head>
<body>
 

<div class="box">
 
<div class="boxheader"><strong>Info Ticker!</strong></div>
 
<div class="boxcontent">
<img id="startStopMarquee" src="http://www.bilder-hochladen.net/files/kr03-y-e369.png" alt="" title="Info Ticker ein! - Noch in Arbeit!"
onclick="customMarquee.activateSwitch(true);"
onmouseover="customMarquee.activateSwitch(false);"
onmouseout="customMarquee.mouseOutSwitch();">
 
<span class="trenn_li">&nbsp;</span>
 
<marquee id="start_stopp" class="marquee1" behavior="alternate" scrollamount="0"
onmouseover="customMarquee.hoverMarquee(true);"
onmouseout="customMarquee.hoverMarquee(false);">
 
<nobr>
<span style="margin-right:200px;">
<a href="/t23f24-Herzlich-willkommen-im-Forum.html">Herzlich Willkommen</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/heart.gif" alt="" style="border:0;width:14px;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/forum.php?show=last">Beiträge der letzten Tage!</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/idee.gif" alt="" style="border:0;width:14px;">
</span>
</nobr>
</marquee>
 
</div>
</div>
 

</body>
</html>
 


Die Browser setzt ".....attr('scrollAmount', this.......Value);" nicht mehr richtig um!

Ich wollte das Script auch vereinfachen und zwar so:
+ Die Laufschrift läuft immer
+ Die Laufschrift kann durch ein Mouseover gestoppt werden
+ Mit den Schalter kann die Laufschrift ausgeschaltet werden
+ Ein Klick auf die Titelleist lässt den Ticker verschwinden (Script ist nicht extra aufgeführt - Spoiler öffnen/schließen)

Nachtrag:
Ich habe es hinbekommen, dass der Stopp per Mouseover und Button funktioniert. Selbst der Button wechselt sein aussehen.
Wenn die Laufschrift ausgeschaltet ist, wird auch nicht die Laufschrift nicht per Mouseover eingeschaltet!
Die Erkennung habe ich vom grafikzustand des Schalters abhängig gemacht
Gibt es hier eine kürzere Lösung?

Hier mein Ansatz:

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
60
61
62
63
64
 
<style type="text/css">
.marquee1 {margin-left:75px;margin-right:30px;padding:10px;width:auto;}
.marquee1 a {font-size:16px;font-family:Harrington;}
.marquee1 a:hover {color:#000055;text-decoration:none !important;}
 
.trenn_li {border-right:1px solid #dddddd;position:absolute;height:27px;margin:5px 0 5px 60px}

#startStopMarquee {width: 45px;position: absolute;padding-left: 10px;padding-top: 12px;border: 0;cursor:pointer;}
 
.addevent3 {position:absolute; right:20px;}
</style>
 
<script>
$(document).ready(function(){
 
//Start / Stop per Mouseover
var img = $(this).find("img").eq(0);
$("#start_stopp").hover(function () {
document.getElementById ("start_stopp").stop ();
}, function () {
 
if(img.attr("src") == "http://www.bilder-hochladen.net/files/kr03-x-182b.png")
{
document.getElementById ("start_stopp").start ()
}
else{
document.getElementById ("start_stopp").stop ();
}
 
});
 
//Stop per Button
$("#startStopMarquee").click(function(){
if(img.attr("src") == "http://www.bilder-hochladen.net/files/kr03-y-e369.png"){
 
img.attr("src","http://www.bilder-hochladen.net/files/kr03-x-182b.png");
document.getElementById ("start_stopp").start ();
}
else{
img.attr("src","http://www.bilder-hochladen.net/files/kr03-y-e369.png");
document.getElementById ("start_stopp").stop ();
}
 
});
});
</script>
 

 
<center>
<br>
<div id="span_20001" class="box" style="font-size:14px;text-align:left;width:95.5%;">
<div class="boxheader" onclick="javascript:clip(20001)" style="cursor:pointer;margin:0px;" title="Info Ticker ausschalten!"><strong>Info Ticker!</strong><span class="addevent3"}>X</span></div>
<div class="boxcontent">
 
<div id="startStopMarquee"><img src="http://www.bilder-hochladen.net/files/kr03-x-182b.png" alt="" title="Info Ticker stoppen!"></div>
<div class="trenn_li">&nbsp;</div>
 
<marquee id="start_stopp" class="marquee1" behavior="alternate" scrollamount="2"><nobr><a href="/t23f24-Herzlich-willkommen-im-Forum.html">Herzlich Willkommen</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/heart.gif" alt="" style="border:0;width:14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="/forum.php?show=last">Beiträge der letzten Tage!</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/idee.gif" alt="" style="border:0;width:14px;"></nobr></marquee>

</div>
</div>
</center>
 
 








Mit besten Dank im Voraus
Wolfgang

#7 RE: Start/Stop für Laufschriften von Wolfgang 26.02.2015 16:42

avatar

Hallo Florian,
habe es hinbekommen!

Kann man das Script so belassen oder lässt sich da noch etwas verbessern oder verkürzen???



Bis dann
Wolfgang

#8 RE: Start/Stop für Laufschriften von florian-zier 27.02.2015 00:44

avatar

Super!

Spontan sehe ich nur, dass in Zeile 6 nach margin und in Zeile 24 ein Semikolon am Ende fehlen. Mit Marquee habe ich mich nie sonderlich beschäftigt, sodass ich die richtigen Attribute und/oder Methoden-Aufrufe auch nicht direkt im Kopf habe. Ich werde demnächst nochmal etwas genauer drüberschauen, aber wahrscheinlich passt das so dann schon. Wenn die Möglichkeiten durch die Browser eingeschränkt wurden, wird da wohl nicht mehr viel Spielraum sein.

#9 RE: Start/Stop für Laufschriften - Nachtrag von Wolfgang 28.02.2015 11:37

avatar

Nachtrag!

Hallo Florian,
ich hatte die Laufschrift im Testforum ausprobiert, da lief sie.
Im aktiven Forum verschwand bei einem Button-Klick die Grafik in den Header.
Die Lösung war, eine genauere Position der Grafik zu bestimmen (<p>...</p> eingefügt).

Nachtrag:
Mit einer kleinen Änderung kann man sich die "Business-Ausblendungen" (Ausblendung der Forum-Kategorien) zur Hilfe nehmen und den Infoticker gespeichert ausblenden.


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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 

<style type="text/css">
.marquee1 {margin-left:75px;margin-right:30px;padding:10px;}
.marquee1 a {font-size:16px;font-family:Harrington;}
.marquee1 a:hover {color:#000055;text-decoration:none !important;}
 
.trenn_li {border-right:1px solid #dddddd;position:absolute;height:27px;margin:5px 0 5px 60px}

#startStopMarquee {width: 45px;position: absolute;padding-left: 10px;padding-top: 12px;border: 0;cursor:pointer;}
 
.addevent3 {position:absolute; right:20px;}
</style>

<script>
$(document).ready(function(){
 
var img = $(this).find("p").find("img").eq(0);
 
//Start / Stop per Mouseover
 
$("#start_stopp").hover(function () {
document.getElementById ("start_stopp").stop ();
}, function () {
 
if(img.attr("src") == "http://www.bilder-hochladen.net/files/kr03-x-182b.png")
{
document.getElementById ("start_stopp").start ();
}
else{
document.getElementById ("start_stopp").stop ();
}
 
});
 
//Stop per Button
 
$("#startStopMarquee").click(function(){
if(img.attr("src") == "http://www.bilder-hochladen.net/files/kr03-y-e369.png"){
 
img.attr("src","http://www.bilder-hochladen.net/files/kr03-x-182b.png");
document.getElementById ("start_stopp").start ();
}
else{
img.attr("src","http://www.bilder-hochladen.net/files/kr03-y-e369.png");
document.getElementById ("start_stopp").stop ();
}
 
});
});
</script>
 

<center>
<br>
 
<div class="main">
<div class="box cat" id="cat_1001" style="font-size:14px;text-align:left;width:95.5%;">
 
<div class="boxheader" style="cursor:pointer;margin:0px;" title="Mit einem Klick kann der 'Info Ticker' gespeichert aus- und wieder eingeblendet werden!"><strong>Info Ticker!</strong></div>
<div class="boxcontent">
<p><img id="startStopMarquee" src="http://www.bilder-hochladen.net/files/kr03-x-182b.png" title="Info Ticker stoppen!">
 
<div class="trenn_li">&nbsp;</div>
 
<marquee id="start_stopp" class="marquee1" direction="left" scrolldelay="40" behavior="alternate" scrollamount=2><nobr><div style="margin-left:-1300px;width:0px;"><span style="margin-left:200px;">&nbsp;</span><a title="Hallo und Herzlich Willkommen!" href="/t23f24-Herzlich-willkommen-im-Forum.html">Herzlich Willkommen{{user_registered==true.start}}&nbsp;{{user_name}}{{user_registered==true.else}}&nbsp;werter Besucher{{user_registered==true.end}}</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/heart.gif" border=0 width="14" alt="Erkenntnisse, Erfahrungen, Meinungen und Fragen">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a title="Beiträge der letzten Tage, tabellarisch geordnet" href="/forum.php?show=last">Beiträge der letzten Tage!</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/idee.gif" border=0 width="14" alt="Themen, Beiträge, Hinweise und Links auf einem Blick">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a title="Spiel, Spass, Witz und gute Laune" href="/f22-Spiel-Spass-Witz-gute-Laune.html">Heute schon gelacht?</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/laugh.gif" border=0 width="14" alt="Freude, lachen, you Tube">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a title="Präsentieren Sie Ihre Homepage oder Ihr Forum" href="/t22f26-Was-ist-notwendig-um-Ihr-Forum-vorzustellen.html">Präsentieren Sie Ihre Webseite!</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/idee.gif" border=0 width="14" alt="Ideen, Präsentation, Veröffentlichung">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a title="Freie Energie - Strom zum Nulltarif!" href="/t589f15-Freie-Energie-Strom-zum-Nulltarif.html">Freie Energie - Strom zum Nulltarif!</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/idee.gif" border=0 width="14" alt="Freie Energie - Strom zum Nulltarif!">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a title="Alles über Smartphones & IPhones!" href="/f47-Tricks-Tipps-fuer-Smartphones-und-iPhones.html"><font color="#aa0000">Neue Kategorie!</font> - Alles über Smartphones & IPhones!</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/idee.gif" border=0 width="14" alt="Android, Tethering, Mobiler Hotspot, Super Apps">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a title="Spenden-Button mit PayPal" href="/t720f31-Spenden-Button-fuer-das-Forum-einrichten.html">Spenden-Button fürs Forum einrichten</a>&nbsp;&nbsp;<a style="cursor:pointer;" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=SWWCBMSJJSXY8"><img src="https://www.paypalobjects.com/de_DE/DE/i/btn/btn_donate_SM.gif" border=0 width="60px" alt="Spenden, PayPal, finanziell unterstützen, helfen"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a title="Mehr Sicherheit, Blacklist im HPM-Forum" href="/t94f25-Wichtig-und-notwendig-Mehr-Sicherheit-im-Internet-und-im-Forum-Blacklist.html">Forum Blacklist!</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/death.gif" border=0 width="16" alt="Achtung, verdächtige Email auf einen Blick">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a title="No Spam, Email für Robots ausblenden" href="/t256f31-No-Spam-Email-Adressen-fuer-Robots-ausblenden.html">No Spam!</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/death.gif" border=0 width="16" alt="Achtung, Sichere Emails fürs Forum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a title="Google Spionage ausschalten" href="/t400f31-Google-Spionage-ausschalten.html">Google-Spionage ausschalten!</a>&nbsp;&nbsp;<img src="http://img.homepagemodules.de/death.gif" border=0 width="16" alt="Deaktivierung, Datenschutz, kontextsensitive Werbung"><span style="margin-left:200px;">&nbsp;</span></div></nobr></marquee>
 
</p>
 
</div>
</div>
</div>
</center>
 
 







Bis dann
Wolfgang

#10 RE: Start/Stop für Laufschriften - Nachtrag von Wolfgang 28.02.2015 15:31

avatar

Hallo Florian,
da ich die Ausblendung aus dem Business-Template und auch viele Skripte verwende, ist mir etwas aufgefallen.
Beim geschlossenem Div-Container und Seitenaktualisierung wird der Div -Container kurz geöffnet und dann geschlossen.
Ich hatte ein animiertes Öffnen und Schließen eingebaut, dass sich bei diesem Effekt beim Schließen ungünstig auswirkt.

Kann man die folgende Zeile so verändern, dass das Öffnen verzögert und das Schließen sofort erfolgt?
Kann man "toggle" mit zwei Zeiten angeben, z.B.: .toggle(1000,0) oder so ähnlich?

Oder ist es möglich "slideDown(0)" mit einzubauen?
Habe ich leider nicht hinbekommen.


$('.main').find('.cat').find('.boxheader').click(function(){$(this).parent().find('.boxcontent').toggle(1000); switchToggler($(this));});





Gruß
Wolfgang

#11 RE: Start/Stop für Laufschriften - Nachtrag von florian-zier 01.03.2015 20:36

avatar

Hallo Wolfgang,

ich habe nun ziemlich lange mit dem Marquee herumprobiert. Die Überlänge ist und bleibt einfach problematisch. Eine bessere Alternative zu margin-left und width:0; habe ich nicht mehr gefunden. Letztlich verschafft das nur ein wenig mehr Spielraum, denn sobald das zusätzliche DIV für diesen Workaround links/rechts an die Grenzen stößt, wird die Animation umgekehrt. D. h. bei kleiner Marquee-Breite und/oder extremst langem Inhalt müsste früher oder später ein gewisses Limit erreicht werden.


Das Marquee-Tag war nie Teil der offiziellen HTML-Spezifikation, sondern nur ein proprietäres HTML-Tag von Microsoft für den IE. Irgendwann wurde es dann zwar auch in den anderen Browsern irgendwie eingeführt, aber eben nie nach einer offiziellen Spezifikation. Das Marquee-Tag gilt auch längst als veraltet und abgesehen davon, dass z. B. Chrome lange brauchte, bis das Tag überhaupt unterstützt wurde, könnte es auch sehr bald wieder komplett entfernt werden (ähnlich dem Blink-Element). In CSS3 wurden neue Spezifikationen für Marquee-Anweisungen eingeführt, allerdings hat bei mir noch kein Browser diese umgesetzt, wahrscheinlich zu neu und das Interesse der Browser-Hersteller an Marquee hält sich womöglich auch in Grenzen, sodass erst andere Funktionen für HTML5 und CSS3 Priorität haben, könnte ich mir zumindest gut vorstellen.

Wenn also die Unterstützung des alten Marquee-Tags womöglich bald wegfällt und die neuen CSS3-Anweisungen noch eine Weile nicht unterstützt werden, wäre es eine Überlegung wert, generell auf Marquees zu verzichten. Hinzu kommt das Problem, dass es ablenkend wirken kann oder einfach ignoriert wird, denn wer will schon warten, bis das Marquee zum Ende durchgelaufen ist.


Das Verhalten mit dem sich kurz öffnenden Container bei der Seitenaktualisierung kann ich so nicht beobachten. Die jQuery toggle()-Dokumentation sieht jedenfalls keine zwei verschiedenen Zeiten vor, die möglichen Parameter-Kombinationen kannst du dort gut einsehen. Sowas wie slideDown(0) geht natürlich auch, macht es aber unnötig komplex, da du das togglen dann auftrennen musst. Setze doch einfach .toggle(0). Wenn das nicht klappt, dann entsteht diese kurze Verzögerung beim Laden der Seite, bis alles geladen ist und die Skripte ausgeführt werden. Jedenfalls sieht es nach unterschiedlichem Ladeverhalten aus, da ich den Effekt bei mir so nicht beobachten konnte.



So jetzt noch ein bisschen was zum eigentlichen Skript. Die Überlänge war zwar nicht mehr auf anderem Wege einzuschränken, allerdings entstand inzwischen auch ein neues Skript und HTML-Struktur. Meine Basis war hauptsächlich mein letztes Beispiel aus Beitrag #4, das hatte nach wie vor passende Einrückungen und noch nicht die zuletzt hinzugefügten extra HTML-Tags. In deiner letzten Variante ist ein SPAN mit margin-left und nur einem Leerzeichen übrigens sowohl ganz vorne als auch ganz hinten, also doppelt, in der Laufschrift vorhanden. Ich würde sagen, darauf kann komplett verzichtet werden, für den Fall, dass du daran nochmal weiterbasteln möchtest.

Jedenfalls wollte ich so gut es geht auf zusätzliche HTML-Tags verzichten. Generell sollten spätere Design-Anpassungen übrigens auch nur in der CSS und nicht durch zusätzliche HTML-Tags gelöst werden, das verursacht sonst immer mal wieder gerne Probleme. Zugleich habe ich die bisher vorhandene HTM-Struktur so umgestellt, dass sie mit weniger IDs und Klassen-Namen auskommt. Resultat ist eine Struktur, bei welcher nur einmal einem Element die Klasse .customMarquee vergeben werden muss. Dieses Element enthält dann die Tags img, span und marquee (in der Reihenfolge), ohne sich um weitere IDs und Klassen kümmern zu müssen. Auf diesen Aufbau sind auch CSS und JavaScript abgestimmt. Einerseits ist so das Risiko von Doppel-Belegungen durch IDs und Klassen verringert und andererseits ist es seit der Umstellung auf das neue Skript möglich, die gleiche HTML-Struktur mehrmals zu verwenden. Dadurch ist also die Einbindung mehrerer dieser Marquees möglich, welche sich problemlos getrennt voneinander hovern oder per Button deaktivieren lassen.

In Skripten ist es übrigens Empfehlenswert, dass die gleichen Strings nicht mehrmals an verschiedenen Stellen ausgeschrieben werden. Wenn du dich z. B. bei einer Bild-URL vertippt hättest, dann stimmt der Vergleich nicht mehr, selbst wenn er es eigentlich müsste. Und sofern du die gewünschten Bild-Adressen einmal ändern möchtest, musst du jetzt nicht mehr vorher herausfinden, wo genau welche Adresse stand und die überall einzeln austauschen. Du siehst nun sofort, welche Grafik die aktive und welche die inaktive sein soll und musst sie nur einmal austauschen.

Einzig die Kategorie-ID für die Klapp-Funktion muss ggf. beachtet werden und natürlich der Inhalt des Marquee, der Rest kann gleich bleiben. Bei meinem Beispiel siehst du jedenfalls, dass das erste Marquee ohne Überlänge ist und dadurch auch keinen besonderen Fix braucht. Das zweite Marquee besitzt außen sonst auch die gleiche Struktur, einzig ein zusätzliches DIV im Inhalts-Bereich sorgt noch dafür, die Überlänge in den Griff zu bekommen. Beachte, dass das negative margin-left in unterschiedlichen Browsern die Laufschrift u. U. unterschiedlich weit einfahren lässt (bei mir sowohl mit px als auch em). Während sie in einem Browser bspw. gerade hinter dem linken Rand verschwindet, ist das Ende in einem anderen Browser möglicherweise noch zu sehen, während die Laufschrift ihre Richtung bereits wieder umkehrt. Es ist eben nur ein Workaround, die Browser gehen mit den Breiten anscheinend unterschiedlich um.



Jetzt habe ich oben geschrieben, dass das Marquee-Tag nie offiziell war und dessen Zukunft auch nicht allzu rosig aussieht. Inzwischen gäbe es aber auch schon die Möglichkeit, einen ähnlichen Effekt mit CSS3-Animationen zu erreichen. Die alten IEs unterstützen das natürlich nicht. Dafür funktioniert es in den aktuellen Browsern und wird natürlich auch in Zukunft weiter unterstützt bleiben. Zusätzlich laufen diese Animationen meist hardwaregestützt von der Grafikkarte ab und entlasten somit den Prozessor für andere Aufgaben, zumindest sofern im Browser natürlich die Hardware-Unterstützung aktiviert wurde. Deshalb laufen die meisten JS-Marquees (CPU) auch so ruckelig ab im Gegensatz zu den CSS3-Animationen (GPU).

Daher habe ich als kleines Beispiel dazu auch noch eine dritte Laufschrift in mein Beispiel gepackt. Zudem wollte ich auch mal sehen, ob und wie die Variante alternate mit CSS3 umgesetzt werden kann. Der HTML-Code und die zugehörigen CSS-Anweisungen habe ich mit entsprechenden Kommentaren gekennzeichnet. Im CSS-Kommentar findest du auch noch zwei Links zu ähnlichen Umsetzungen für eine Alternate-Laufschrift. Meiner Meinung nach hatten die allerdings mehr HTML-Code (z.B. mit Wapper) und CSS-Anweisungen als wirklich nötig. In der von mir gebotenen Variante musst du je nach Inhalts-Länge immer nur das zweite text-indent (bei to) innerhalb von @keyframes marquee anpassen.
(Im Produktiv-Einsatz müssen die CSS-Anweisungen für Animationen nochmals mit zusätzlichen Browser-Präfixen ausgeschrieben werden, diese Arbeit lasse ich mir aktuell automatisch durch -prefix-free abnehmen.)

Für die anderen normal durchlaufenden Ticker findet man aber auch genügend Beispiele im Netz ("css3 marquee" / "css3 animation marquee"). Richtig schick finde ich die Demos von Creating Advanced “Marquee” with CSS3 Animation. Im Abschnitt "Addressing Marquee Issue" wird auch nochmals die Problematik mit Marquees erklärt inkl. einem Link zu einem Wiki-Artikel. Die Demo-Ticker umgehen diese Probleme relativ geschickt, sie besitzen keine konstante und dadurch nervige Bewegung, man konzentriert sich immer nur auf einen bestimmten Text und der ist auch einfacher zu lesen, weil er immer kurz stehen bleibt. Die Varianten sind so ausgelegt, dass der Text sowohl von der Seite als auch von oben oder unten eingeschoben werden kann.


#12 RE: Start/Stop für Laufschriften - Nachtrag von Wolfgang 02.03.2015 18:37

avatar



Hallo Florian,
besten Dank für die ausführliche und superlange Information.
Wenn Du nichts dagegen hast, würde ich Teile von Deinem Text in meinem Blog übernehmen.
Sehr viele und nützliche Informationen, die bestimmt auch andere marquee-Fans interessieren dürften.

Ich denke auch, das marquee irgendwie ausgedient hat. Mich hatte schon immer das Ruckeln gestört, wenn die Laufschrift etwas schneller sein sollte.
Die Einfachheit und Vielfalt hat mich fasziniert.
Es gab allerdings schon immer Scripte, auch nicht zu große, die eine ruckelfreie Laufschrift boten, aber nicht mit den vielen Optionen.
Bei Laufschriften mit CSS3 tut sich der IE11 immer noch schwer. Die Laufschrift auf "Creating Advanced" will nicht im IE11 laufen.

Interessanterweise laufen Deine "CSS3-Kreationen" (Anhang) auf allen Browsern (macht wohl das "prefix-free").

Dein Start-Stop Script ist natürlich wieder Klasse geworden. Ich habe mir schon gedacht, das man das Script eleganter schreiben kann.




Bis dann
Wolfgang

#13 RE: Start/Stop für Laufschriften - Nachtrag von florian-zier 02.03.2015 22:23

avatar

Hallo Wolfgang,

wenn du für deinen Blog verwertbare Informationen gefunden hast, darfst du die gerne verwenden.

Unter den vielen JS-Laufschriften gibt es leider nur einen geringen Prozentsatz an wirklich brauchbaren. Meistens leiden die eben wegen der Darstellung mit dem Prozessor (und manchmal viel zu komplizierter Berechnung) unter extremen Rucklern. Deshalb finde ich die mit CSS3 eingeführten Transitions und Animations so super, da oftmals viel JavaScript durch ein paar wenige geschickte CSS-Angaben ersetzt werden kann. Ansonsten sind Mischungen natürlich nach wie vor möglich.

Der Vorteil an der Verlagerung in CSS ist, dass die Effekte nicht mehr genauestens in JS ausprogrammiert werden müssen, sondern einfach nur angegeben wird, welchen End-Zustand ein Element wann einnehmen soll. Den Übergang von dem einen Zustand in den nächsten berechnet der Browser dann vollautomatisch. Im Idealfall von der Grafikkarte gestützt, die viel flüssigere Animationen/Übergänge berechnen kann, da sie für solche Sachen nunmal ausgelegt ist.

Es ist wirklich schade, dass die Demos von Creating Advanced “Marquee” with CSS3 Animation nicht direkt im IE funktionieren. War gestern noch unter Linux, habe es aber eben gerade in Windows gesehen. Allerdings muss man dazu sagen, dass die ersten Kommentare zu dem Artikel schon vor drei Jahren verfasst wurden und der IE meist nicht der erste Browser mit neuen Features an Bord ist. Vielleicht lässt sich das Beispiel aber dennoch im IE zum Laufen bringen. Mögliche Ideen gibt es noch gegen Ende dieses Beitrags.


Dennoch sollte der IE inzwischen eigentlich zumindest einige Angaben ohne spezielle Präfixe umsetzen können. Aber wirklich sicher bin ich mir da natürlich nicht. Ich konnte natürlich schön auf die zig browserspezifischen Schreibweisen verzichten, da ich, wie du auch schon schreibst, mir die Arbeit von -prefix-free habe abnehmen lassen. Die Styles werden übrigens nur manipuliert, wenn tatsächlich ein Präfix nötig ist. Ansonsten bleibt die Standard-Schreibweise einfach bestehen, wenn der Browser damit problemlos klarkommt. Es gibt nur wenige spezielle Szenarios, in denen -prefix-free nicht funktionieren soll, bisher hat es aber immer gut funktioniert, weil die gängigsten Einsätze davon abgedeckt werden. Was es so macht und warum es nur während der Entwicklung und nicht im Dauerbetrieb eingesetzt werden sollte, steht in diesem Artikel ganz gut beschrieben.

Hier nochmal das nötige Skript-Tag für den Head-Bereich:

1
 
<script src="https://rawgit.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
 


Der Vorteil liegt einfach darin, dass ich beim Entwickeln und Testen nicht immer sofort alle unterschiedlichen Varianten ausschreiben und bei jeder Änderung beachten muss. So wären das beim Beispiel transform zusätzlich u.a. -webkit-transform, -moz-transform, -o-transform, -ms-transform. Natürlich könnte ich bei der Entwicklung im Firefox auch erstmal immer nur die -moz-Schreibweise nehmen (bei transform inzwischen nicht mehr nötig), allerdings ist es ohne Präfix doch meist deutlich einfacher zu lesen. Hier gibt es auch eine Liste mit einigen Browser-Präfixen, wobei ich -khtml- und -mso- noch nie wirklich in freier Wildbahn gesehen habe.


Hinzu kommt, dass sich die offizielle Schreibweise von einigen Generatoren verarbeiten lässt, welche einem die Arbeit abnehmen, alles nochmals für jeden Browser auszuschreiben. Einer dieser Generatoren wäre z.B. Pleeease Play, welcher noch zusätzliche CSS-Modifikationen beherrscht. Ich persönlich verwende gerne den Autoprefixer, welcher als Plugin Autoprefix CSS im Sublime Text-Editor verwendet werden kann (vorher sollte man node.js installieren).

Damit einem kleinen Test zwischendurch nichts im Wege steht, habe ich versucht, eine Webiste zu finden, welche den Autoprefixer auch online bereitstellt. So bin ich über ein interessantes jsFiddle mit verwendbarem Autoprefixer gestoßen. Rechts unten kommt der originale CSS-Code in die rote Spalte, in der grauen Spalte wird dann automatisch der mit Präfixen ausgestattete CSS-Code ausgegeben.

Allerdings bietet das jsFiddle keine Änderung der Einstellungen an, wie es z.B. beim Plugin für Sublime Text möglich wäre. In der Richtung habe ich dann nur noch http://autoprefixer.github.io gefunden, eine eigentlich russische Seite, deren Link ich hier aber gleich mit dem Google-Translator ausgestattet habe. Hier gibt es unten ein zusätzliches Textfeld, mit dem die Ausgabe des Autoprefixer so beeinflusst werden kann, dass sie auch noch mehr Präfixe als in der Standard-Einstellung generiert. So werden bspw. bei der Eingabe von "last 20 version" im Textfeld unten so gut wie alle bekannten Präfixe für die jeweiligen CSS-Eigenschaften ausgegeben, um möglichst viele Browser-Versionen abdecken zu können. Beim Standard "last 2 version" wird hingegen oftmals nur noch zusätzlich -webkit eingefügt, da Firefox in den neuesten Versionen oft auch alles präfixlos akzeptiert und Opera inzwischen seine Engine ebenfalls auf Webkit umgestellt hat und damit statt -o ebenfalls auf -webkit reagiert.


Mir gefällt am Autoprefixer ziemlich gut, dass er auch mit Kommentaren und auch Umlauten darin bestens umgehen kann (manche Generatoren schneiden Wörter an Umlauten einfach ab). Wichtig ist hier auch, dass die präfixlose Schreibweise immer hinter den anderen steht. Praktischerweise wählt Autoprefixer die Reihenfolge und Einrückungen so, dass sie gut lesbar sind und optisch eine Treppe bilden, damit das eigentliche Schlüsselwort immer schön untereinander steht.

Um das kurz mal zu demonstrieren, habe ich hier den CSS-Code für das Marquee mit den CSS3-Animationen einmal kurz durch den Autoprefixer gejagt.

Original-Code und Resultat nach Generierung:
(Einstellung auf 20 Versionen, nur um möglichst viele Präfixe zeigen zu können)

CSS3-Animation ohne Präfixe:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
div.marquee {
overflow: hidden;
white-space: nowrap;
 
line-height: 50px; /* Marquee-Höhe */
animation: marquee 10s linear infinite alternate; /* enthält Dauer */
}
div.marquee:hover {
animation-play-state: paused;
}
@keyframes marquee {
from { text-indent: 101%; } /* Beginne nach rechtem Rand */
to { text-indent:-3400px; } /* Max. Verschiebung nach links */
}
 


CSS3-Animation mit generierten Präfixen:

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
 
div.marquee {
overflow: hidden;
white-space: nowrap;
 
line-height: 50px; /* Marquee-Höhe */
-webkit-animation: marquee 10s linear infinite alternate;
-moz-animation: marquee 10s linear infinite alternate;
-o-animation: marquee 10s linear infinite alternate;
animation: marquee 10s linear infinite alternate; /* enthält Dauer */
}
div.marquee:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes marquee {
from { text-indent: 101%; } /* Beginne nach rechtem Rand */
to { text-indent:-3400px; } /* Max. Verschiebung nach links */
}
@-moz-keyframes marquee {
from { text-indent: 101%; } /* Beginne nach rechtem Rand */
to { text-indent:-3400px; } /* Max. Verschiebung nach links */
}
@-o-keyframes marquee {
from { text-indent: 101%; } /* Beginne nach rechtem Rand */
to { text-indent:-3400px; } /* Max. Verschiebung nach links */
}
@keyframes marquee {
from { text-indent: 101%; } /* Beginne nach rechtem Rand */
to { text-indent:-3400px; } /* Max. Verschiebung nach links */
}
 




Ich denke, es ist gut zu sehen, dass nach Fertigstellen der eigentlichen Funktionalität ohne -prefix-free oder ein Plugin/Generator wie Autoprefixer nochmals einiges an zusätzlicher Schreibarbeit nötig wäre. So kamen zu dem CSS-Code, welcher ursprünglich insgesamt nur 14 Zeilen lang war, dann einfach mal so weitere 18 Zeilen hinzu. Hätte ich das alles sofort per Hand ausgeschrieben, wäre jede kleine Änderung immer an mehreren Stellen gleichzeitig nötig. Selbst es erst am Ende einmalig auszuschreiben würde auch viel weniger Spaß machen, als es einfach dem Generator zu überlassen. Der macht das genauso schön wie per Hand, nur eben um einiges schneller und einfacher.


Die "Advanced Marquees" funktionieren im Moment leider noch nicht direkt im IE. Allerdings kann man einen Blick in das dort verwendete Stylesheet riskieren und sieht dann, dass dort immer nur die -moz- und -webkit-Schreibweisen verwendet wurden. Deswegen funktioniert das Beispiel aktuell wohl auch nur in Firefox und Chrome, wobei auch Opera und Safari gut möglich wären, da sie ebenfalls weitestgehend auf Webkit basieren. Wenn du das Beispiel also selbst nochmal nachbaust, aber dabei auf die Präfixe verzichtest, läuft es am Ende möglicherweise auch wie gewünscht im IE. Um wirklich sicherzugehen, kannst du vorübergehend zusätzlich das Skript -prefix-free einbauen oder alternativ gleich die evtl. notwendigen Präfixe für den CSS-Code nachgenerieren lassen. Vielleicht kann es damit lauffähig gemacht werden.


#14 RE: Start/Stop für Laufschriften - Nachtrag von florian-zier 04.03.2015 01:57

avatar

So ich habe nun die "Custom Marquess" nachgebaut und in verschiedenen Browsern ausprobiert. Die Demos auf der Seite funktionieren nicht, weil die Keyframes (Schlüssel-Positionen für die Animationen) wie bereits vermutet nur mit den Präfixen für Firefox und Chrome/Webkit geschrieben wurden. Während die Anleitung alles präfixlos beschreibt, wurden die Demos hingegen auf genau diese beiden Präfixe eingschränkt. Benutzt man konsequent die präfixlose Schreibweise, funktioniert es neben Firefox und Chrome dann auch wie gewünscht im IE 10/11.

Es funktioniert sogar ohne die Einbindung von -prefix-free. Um möglichst viele Browser abdecken zu können, habe ich die Bibliothek dennoch weiterhin aktiviert gelassen. An der Vorlage habe ich sonst nichts wesentliches geändert, außer dass die Animation beim Hovern auch angehalten werden kann.

Hier das ausführlich dokumentierte Beispiel:





Ein ziemlich schicker Effekt wie ich finde, wenn man bedenkt, dass dazu keinerlei JavaScript nötig ist. Mir ist allerdings noch aufgefallen, dass es für jeden weiteren in die Laufschrift eingefügten Paragraphen (P-Tag) nötig wäre, ein weiteres Set an Keyframes zu definieren. Zusätzlich müssten alle vorangehenden Animations-Sets/Keyframes so umgeschrieben werden, dass jeder Paragraph wieder zu der richtigen Zeit eingeblendet wird. Das ist eben der Nachteil, wenn jedes Element seine eigene Animation zugewiesen bekommt und alle Animationen untereinander so abgestimmt werden müssen, dass sie später die Elemente zeitlich korrekt ein- und ausblenden.

Daher kam mir die Idee, für alle Elemente immer die gleiche Animation zu verwenden, welche nur für einen Bruchteil der Zeit ein Element einblendet. Damit die Texte dann aber nicht aufgrund der exakt gleichen Keyframes alle gleichzeitig eingeblendet werden, bekommen alle eine kleine Verzögerung zugewiesen.

Wie sieht dass dann also bei z.B. fünf verschieden anzuzeigenden Texten innerhalb von 20 Sekunden aus? Dabei soll die Anzeige-Zeit natürlich gleichmäßig unter allen Elementen aufgeteilt werden.
Nun werden die Keyframes immer von 0-100% vorgegeben, allerdings darf nur ein Fünftel der gesamten Animations-Dauer für ein einzelnes Element verwendet werden.
Daraus ergibt sich, dass genau 100% / 5 Elemente = 20% der Animation für Einblenden, Anzeige und Ausblenden eines Elements genutzt werden können.
Damit nun nicht alle Elemente gleichzeitig ihr Fünftel der Animation abspielen und danach lange nichts mehr passieren würde, bekommt noch jeder Paragraph eine kurze Verzögerung zugewiesen.
Bei einer Gesamtdauer von 20s wird im Prinzip jedem Element eine Animations-Zeit von 20s / 5 Elemente = 4s zugeteilt.
Somit erhalten alle ab dem zweiten Paragraphen eine aufsteigende Verzögerung mit dem Vielfachen von 4s.

Durch die Verzögerung wird für jeden Paragraphen die gleiche Animation so abgespielt, dass sie zeitlich versetzt genau im richtigen Moment abläuft. Der erste Paragraph wird sofort eingeblendet, der zweite nach 4s, der dritte nach 8s usw. …
Bei den Keyframes passiert für den Rest der Animation, also zwischen 20% und 100% nichts weiter, das Element bleibt einfach an seiner Ziel-Position stehen, bis die Animation wieder automatisch von vorne beginnt. Auch sehr viele Anzeige-Texte sollten kein Problem darstellen, selbst dann nicht, wenn sich die 100% nicht ganzzahlig darunter aufteilen lassen. Es sollten nämlich bis zu zwei Nachkommastellen bei den Prozentzahlen in den Keyframes möglich sein.

Letztlich läuft das Fünftel der Animation eines Paragraphen also nur zeitlich geschickt synchronisiert ab. Sollen weitere Texte ergänzt werden, müssen bei dieser Variante nicht mehr wie in der Original-Demo X Sets an Keyframes für X Anzeige-Texte definiert werden, sondern nur die Prozentzahlen der einen benötigten Animation neu aufgeteilt werden. Bei zehn Texten stünden also die ersten 10% Keyframes der Animation für Einblenden, Anzeigen und Ausblenden zur Verfügung. Für jeden Text wird dann noch eine entsprechende Verzögerung immer im Abstand von 2s vergeben.

Das sind wesentlich weniger neue und anzupassende Zeilen als in der Original-Demo. In Anbetracht dessen, dass sich die Texte wohl nur ab und zu ändern und selbst dann nur wenige Änderungen mit der letzten Variante nötig sind, ist das denke ich eine ziemlich brauchbare Laufschrift. Mir gefiel diese Art der Animation vor allem deshalb, weil sie sich nicht wie ein normales Marquee ständig bewegt und immer nur eine Mitteilung im Fokus steht. Dadurch bekommen die Inhalte gleich eine höhere Wertigkeit, ohne dabei störend zu wirken.

Die neue angepasste Version mit einfahrendem Text von oben:



Hier habe ich übrigens einen zusätzlichen CSS-Counter eingesetzt. Dadurch wird jedem Paragraphen seine Nummer vorangestellt. Eine kleine Spielerei, falls die Anzahl der Mitteilungen interessant sein könnte. Ebenso fahren hier die Texte nicht mehr von rechts, sondern von oben in den Ticker ein. Das sorgt für etwas Abwechslung zum ersten Beispiel.

#15 RE: Start/Stop für Laufschriften - Nachtrag von Wolfgang 24.03.2015 13:52

avatar

Hallo Forian,
besten Dank für Deine Ausführungen. Sehr informativ.
Die CSS3-Laufschrift ist super!

Habe noch eine Frage zu den CSS-Eintragungen:

1
2
3
4
5
6
 
		.customMarquee > img + span {
border-right: 1px solid #dddddd;
position: absolute;
height: 27px;
margin: 5px 0 5px 60px;
}
 



Werden die Zeichen > und + auch von älteren Browsern verstanden?
Hast Du einen Link, wo diese genauer CSS erklärt wird?




Bis dann und besten Dank, mal wieder!

#16 RE: Start/Stop für Laufschriften - Nachtrag von florian-zier 24.03.2015 21:38

avatar

Hallo Wolfgang,

alle mit CSS 2.1 kompatiblen Browser sollten diese Selektoren unterstützen.
Das Stichwort, welches du suchst, heißt "Kontext-Selektoren". In diesem Fall sind das die "Kind (>)"- und "Direkte Nachbar (+)"-Selektoren.


Hier findest du eine ganz gute Tabelle mit zusätzlichen weiterführenden Links:
http://www.w3.org/TR/CSS21/selector.html#pattern-matching

Eine deutsche Erklärung mit Beispiel-Schemas bietet diese Seite:
http://www.mediaevent.de/css/css-selekto...xtselektor.html
Oder alternativ mit HTML-Beispielen:
http://www.peterkropff.de/site/css/kontext_selektoren.htm

Die Browser-Kompatibilität und Statistiken kannst du bei "Can I use" einsehen:
http://caniuse.com/#search=adjacent%20sibling
(IE 6+7 werden erst nach Klick auf "Show all" eingeblendet.)

#17 RE: Start/Stop für Laufschriften - Nachtrag von Wolfgang 26.03.2015 09:43

avatar

Klasse Erweiterung! Habe ich nicht so oft gesehen!

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz