Hallo,
zuerst einmal die Tatsache, dass ich nicht sonderlich gut in Mathematik bin und ich wahrscheinlich deshalb dieses Problem bisher noch nicht gelöst habe. Wahrscheinlich kennen viele von euch Webseiten, wo sich ein Element (sei es ein Bild) synchron zur Scrollposition bewegt. Ein Beispiel ist zum Beispiel dieses jQuery Plugin, das quasi schon genau das kann, was ich suche, allerdings eben nur fast: http://prinzhorn.github.io/skrollr/
Wenn man hier nach unten scrollt, animieren sich die Elemente auf unterschiedlichste Art und Weise. Gibt auch noch andere Beispiele, wie diese iPhone App: http://nizoapp.com. Soweit der Grundgedanke, nun zu dem Problem: Mit dem "Skrollr" Plugin lassen sich zwar Seiten wie die Nizo Seite relativ einfach umsetzen, allerdings funktioniert Skrollr mit data-Attributen, was natürlich super einfach ist, allerdings dadurch auch wieder relativ "statisch" und in meinem speziellen Fall nicht zu brauchen (zu meinem Fall gleich noch mehr). Ich bräuchte also eine JS Funktion, die in meinem Kopf ungefähr so funktioniert:
Nur zur Erklärung die Werte, die ich mir frei ausgedacht habe:
1. Parameter: Den Startwert, von der die Position aus anfängt, in dem Fall fängt die Bewegung bei -300px an.
2. Parameter: Der Endwert zu der animiert wird. Das Element bewegt sich also von -300 zu 0
3. Parameter: Die Skrollposition ab der die Animation anfangen soll, in dem Fall fängt die Animation an, sobald man 500px nach unten gescrollt hat.
4. Parameter: Die Zeit (in px) bis die Animation beendet ist. Also bei 700px (500px + 200px) bleibt das Element an der Endposition stehen.
Ich bin mir nicht ganz sicher, ob so etwas möglich ist, da allerdings Skrollr genau so etwas macht, denke ich, dass es mit einer mathematischen Berechnung möglich sein sollte, die allerdings bisher jenseits meiner mathematischen Fähigkeiten liegt. Ich habe also gesucht, nichts wirklich gefunden, außer ein Tutorial, dass erklärt, wie man so eine Seite, wie die Nizo App umsetzt (ohne plugin): http://pehaa.com/2011/08/intriguing-animate-on-scroll-effect-jquery-tutorial/
Klang ganz gut, funktioniert auch, allerdings sieht die Funktion, die die Bewegung berechnet, so aus:
Man kann quasi nur den Startwert und den Endwert angeben und einen Parameter "s", der in etwa vergleichbar mit der Distanz ist, aber eben nicht ganz. Eher irgendeine "Magic-number". Außerdem kann man nicht angeben, ab wann die Animation starten soll. Die Frage ist nun, ob eine Funktion wie die oben angedachte "linearMovement" überhaupt möglich ist (vielleicht muss man nur die "move" Funktion irgendwie erweitern) und ob irgendjemand in der Lage ist so eine Funktion zu schreiben?
Mein eigentliches Ziel, bei der ich diese Funktion bräuchte (geht evt. auch anders, aber mit einer solchen Funktion hätte ich etwas, das man immer wieder verwenden kann) ist nur eines von vielen, weil ich eine solche Funktion sicherlich schon öfter gebraucht hätte und deshalb immer irgendeine Notlösung machen musste:
Lässt sich ganz kurz beschreiben, ist nichts super spezielles, aber es sollte so funktionieren wie: http://nzopera.com/2013/don-giovanni
Sobald man ein bisschen nach unten scrollt, passiert erstmal nichts, außer dass die Navigation schonmal relativ zur Scrollposition zusammengeschoben wird (das ginge mit Skrollr allerdings auch problemlos). Sobald man allerdings weiter nach unten scrollt, verschwindet die Navigation erstmal komplett - auch noch alles relativ einfach machbar. Die Navigation wird erst dann wieder sichtbar, wenn man nach oben scrollt. Das Besondere ist allerdings, dass sich diese Navigation nicht einfach per jQuery "animate" oder CSS Transitions wieder reinbewegt, sondern wieder relativ zur Scrollposition (Einfach einige Zeit nach unten scrollen und dann wieder langsam nach oben, um es zu sehen). Und genau das ist mir ein Rätsel. Mit einer Animation wie oben angedacht, könnte ich so etwas auch umsetzen, aber leider fehlt mir dieses Stück noch.
Ich hoffe ihr könnt mir helfen, vielen Dank schonmal und Grüße
zuerst einmal die Tatsache, dass ich nicht sonderlich gut in Mathematik bin und ich wahrscheinlich deshalb dieses Problem bisher noch nicht gelöst habe. Wahrscheinlich kennen viele von euch Webseiten, wo sich ein Element (sei es ein Bild) synchron zur Scrollposition bewegt. Ein Beispiel ist zum Beispiel dieses jQuery Plugin, das quasi schon genau das kann, was ich suche, allerdings eben nur fast: http://prinzhorn.github.io/skrollr/
Wenn man hier nach unten scrollt, animieren sich die Elemente auf unterschiedlichste Art und Weise. Gibt auch noch andere Beispiele, wie diese iPhone App: http://nizoapp.com. Soweit der Grundgedanke, nun zu dem Problem: Mit dem "Skrollr" Plugin lassen sich zwar Seiten wie die Nizo Seite relativ einfach umsetzen, allerdings funktioniert Skrollr mit data-Attributen, was natürlich super einfach ist, allerdings dadurch auch wieder relativ "statisch" und in meinem speziellen Fall nicht zu brauchen (zu meinem Fall gleich noch mehr). Ich bräuchte also eine JS Funktion, die in meinem Kopf ungefähr so funktioniert:
HTML:
var
$window = $(window),
$el = $(".element"),
scrollTop;
$(window).on("scroll", function() {
scrollTop = $window.scrollTop();
$el.css({
"translateX" : linearMovement(-300, 0, 500, 200)
});
});
function linearMovement(startValue, endValue, startingPoint, time) {
return ...;
}Nur zur Erklärung die Werte, die ich mir frei ausgedacht habe:
1. Parameter: Den Startwert, von der die Position aus anfängt, in dem Fall fängt die Bewegung bei -300px an.
2. Parameter: Der Endwert zu der animiert wird. Das Element bewegt sich also von -300 zu 0
3. Parameter: Die Skrollposition ab der die Animation anfangen soll, in dem Fall fängt die Animation an, sobald man 500px nach unten gescrollt hat.
4. Parameter: Die Zeit (in px) bis die Animation beendet ist. Also bei 700px (500px + 200px) bleibt das Element an der Endposition stehen.
Ich bin mir nicht ganz sicher, ob so etwas möglich ist, da allerdings Skrollr genau so etwas macht, denke ich, dass es mit einer mathematischen Berechnung möglich sein sollte, die allerdings bisher jenseits meiner mathematischen Fähigkeiten liegt. Ich habe also gesucht, nichts wirklich gefunden, außer ein Tutorial, dass erklärt, wie man so eine Seite, wie die Nizo App umsetzt (ohne plugin): http://pehaa.com/2011/08/intriguing-animate-on-scroll-effect-jquery-tutorial/
Klang ganz gut, funktioniert auch, allerdings sieht die Funktion, die die Bewegung berechnet, so aus:
HTML:
function move(p0, p1, s) {
return Math.min((-p0 + p1) / s_max * s + p0, p1);
}Man kann quasi nur den Startwert und den Endwert angeben und einen Parameter "s", der in etwa vergleichbar mit der Distanz ist, aber eben nicht ganz. Eher irgendeine "Magic-number". Außerdem kann man nicht angeben, ab wann die Animation starten soll. Die Frage ist nun, ob eine Funktion wie die oben angedachte "linearMovement" überhaupt möglich ist (vielleicht muss man nur die "move" Funktion irgendwie erweitern) und ob irgendjemand in der Lage ist so eine Funktion zu schreiben?
Mein eigentliches Ziel, bei der ich diese Funktion bräuchte (geht evt. auch anders, aber mit einer solchen Funktion hätte ich etwas, das man immer wieder verwenden kann) ist nur eines von vielen, weil ich eine solche Funktion sicherlich schon öfter gebraucht hätte und deshalb immer irgendeine Notlösung machen musste:
Lässt sich ganz kurz beschreiben, ist nichts super spezielles, aber es sollte so funktionieren wie: http://nzopera.com/2013/don-giovanni
Sobald man ein bisschen nach unten scrollt, passiert erstmal nichts, außer dass die Navigation schonmal relativ zur Scrollposition zusammengeschoben wird (das ginge mit Skrollr allerdings auch problemlos). Sobald man allerdings weiter nach unten scrollt, verschwindet die Navigation erstmal komplett - auch noch alles relativ einfach machbar. Die Navigation wird erst dann wieder sichtbar, wenn man nach oben scrollt. Das Besondere ist allerdings, dass sich diese Navigation nicht einfach per jQuery "animate" oder CSS Transitions wieder reinbewegt, sondern wieder relativ zur Scrollposition (Einfach einige Zeit nach unten scrollen und dann wieder langsam nach oben, um es zu sehen). Und genau das ist mir ein Rätsel. Mit einer Animation wie oben angedacht, könnte ich so etwas auch umsetzen, aber leider fehlt mir dieses Stück noch.
Ich hoffe ihr könnt mir helfen, vielen Dank schonmal und Grüße
