• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

jQuery: animate & scrollTop ... Erfahrungen?

H

Heinz91

New member
Hallo zusammen,

ich probiere gerade ein wenig mit der animate-Funktion in Verbindung mit scrollTop in jQuery rum, allerdings mit überraschenden Ergebnissen. Beim Zurückscrollen verzögert sich die "Rückbildung" in den Ausgangspunkt.

Siehe z.B. folgendes Beispiel:
Code: 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>jQuery Animate/ScrollTop Übung</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
body {margin: 0; padding: 0;}
#content {height: 10000px;}
#rotebox {background-color: red; width: 100px; height: 100px; position: fixed; top: 0; left:0; }
#div01-1 {position: absolute; top: 40%; width: 100%; text-align: center; vertical-align: middle;
          background-color: yellow;}
#div01-2 {position: fixed; top: 90%; left: 0; width: 100%; height: 1000px;
        background-color: green;}
</style>
</head>
<body>
<div id="content">
<div id="rotebox">Rote Box</div>
<div id="div01-1">Gelbe Box</div>
<div id="div01-2">Grüne Box</div>
</div>
<script type="text/javascript">
$(document).ready(function(){

// ROTE BOX als Referenzobjekt
var anim1 = 0;
            $(document).scroll(function() {
                anim1 = $(this).scrollTop();
                if(anim1 > 500) {
                    $("#rotebox").css('background-color', 'blue');
                } else {
                    $("#rotebox").css('background-color', 'red');
                }
            });

// 1. Scrollen ... 2 EFFEKTE: gelbe Box raus, grüne nach oben
var anim2 = 0;
            $(document).scroll(function() {
                anim2 = $(this).scrollTop();
                if(anim2 > 20) {
                    // $("div").animate({left:'250px'});
                    $("#div01-1").animate({position: 'absolute', top: '-400px'}, 1000);
                } else {
                    $("#div01-1").animate({position: 'absolute', top: '200px'}, 500);
                }
            });

var anim3 = 0;
            $(document).scroll(function() {
                anim3 = $(this).scrollTop();
                if(anim3 > 20) {
                    $("#div01-2").animate({position: 'fixed', top: '200px'}, 1000);
                } else {
                    $("#div01-2").animate({position: 'fixed', top: '90%'}, 500);
                }
            });

// Weiterscrollen ... Ausblenden
var anim4 = 0;
            $(document).scroll(function() {
                anim4 = $(this).scrollTop();
                if(anim4 > 500) {
                    $("#div01-2").fadeOut(100);
                } else {
                    $("#div01-2").fadeIn(100);
                }
            });

// ENDE document.ready-Funktion
});
</script>
</body>
</html>

Beschreibung:
Beim 1. Mausrad-Scroll sollen sich die beiden Boxen (gelb/grün) automatisch nach oben verschieben.
Scrollt man 1x zurück, fahren sie auch schön wieder zurück.

Problem:
Scrollt man z.B. runter bis die rote Box blau wird (>2000px), und dann wieder zurück auf 0, dauert es ca. 30 Sekunden, bis die gelbe und grüne Box wieder eingeblendet bzw. "zurück animiert" werden.
Aber die rote Box wird beim Zurückscrollen ab dem richtigen Scrollpunkt von blau wieder nach rot gewechselt.
*grübel*

Frage:
Ist es irgendwie möglich, diese Animationen ab dem gesetzten Scrollpunkt sofort wieder "zurück animieren" zu können? ... ohne Zeitverzögerung?
Oder gibt es da gute Tutorials?

Gruß,
Heinz
 
Wieso registrierst du dafür 4 Handler? Die kommen sich doch garantiert in die Quere. Würde ich in einen packen und die ganzen Abfragen auch dort rein mit else if... damit immer nur eine Weisung ausgeführt wird und nicht zwischen 1 und 4 Stück gleichzeitig je nach Scrollwert.
 
Deine jeweiligen Bedingungen sind ja ab > 20 alle vier Stück wahr. Und zwischen 21 und 500 sind noch immer zwei Stück wahr. Denn bei jedem Scrollen schauen alle Handler sich die dann aktuelle Scrollposition an.
 
mikdoe schrieb:
Deine jeweiligen Bedingungen sind ja ab > 20 alle vier Stück wahr. Und zwischen 21 und 500 sind noch immer zwei Stück wahr. Denn bei jedem Scrollen schauen alle Handler sich die dann aktuelle Scrollposition an.
Zum Vergrößern anklicken....
Es sind 2x ab 20, 1x ab 500, 1x ab 2000.
Schlussendlich waren an die 50-100 Events geplant *g* ... wird praktisch nur schwer möglich sein.

Je mehr wahr sind, umso länger dauert die Rückwärtsverarbeitung?

Der Grundgedanke war nämlich, eine Art "Parallax-Scrolling"-Effekt zu machen, sprich: Scrollt man weiter runter, sollen verschiedene Events ausgeführt werden. Scrollt man wieder rauf, sollen sie rückgängig gemacht werden.
Eine Kombination von Parallax-Scrolling und Animationen.

mikdoe schrieb:
Wieso registrierst du dafür 4 Handler? Die kommen sich doch garantiert in die Quere.
Zum Vergrößern anklicken....
Habe ich bemerkt. Aber das war der Übersichtlichkeit wegen.
Dann schreib ich die mal zusammen und probiere noch ein wenig rum.
 
Habe nun einen Hinweis in einem englischsprachigen Forum gelesen, zum Attribut:
.dequeue()

Angeblich wird eine Funktion, die ausgeführt worden ist, ans Ende des "Schwanzes" (=queue) gelegt, aber immer wieder aufgerufen. Verwendet man dequeue, wird diese erst wieder aufgerufen, sobald der Scrolltop wieder einen Grenzwert überschreitet.

Beim folgende (neuen) Code, wird die Animation sofort ausgeführt *freu*, .... ABER ....
Code: 
<!DOCTYPE html><head>
  <meta charset="utf-8">
  <title>jQuery Animate/ScrollTop Übung</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
body {margin: 0; padding: 0;}
#content {height: 10000px;}
#rotebox {background-color: red; width: 100px; height: 100px; position: fixed; top: 0; left:0; }
#div01-1 {position: absolute; top: 40%; width: 100%; text-align: center; vertical-align: middle;
          background-color: yellow;}
#div01-2 {position: fixed; top: 90%; left: 0; width: 100%; height: 1000px;
        background-color: green;}
</style>
</head>
<body>
<div id="content">
<div id="rotebox">Rote Box</div>
<div id="div01-1">Gelbe Box</div>
<div id="div01-2">Grüne Box</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Fensterhöhe ermitteln:
   var FENSTERHOEHE = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;


// ROTE BOX als Referenzobjekt
var anim1 = 0;
var anim2 = 0;
var anim3 = 0;
$(document).scroll(function() {
                anim1 = $(this).scrollTop();
                anim2 = $(this).scrollTop();
                anim3 = $(this).scrollTop();
                // 1. ANIMATION
                if(anim1 >= 2000) {
                    $("#rotebox").css('background-color', 'blue');
                } else {
                    $("#rotebox").css('background-color', 'red');
                };


// SCROLLPUNKT GRÖSSER 20  START: 2. Animation
                if(anim2 > 40) {
                    //
                    $("#div01-1").animate({position: 'absolute',top: '-400px'}, 1000).dequeue();
                    $("#div01-2").animate({position: 'fixed', top: '200px'}, 1000).dequeue();
                } else if (anim2 <= 40) {
                    $("#div01-2").animate({position: 'fixed', top: '90%'}, 500).dequeue();
                    $("#div01-1").animate({position: 'absolute', top: '200px'}, 500).dequeue();
                };
// 2. ANIMATION ENDE


// 3. Animation START: Grüne Box ausblenden
                if(anim3 > 500) {
                    $("#div01-2").fadeOut(500).dequeue();
                } else
                 {
                $("#div01-2").fadeIn(500).dequeue;
                };
// 3. Animation ENDE


});
// Scrollfunktion ENDE




// ENDE document.ready-Funktion
});
</script>
</body>
</html>
...ABER... scrollt man langsam zurück, funktioniert die Rückwärts-Animation fehlerfrei.
Scrollt man schnell zurück, wird die Animation zwar ausgeführt, aber leider springen nach Ausführung die letzten beiden Anweisungen wieder zurück.

Nun habe ich schon den Vormittag rumprobiert, bringe es leider nicht hin.
Und da ich in Kürze noch ins verlängerte Wochenende fahre, habe ich leicher auch keine Zeit mehr.
Das wäre mal der aktuelle Stand ;-)

Vielleicht hat ja jemand von euch eine Idee, wie man beim schnellen Zurückscrollen die Ausgangsposition fixieren kann (ohne Rücksprung).

Dann wünsche ich noch ein schönes verlängertes Wochenende.
Bis spätestens Montag ;-)
Gruß,
Heinz
 
Du hast das .stop() vergessen:
HTML: 
<!DOCTYPE html><head>
  <meta charset="utf-8">
  <title>jQuery Animate/ScrollTop Übung</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
body {margin: 0; padding: 0;}
#content {height: 10000px;}
#rotebox {background-color: red; width: 100px; height: 100px; position: fixed; top: 0; left:0; }
#div01-1 {position: absolute; top: 40%; width: 100%; text-align: center; vertical-align: middle;
          background-color: yellow;}
#div01-2 {position: fixed; top: 90%; left: 0; width: 100%; height: 1000px;
        background-color: green;}
</style>
</head>
<body>
<div id="content">
<div id="rotebox">Rote Box</div>
<div id="div01-1">Gelbe Box</div>
<div id="div01-2">Grüne Box</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Fensterhöhe ermitteln:
   var FENSTERHOEHE = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;


// ROTE BOX als Referenzobjekt
var anim1 = 0;
var anim2 = 0;
var anim3 = 0;
$(document).scroll(function() {
                anim1 = $(this).scrollTop();
                anim2 = $(this).scrollTop();
                anim3 = $(this).scrollTop();
                // 1. ANIMATION
                if(anim1 >= 2000) {
                    $("#rotebox").css('background-color', 'blue');
                } else {
                    $("#rotebox").css('background-color', 'red');
                };


// SCROLLPUNKT GRÖSSER 20  START: 2. Animation
                if(anim2 > 40) {
                    //
                    $("#div01-1").stop().animate({position: 'absolute',top: '-400px'}, {queue: false, duration: 1000});
                    $("#div01-2").stop().animate({position: 'fixed', top: '200px'}, {queue: false, duration: 1000});
                } else if (anim2 <= 40) {
                    $("#div01-2").stop().animate({position: 'fixed', top: '90%'}, {queue: false, duration: 500});
                    $("#div01-1").stop().animate({position: 'absolute', top: '200px'}, {queue: false, duration: 500});
                };
// 2. ANIMATION ENDE


// 3. Animation START: Grüne Box ausblenden
                if(anim3 > 500) {
                    $("#div01-2").stop().fadeOut({queue: false, duration: 500});
                } else
                 {
                $("#div01-2").stop().fadeIn({queue: false, duration: 500});
                };
// 3. Animation ENDE


});
// Scrollfunktion ENDE




// ENDE document.ready-Funktion
});
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben