Hallo zusammen,
wie würdet ihr einen Ticker in jQuery Programmieren, welcher von oben nach unten läuft und in einer Endlosschleife immer wieder ein und das selbe Bild nahtlos durchlaufen lässt (praktisch wie eine Walze).
Ich habe dies kürzlich in einer Scroll-Box realisiert, indem ich diese (sie hat 1/2Bild-Höhe) zunächst nach unten gescrollt habe und den margin-top Wert in einer Schleife erhöht habe, bis ich den Anfang des Bildes erreicht habe. Danach beginnt das Spiel von vorne. (leider steht noch ziemlich viel anderes Zeug in der Funktion, so dass ich sie nicht mal eben posten kann, sry)
Das Problem bei diesem Ansatz ist, dass die Ressourcen-Auslastung des Browsers ins unermessliche Steigt. Hat jemand einen anderen, besseren Ansatz, wie man das realisieren kann?

Wenn es nur um ein Bild geht ist background-image immer eine gute Wahl.

HTML-Code:

<div id="ticker" style="background:url(foo.jpg) repeat-y 0px 0px;"><!----></div>

Code javascript:

1 2 3 4 5 6 7

var elem = document.getElementById('ticker'); var y = 0;   window.setInterval(function() {     y++;     elem.style.backgroundPosition = '0px ' + y + 'px'; }, 33);

Um genau zu sein verdopple ich das Bild eigentlich, um Ladezeiten zu sparen. Und damit beim endlos-Durchlauf keine Übergänge zu sehen sind. Ich werde gleich morgen einmal deinen Ansatz mit dem Hintergrundbild ausprobieren. Ich hoffe, dass die Systemauslastung hier geringer ist, anstelle dem Margin-Ansatz.
Falls du dich fragst, wofür ich das Ganze benötige: Ich bastle zur Zeit an einem Parallax-Banner. d.h. ich habe auch mehrere Scrollboxen übereinander, welche parallel in unterschiedlichen Geschwindigkeiten durchlaufen.

Auf welchem Browsern soll das später laufen? Wenn du das einschränken kannst, dann bekommst du auch hardwarebeschleunigte Animationen.

Hier eine Demo für Firefox

http://dabblet.com/gist/1503419

WOW! Das ist genial Ich wusste nicht, dass man soetwas nun auch mit CSS realisieren kann.
Gedacht ist es tatsächlich primär für den Firefox. So kann zumindest in jQuery schon einmal eine Unterscheidung vornehmen, welcher Browser gerade benutzt wird und ggf. dann der CSS-Ansatz verwendet werden.
Doch es wäre auch schön, wenn es in Webkit-Browsern (wie Safari und Chrome) laufen würde. Hmm und Opera wäre auch ganz nett. Also eigentlich die gesamte Palette, ausgenommen dem IE... der nervt mir zu sehr im CSS-Bereich herum. :P
Danke für den Tipp! Mal sehen, ob es diese CSS-Animationen auch für Webkit gibt

Melde mich dann morgen wieder, gute Nacht

Mein Beispiel war nur für Firefox, aber das funktioniert vor allem auch in Webkit Browsern. Webkit ist was das angeht führend.

http://caniuse.com/#search=css3%20animation

Hallo,
CSS Animationen sind gena das richtige, allerdings noch nicht auf Desktop Umgebungen. Zumindest kommst Du um eine Fallback Lösung per JavaScript nicht herum.

Generell ist die Manipulation von DOM immer eine sehr CPU lastige Lösung.

Eine andere Alternative wäre Flash.

Danke CPoly für deine Hilfe und den Link. Dieser CSS-Ansatz funktioniert wirklich um ein vielfaches besser als alles Andere. Wobei (als Anmerkung und für die Nachwelt) ich keine wirkliche Ressourcen-Auslastungsverbesserung beim Background-Image-Ansatz gegenüber dem Margin-Top-Ansatz feststellen konnte - sie arbeiten gleich schlecht.

Ich denke es ist nicht verwunderlich, dass CSS3-Animationen auf Desktop-Umgebungen noch nicht wirklich gut laufen. Anwendungsgebiete gibt es sicher kaum (meine Hypothese), da man desktopspezifische Möglichkeiten hat oder man sich gleich auf eine Bibliothek, wie Webkit stützt, so dass sie auf einer Desktop-Umgebung genau so gut laufen, wie im Browser.

Wieso soll ich das ganze als JavaScript Callback-Lösung realisieren? Hat das Vorteile? Eine einfache Fallunterscheidung sollte doch genügen.
1. CSS-Code für Animation für FF und Webkit standardmäßig in die Seite einbetten. (Wenn ein anderer Browser die Seite lädt, ignoriert er diesen Teil eh.)
2. in jQuery prüfen ob Browser nicht FF oder nicht Webkit ist und dann ggf. bisherigen Ansatz (background-image oder margin-top Ansatz) anwenden.
Wo soll hier eine Callbackfunktion hilfreich sein?

Zitat von Sturmrider

Wo soll hier eine Callbackfunktion hilfreich sein?

Ich kann dir nicht folgen. Außer in deinem Post kommt nirgendwo das Wort "callback" vor.

Zitat von Sturmrider

in jQuery prüfen ob Browser nicht FF oder nicht Webkit ist und dann ggf. bisherigen Ansatz (background-image oder margin-top Ansatz) anwenden.

Das sollte man nicht machen. Es ist besser "feature detection" zu machen als "browser detection". Hier ein Beispiel wie man prüfen kann, ob der Browser css animationen unterstützt:

http://hacks.mozilla.org/2011/09/det...in-javascript/

Der Teil mit "Callback" bezog sich auf abstractizm's Nachricht. Er schrieb von einer Fallback Lösung und ich dachte, dass es sich dabei um einen Tippfehler, wie auch an anderer Stelle handelt.

Stimmt "feature detection" ist sicherer, da ein Seitenbesucher zwar einen FF benutzen kann, dieser aber evtl. CSS Animationen nicht unterstützt. Danke für den Hinweis