Smoothy-Scrolling

Sebigf

Sebigf

Erfahrenes Mitglied
Hallo zusammen!

Jeder hat es schon einmal gesehen... Das "elegante" aufklappen einer Navi oder eines Kastens mit Inhalten.

Ich hoffe ich bin hier überhaupt richtig gelandet.
Es geht darum, dass man auf den besagten Button klickt, und das/der Inhalt "weich" herausfährt. Also nicht dieses plumpe auf <-> zu.

Kann da jemand etwas zu sagen, wie es geht bzw. ob es mit JS möglich ist ?

Danke
 
Eigentlich brauchst du ja nur eine sog. rekursive Glättungsfunktion. Mit jedem Schritt nähert sie sich diesem Wert an, wobei die Schritte immer kleiner Werden. Das wird optisch als elegant empfunden. Du iterierst das ganze, d.h. du setzt die Funktionswerte vom vorigen Durchlauf wieder in die Funktion ein und wiederholst das. Damit das nicht unendlich weiter geht, brauchst du noch eine Abbruchbedingung. Die Funktion konvergiert innerhalb eines Intervalles gegen einen festen Wert. Das Intervall ist in deinem Fall die Strecke von der Anfangspostition zur Endposition, dem Konvergenzpunkt. Die Abbruchbedingung ist schlicht und einfach erfüllt, wenn bis auf Rundung Konvergenzpunkt und Funktionswert identisch sind.

Sorry, falls das unverständlich war - das Physikstudium hinterlässt seine Spuren (bin grad mitten in der Prüfungsvorbereitung). Hier mal ein Beispiel:
HTML: 
<script type="text/javascript"><!--
var x = 100,                                     //Konvergenzwert
    oldx = 0;

window.onload = move;

function move() {
    document.getElementById('blubb').style.left =
        Math.round(oldx+=.005*(x-oldx)) +'px'; //Glättungsfuntkion selber
    if ( Math.round(oldx) != Math.round(x) )  //Abbruch-Bedingung
        setInterval('move()',10);              //Starten des nächsten Interationsschrittes
}

//-->
</script> 

<div id="blubb" style="position:absolute;left=0px;background-color:#00f">Ich bewege mich elegant (mehr oder weniger)</div>
Du kannst die Geschwindigkeit über die Iterationsgeschwindigkeit (Zahl im "setTimeout") oder über die Konvergenzgeschwindigkeit (Kommazahl nach dem "+=") regeln.
 
Zuletzt bearbeitet:
Ne, ich habe es verstanden. Geht auch bei mir...

Ist aber leider nicht das, was ich suche, sorry für die Mühe!

Eigentlich ist es hier im Forum schon vorhanden...
Ich meine soetwas wie beim "Suchen" Link oben im Head-Teil von tut.de

Einziger unterschied, das Fenster soll sich nicht proportional aufbauen, sondern einfach nur von oben "einfahren". Dabei soll der darunter liegende Content weiter nach unten gerückt werden...

Wie mache ich sowas ?

PS: Habe wohl den Titel etwas falsch gewählt... sorry con-f-use ;)
 
Der Aufbau einer solchen Function.
Bzw. ging es mir in erster Linie darum, WIE ich sowas anstellen kann mit JS.
Hast es aber mit deinem Beispiel soweit schon gezeigt...

Dachte nur, der Link bringt vielleicht mehr Licht ins ganze, damit vielleicht besser versteht, was ich meine :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück