Scroll Schnelligkeit einzelner Elemente verändern (Website)?
Ich habe ein ELement (zB ein Div) und möchte dass dieses div langsamer nach oben scrollt als andere Elemente auf der Seite - Wir nehmen zB an ich habe 4 divs: Jedes Div soll in einer anderen Geschwindigkeit nach oben scrollen.... Wie könnte man das mit JS/CSS umsetzen? Am besten mit Erklärung - im Internet finde ich leider nur fertigen Code den ich nicht einfach so einsetzen will ohne ihn zu verstehen :)
1 Antwort
Du plazierst die Elemente so auf der Seite, dass du selbst ihre Position bestimmen kannst. Und eben das tust du dann entsprechend so, dass das eine Element schneller scrollt als das andere.
Mal ein Beispiel, das etwas ähnliches tut:
https://destra.uber.space/resources/scripts/index.js
Das lässt Schneeflocken fallen. Auf ähnliche Weise kann man Elemente scrollen lassen.
Den Style musst du entsprechend wählen, dass es passt (kannst du über die Browserkonsole beispielhaft ansehen).
Was hier passiert ist folgendes:
In jedem Schritt "updateSnowflakes" wird berechnet, wie viel Zeit seit dem letztem Update vergangen ist. Dann wird jede Schneeflocke mit ihrer Geschwindigkeit in die passende Richtung bewegt, sofern sie nicht außerhalb des Fensters ist.
"window.requestAnimationFrame" ist dafür da um dem Browser zu sagen, dass er die Funktion aufrufen soll, wenn er dafür bereit ist. Dadurch wird das Ergebnis möglichst flüssig.
Ähnlich kannst du das auch machen, nur setzt du für jedes deiner Elemente einen eigenen Speed und clampst die Elemente an den Rand des Dokumentes statt sie zu löschen, wenn sie außerhalb sind.
Zudem willst du die Bewegung an die Scrollposition koppeln, die du auch über Javacsript erhalten kannst.
Habe ich verlinkt:
function updateSnowflakes(updateTime){
var deltaTime = updateTime - lastUpdateTime;
lastUpdateTime = updateTime;
var snowflakes = document.getElementsByClassName("snowflake_ascii_art");
for(var i = 0; i < snowflakes.length; ++i){
var snowflake = snowflakes[i];
if(snowflakePositionY.get(snowflake) > maxHeight){
snowflake.remove();
snowflakePositionY.delete(snowflake);
}else{
snowflakePositionY.set(snowflake, snowflakePositionY.get(snowflake) + (convertRemToPixels(SNOWFLAKE_FALL_SPEED) * deltaTime/1000.0));
snowflake.style.top = snowflakePositionY.get(snowflake) + "px";
}
}
window.requestAnimationFrame(updateSnowflakes);
}
Bei dir dürfte es ähnlich aussehen von der Grundstruktur, nur dass du eben nicht immer bewegst, sondern nru beim scrollen. Zudem eben mit unterschiedlichem Speed und deine Fallunterscheidung dient zum clampen, nicht zum löschen.
Könntest du evt Mal eine Beispielfunktion für diesen beschrieben Fall schreiben? Irgendwie komme ich gerade gar nicht damit klar....