• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Laufschrift mit CSS3

Status
Für weitere Antworten geschlossen.
J

joergi

Mitglied
Hi,

ich möchte gerne eine Laufschrift mittels CSS3 erstellen. Dazu habe ich den untenstehenden Code gefunden, den ich leicht geändert habe. Der Script läuft auch einwandfrei. Jedoch gibt es zwei Punkte, die mich stören:

1. Je länger der Text, desto schneller scrollt der Text. Gibt es eine Möglichkeit, den Text, unabhängig der Länge, in einer festen Geschwindigkeit zu scrollen?
2. Der Text hackt teilweise d.h. bleibt kurz stehen und scrollt dann weiter. Gibt es hier eine Möglichkeit, das ganze zu optimieren?

Könnt Ihr mir helfen? Bin leider komplett ratlos. Danke im voraus :)



<style>
.marquee {
width: 600px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
-webkit-animation: marquee 15s linear infinite;
}
@-webkit-keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
</style>
<div class="marquee"><span>Das ist ein Test</span></div>
 
Zuletzt bearbeitet:
Hi joergi,

du hast ja eine Zeit (hier 15s) für die Animation eingestellt. Hast du einen langen Text, läuft der Text schneller, weil der gesamte Text vom ersten Buchstaben bis zum letzten in 15s durch sein muss.

joergi schrieb:
animation: marquee 15s linear infinite;
-webkit-animation: marquee 15s linear infinite;
Zum Vergrößern anklicken....

Bei einem kurzen Text muss nicht so viel "links verschwinden", das ganze kommt dir dann langsamer vor. Erhöhe einfach den Wert bei einem längeren Text.
Willst du eine konstante Geschwindigkeit, würde ich das mit Javascript lösen. Damit könntest du die Textlänge ermitteln und je nachdem dann die Geschwindigkeit berechnen.

Und zur zweiten Frage, welchen Browser benutz du denn? (Vermutlich Firefox)
Auch bei mir hat der Firefox hier performancetechnische Probleme.
Du könntest das ganze natürlich erweitern:

Code: 
-moz-animation: marquee 30s linear infinite;
Code: 
@-moz-keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}

Ob es was bringt. Eher nicht. Aber vielleicht in nächster Zukunft ;)
Matthias
 
Hi,

danke für Eure Antwort. Wollte das ganze eigentlich ohne JS machen. Werde es mir aber trotzdem mal anschauen. Und bei dem eigentlichen Vorhaben, das ganze mittels CSS zu realisieren, ist mir auch schon eine Idee gekommen. Mit Hilfe von PHP würde ich die Buchstaben in der Laufschrift zählen und die Lufzeit berechnen. Diesen Wert würde dann in das "Style" Argument übertragen werden. Aber ich tüftel noch :-)
 
Probier mal, ob es dir so reicht.
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>marquee</title>
<style>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
.marquee {
width:600px;
margin:10px auto;
padding:2px;
border:1px solid;
white-space: nowrap;
overflow: hidden;
}
.marquee span {
display:block;
margin-left:100%;
width:100%;
font-size:14px;
text-align:center;
animation: marquee 25s linear infinite;
-webkit-animation: marquee 25s linear infinite;
}


@-webkit-keyframes marquee {
0% {  transform: translate(0%, 0);}
100% { margin-left:-100%;transform: translate(-100%, 0);}
}

@keyframes marquee {
0% { transform: translate(0, 0);}
100% { margin-left:-100%; transform: translate(-100%, 0); }
}
</style>
</head>
<body>
<!-- Mit der Textlänge bitte nicht übertreiben-->
<div class="marquee"><span>Das ist ein Test Das ist ein Test  Das ist ein Test  Das ist ein Test  Das ist ein Test  Das ist ein Test</span></div>
<div class="marquee"><span>+++ Das ist ein Test +++</span></div>
</body>
</html>

Wenn deine Texte nicht übermäßig lang sind, sollte es so ausreichen.

http://www.gipspferd.de/forumhilfe/marquee/
 
Zuletzt bearbeitet:
Hi,

danke für Eure Hilfe. Leider entsprach das letzte Script nicht meinen Bedürfnissen. Aber ich habe jetzt eine Lösung gefunden. Da Ich den Laufschrifttext aus diversen PHP Berechnungen ermittel, habe ich folgendes programmiert:

<?php
$ticker="Das ist ein beliebig langer Text";
$ticker2=strlen($ticker);
$ticker3=10+($ticker2*0.13);
?>

<style type="text/css">
.marquee {
width: 600px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee <?php echo $ticker3;?>s linear infinite;
-webkit-animation: marquee <?php echo $ticker3;?>s linear infinite;
-moz-animation: marquee <?php echo $ticker3;?>s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
@-webkit-keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
@-moz-keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
</style>

<div style="font-size:16px;"class="marquee"><span><?php echo $ticker; ?></span></div>

Unabhängig von der Länge, scrollt der Text in einigermaßen gleichen Tempo d.h. der erste Buchstabe erreicht das linke Ende nach ca. 10 Sekunden, was auch gewollt ist :-) Erfolgreich getestet mit Firefox, Chrome und IE!
 
Denke aber bitte daran, dass Laufschriften sehr nerven können. Also am besten nur einmal scrollen lasen.

@edit: Noch etwas, mit deiner PHP Variante hat sich nicht wirklich viel geändert.
 
Zuletzt bearbeitet:
Hi, werde mit der Laufschrift sparsam umgehen.

Also der PHp script ändert eigentlich schon etwas. Dieser bewirkt, das die Laufschrift, unabhängig der Länge, größtenteils im selben Tempo scrollt :-)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben