Fly-in Fly-out-Effekt auf scroll jquery css animation
Ich versuche, die Elemente auf meiner Website fly-in und fly-out auf Blättern.
Dies ist der Effekt, den ich Suche.
Den Effekt in den nizo-site mit jquery, ich denke
Habe ich versucht viele verschiedene Möglichkeiten, um diesen Effekt zu arbeiten, mit Skrollr, scrollorama und jquery animieren und mit css transitions etc etc etc
Entschied ich mich für css-übergänge, wie verrückt durch den "css-animation cheat sheet" (google es)
Nach viel Mühe und einigen geliehen code, ich habe es halbwegs funktioniert, wie in, bekomme ich die Elemente zum fly-in nach unten scrollen, aber nicht Fliegen zurück auf die oben Blättern.
Dies ist ein jsfiddle mit der Hälfte der Arbeit
http://jsfiddle.net/mrcharis/Hjx3Z/4/
Den code......
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function () {
$('.box').each(function (i) {
if (isScrolledIntoView(this)) {
$(this).addClass("slideRight");
}
});
});
//this is the function to check if is scroll down or up, but I cannot get it to trigger the fly in effect,
(function () {
var previousScroll = 0;
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
//i figure to put the fly-in code here
}
else {
//and the fly-out code here
}
previousScroll = currentScroll;
});
}());Habe ich versucht, mit einer anderen Funktion (code-chunk) zu prüfen, ob der Bildlauf nach oben oder unten, aber ich kann nicht erhalten, es funktioniert mit dem vorhandenen code.
Jede Hilfe zu bekommen, diese Arbeit wäre genial
Einen schönen Tag
Werde ich die Lösung posten eines Tages, wenn ich es herausfinden, sind Sie sicher, jemand anderes würde gerne wissen,
InformationsquelleAutor Charis Ryan | 2013-09-04
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den trick, um zu wissen, ob Sie einen Bildlauf nach oben oder unten ist, nicht zu Fragen. Machen Sie relational mit dem oberen Abstand der Elemente in Frage. Dann ist es so einfach, wie > oder <, für die meisten Teil.
Obwohl, wenn Sie wollen, um die aktuelle Richtung, in die Sie könnte erfassen Sie immer die Letzte scroll-position und vergleichen Sie es mit dem aktuellen.
Wie die Antwort hier schlägt.
Mag ich die Ereignisse auslösen, basierend auf der Bildschirmgröße und der element-position in der Leinwand, so spielt es keine Rolle, ob es nach oben oder unten, es folgt den gleichen Regeln vorwärts und rückwärts. So anstatt zu Fragen, nach oben oder unten, es fragt nur, ob es scrollen und führt es entsprechend aus.
Wenn Sie mich brauchen, um änderungen an meiner Geige für Sie, lassen Sie mich wissen, was Sie wollen passieren. Ich machte nur die Geige, weil der schreckliche Arbeit, die Sie Tat, auf die tympanus.net Beispiel. Sie müssen nicht um ein tutorial zur Durchführung einer einfachen Aufgabe 2-Seiten von js, das ist nicht notwendig und es bietet keine Anleitung, andere als "hey, Sie wollen, dies zu tun? Dann kopieren Sie und fügen Sie diese Dinge, die ich zusammengestellt habe, haben keine klare Vorgehensweise, und viel zu viel code, um schnell verdauen". Das hilft niemandem lernen.
InformationsquelleAutor FiLeVeR10
Nach einigen code-Darlehen tympanus.net und mit der modernizer Bibliothek kam ich mit diese.
Ich versucht, verschiedene Ansätze, aber alle von Ihnen waren einige Fehler in Ihnen, so finde ich, die beste Herangehensweise zu sein, die mit dem sample-code und die bereits vorgesehenen modernizer JS-Bibliothek.
InformationsquelleAutor Laniakea