Fullpage.js. Hinzufügen einer Scrollverzögerung

Lesezeit: 3 Minuten

Ich habe eine div-“Box”, die allmählich mit “.fp-viewing” als Anker verblasst, um den Übergangseffekt zu starten, wenn ein Benutzer zur nächsten Seite scrollt. Die Sache ist, dass die Seite mit dem Scrollen beginnt, wenn die .fp-Anzeige ausgelöst wird, und die Box vor dem Ende der Animation aus dem Sichtfeld scrollt.

Wie kann ich den Start des Scrollens verzögern, wenn die .fp-Anzeige ausgelöst wird, bis die Box ihre Animation in 4s abgeschlossen hat?

.box{
  transition: all 4s ease-out;
  -webkit-transition: all 4s ease-out;
}

.fp-viewing-2 .box{
  opacity: 0;
}

Fullpagejs Hinzufugen einer Scrollverzogerung
Alvaro

Sie können mit der Option spielen, die fullpage.js bietet eine Bewegung abbrechen, bevor sie stattfindet.

Reproduktion online

var delay = 2000; //milliseconds
var timeoutId;
var animationIsFinished = false;

new fullpage('#fullpage', {
      sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(origin, destination, direction){
        var curTime = new Date().getTime();

        //animating my element
        $('#element').addClass('animate');

        clearTimeout(timeoutId);

        timeoutId = setTimeout(function(){
            animationIsFinished = true;

            fullpage_api.moveTo(destination.index + 1);
        }, delay);

        return animationIsFinished;
    },
});

  • Ich werde deinen Vorschlag ausprobieren und sehen, wie es funktioniert. Vielen Dank.

    – Joseph

    23. März ’16 um 19:23

  • Ihr Code funktioniert, danke dafür, aber es ist nicht das, was ich wollte. Ich denke, es ist meine Schuld, dass ich nicht genau erklärt habe, was ich brauche. Ich habe mir Ihr Video “Css3-Animationen zwischen Abschnitten mit fullpage.js erstellen” angesehen, so habe ich den CSS-Animationscode entwickelt, den ich in meinen ersten Kommentar eingefügt habe.

    – Joseph

    24. März ’16 um 1:23

  • Meine CSS-Animation wird ausgelöst, wenn sich “.fp-viewing” ändert und .fp-viewing wird ausgelöst, wenn ein Benutzer mit der Maus zu einem neuen Abschnitt scrollt. Der von Ihnen eingefügte Code verzögert das Auslösen der .fp-Anzeige. das ist nicht das was ich brauche. Ich muss zuerst die .fp-Anzeige ausgelöst und dann um etwa 5 Sekunden verzögert werden, bevor das Scrollen zum nächsten Abschnitt beginnt, da meine CSS-Animation durch die .fp-Anzeige ausgelöst wird und ihre Animation beenden muss, bevor sie zum nächsten Abschnitt scrollt.

    – Joseph

    24. März ’16 um 1:36

  • Ich bin mir nicht sicher, ob ich das richtig mache. vielleicht brauche ich einen anderen Trigger für meine Animationen als .fp-viewing. Alle Vorschläge werden geschätzt. Danke.

    – Joseph

    24. März ’16 um 1:37

  • Du machst es nicht richtig. Sie sollten Ihre Animation im auslösen onLeave callback außerhalb der Timeout-Funktion. Fügen Sie dort einfach eine Klasse zu Ihrem Element hinzu, um es auszulösen. Du denkst was das Beste für deinen Zweck und die Klasse ist fp-viewing ist in diesem Fall nicht.

    – Alvaro

    24. März ’16 um 10:20


#fullpage {
    transition-delay: 1s !important;
}

oder ändern Sie die Funktion addAnimation in fullpage.js

bei mir funktioniert diese variante:

$(elem).fullpage({ 
/// opttions, 
onLeave: function(origin, destination, direction){ 
if(animationIsFinished === false){ 
// do some code 
} 
clearTimeout(timeoutId); 
timeoutId = setTimeout(function(){ 
animationIsFinished = true;
 $.fn.fullpage.moveTo(destination); 
   setTimeout(() => { 
     animationIsFinished = false; 
   }, 200); 
}, 600); 
return animationIsFinished; 

Dies ist billig und einfach, aber ich wickle einfach die Ganzseitenfunktion, die ich benötige, in einen benutzerdefinierten Funktionswrapper ein und verwende dann settimeout (a la diese Antwort), um es abzufeuern, wenn ich bereit bin.

function slideWithDelay() {
    fullpage_api.moveSlideRight();
}

// Change slide on select
$('select').on('change',function(){
    setTimeout(slideWithDelay, 500);
})

.

228100cookie-checkFullpage.js. Hinzufügen einer Scrollverzögerung

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy