David: smooth scrolling?

Hallo.

Dank CSS + DHTML hat man ja die Möglichkeit, irgendwelche Elemente frei auf der Seite zu positionieren & zu bewegen. Doch will man dies für einen Scroller (zb. einen Nachrichten-Ticker) nutzen, muss man doch feststellen, daß es doch recht unschön ruckelt. Doch woran liegt dieses Ruckeln? Sicher nicht an meinem Rechner (P3, Voodoo3, 256 MB Ram). Hier mal der Quellcode:

----cut----

<SCRIPT LANGUAGE="JavaScript">
var posLeft = 0;

function ticker() {  

posLeft += 1;
  document.all.box.style.left = posLeft;
  setTimeout("ticker()", 0);
}

</SCRIPT>

<body>

<DIV STYLE="border:2px solid black">
<DIV ID="box" STYLE="position:relative; border:1px solid red">
  hello internet.
</DIV>
<SCRIPT>
  ticker();
</SCRIPT>
</DIV>

----cut----

Auch andere Angaben wie zb. Setzen des Timeouts auf 10 ms oder Ändern der Schrittweite auf 2 ändern nichts.

Was verursacht also dieses Ruckeln? Ist es der Browser selbst, der hier Probleme macht? Ist es JavaScript im allgemeinen? Oder nur die setTimeout-Funktion? Kann man überhaupt smooth-scrolling erreichen?

MfG (Mit fragenden Grüßen ;o),
  David

  1. Was verursacht also dieses Ruckeln? Ist es der Browser selbst, der hier Probleme macht? Ist es JavaScript im allgemeinen? Oder nur die setTimeout-Funktion? Kann man überhaupt smooth-scrolling erreichen?

    MfG (Mit fragenden Grüßen ;o),
      David

    Tja so ein Browser ist halt nicht für animationen gedacht. Um Flickern grundsätzlich zu verhinder müsste der Browser mit DoubleBuffering arbeit und der VerticalBlank abwarten. D.h. der Browser baut das neue bild in einem virtuellen Screen auf und tauscht diese bei der austastlücke(vblank) aus. So ein feature findest du bestimmt irgendwo bei deinen treiber für die Grafikkarte. Tja das gilt dann aber nur für die programme die Glide oder DirectX benutzen - und das währe mal was ganz neues bei Webbrowsern.

    Das einzige was ich dir empfehlen kann ist mit den Schrittweiten und timeOuts rumzuspielen. Mit ein bischen Probieren bekommt man ganz anständige ergebnisse hin. Ach ja wenn es auf deinem PIII gut aussieht heist das noch lange nicht das es das auch auf einem PI tut.

    MfG

    Timo

    1. Ich hatte auch ein paar komische Probleme mit meiner Grafikkarte. Nachdem ich Direct-x (Version 6) installiert habe, ist alles in Ordnung!

      Alles Gute,
      Reiner

  2. » Was verursacht also dieses Ruckeln? Ist es der Browser selbst, der hier Probleme macht? Ist es JavaScript im allgemeinen? Oder nur die setTimeout-Funktion? Kann man überhaupt smooth-scrolling erreichen?

    Ich denke schon, dass es geht. Schau doch einfach mal

    http://www.aquilon.de/beispiele/bsp_move.html

    an. Bei mir sieht es selbst auf dem alten Rechner mit P100 vernueftig aus. Auf dem PIII ist es ok und auf dem Mac sieht man dann absolut nichts mehr, was rueckeln koennte.

    Uebrigens sind alle Angaben in Timeout die kleiner als 50 ms sind unsinnig, da die Rechner mit kleineren Zeitabstaenden nicht korrekt rechnen koennen.

    Viele Gruesse, Thomas Hieck

    1. Hallo Thomas,

      Bei mir sieht es selbst auf dem alten Rechner mit P100 vernueftig aus. Auf dem PIII ist es ok und auf dem Mac sieht man dann absolut nichts mehr, was rueckeln koennte.

      Na toll. Muss mein Rechner scheisse sein ;). Es ruckelt auch weiterhin... aber wenn mein Rechner der einzige ist, und es bei den Besuchern schön aussieht, dann kann ich damit leben :).

      Gruss,
        David