jQuery Animation - Mehrere Elemente - Hervorragende Bibliothek

Ich habe versucht, einen Effekt auf einer Webseite, die ich einmal erreicht habe, zu erreichen, aber ich möchte es auf mehrere Seitenbereiche anwenden. Jedoch habe ich ein Problem mit der Positionierung und bekommen die gewünschte AnimationjQuery Animation - Mehrere Elemente

Ich benutze jQuery und die SlideUp-Methode. Ich habe den folgenden Code;

(function() { 

    var pageEl = $('div.first-layer'); 

    $(document).on('scroll', function() { 
     pageEl.slideUp(1300, function() { $(document).off('scroll').remove(); }); 
    }); 
})();

Dies hat den gewünschten Effekt;

Wie man sehen kann ich haben es geschafft, diese Animation einmal mit dem obigen Code zu erreichen, aber ich möchte in der Lage sein, diesen Effekt auf Blättern gelten, mit 3 verschiedenen Elementen.

Meine Idee war es, eine ID/Klasse anzuhängen und für jede Klasse ein anderes Scroll-Ereignis angehängt, wenn es den gewünschten Scroll-Punkt für jede Klasse/ID erreicht, verstecken Sie die anderen 2 Elemente.

Wenn jemand in die richtige Richtung zeigen oder einen Rat geben könnte, würde es geschätzt werden. Ich bin jetzt schon eine Weile hier festgefahren. Wenn Sie mehr Informationen wünschen, fragen Sie einfach.

Vielen Dank.

bearbeiten: Ich habe eine JSFiddle erstellt, damit Sie sehen, was ich versuche zu erreichen; https://jsfiddle.net/tdatkxrf/4/

Quelle

2016-06-13 Troy

Geben Sie Ihren vollständigen Code ein oder erstellen Sie eine Geige –

99% der gestellten Fragen müssen ein [MCVE (** M ** inimal, ** C ** vollständig und ** V ** erfassbar ** E **) haben Beispiel)] (http://stackoverflow.com/help/mcve). – zer00ne

Keine Sorge, ich erschaffe einen Plunkr, während wir sprechen. Es ist schwer, dir den Quellcode zu zeigen, da er ziemlich groß ist. – Troy

Ok, also, je nachdem, wie Sie es wollen das Ereignis ausgelöst werden Sie ein bisschen mehr mit ihm spielen könnte müssen, jetzt ist es besonders empfindlich ist, aber hier ist es:

Edit: Auf Plunkr habe ich die Empfindlichkeit geändert, indem ich eine neue Variable hinzufüge, die das Scrollen zählt. Ich werde das so lassen, wie es ist, so dass Sie beide Implementierungen sehen können (Plunker mit der Variable, Antwort ohne). plunkr: https://plnkr.co/edit/02mko4f5ZSqSDLtlvDwR?p=preview

html:

<!DOCTYPE html> 
<html> 

    <head> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1 style="text-align: center; font-family: helvetica;">jQuery slideUp</h1> 
    <div class="container" style="display: flex; align-items: center; flex-direction: column; position: relative; background: grey;"> 
     <div id="section-one" style="height: 300px; width: 300px; background: #cc6699;"> 
     <h1 style="text-align: center; font-family: helvetica;">Section One</h1> 
     </div> 
     <div id="section-two" style="display:none; height: 300px; width: 300px; background: #cc9966;"> 
     <h1 style="text-align: center; font-family: helvetica;">Section Two</h1> 
     </div> 
     <div id="section-three" style="display: none; height: 300px; width: 300px; background: #6699cc;"> 
     <h1 style="text-align: center; font-family: helvetica;">Section Three</h1> 
     </div> 
    </div> 
    </body> 

</html>

jQuery:

// Code goes here 

$(document).ready(function() { 

    var e1 = $('#section-one'); 
    var e2 = $('#section-two'); 
    var e3 = $('#section-three'); 

    var sections = [e1, e2, e3]; 

$('.container').bind('mousewheel', function(e){scrollCheck(e);}); 

var scrollCheck = function(e){ 
    if(e.originalEvent.wheelDelta /120 > 0) { 
     for(i= 0; i<sections.length;i++){ 
     j=i-1; 
     if(sections[i].attr('display') != "none" && i > 0){ 
      sections[i].slideUp(1300); 
      sections[i].attr('display', "none"); 
      sections[j].slideDown(1300); 
      sections[j].attr('display', ""); 
      return; 
     } 
     } 
    } 
    else{ 
     for(i= 0; i<sections.length;i++){ 
     j=i+1; 
     if(sections[i].attr('display') != "none" && i+1 < sections.length){ 
      sections[i].slideUp(1300); 
      sections[i].attr('display', "none"); 
      sections[j].slideDown(1300); 
      sections[j].attr('display', ""); 
      return; 
     } 
     } 
    } 
    } 
});

gibt es auch einige Pakete die Mausrad Ereignisse zu erkennen, könnten Sie einen Blick auf eine von denen haben wollen.

Quelle

2016-06-13 14:28:04 Spluf

Vielen Dank, dass Sie mir gezeigt haben, wie ich das mache, ich werde es in mein Projekt implementieren. Aber du hast gesagt, es ist im Moment etwas empfindlich. Wie würde ich es abschwächen, damit der Benutzer nicht versehentlich alle Abschnitte gleichzeitig scrollt? Nochmals vielen Dank, obwohl ich es wirklich schätze. – Troy

Der einfachste Weg wäre, das Bildlaufereignis durch Pfeiltasten zu ersetzen. Auf diese Weise müssen Sie nicht überprüfen, ob Sie eine Bildlaufleiste haben oder wie viele Bildlaufleisten einer Seitenfolie entsprechen sollten. Auch die Mausrad-Pakete könnten einige Handler dafür haben (nie zuvor benutzt). Ich arbeite auch noch an diesem Plünderer, also werde ich dich wissen lassen, wenn ich etwas arbeite. – Spluf

Ich habe gerade dieses Paket gefunden, das das gleiche tut, aber besser als ich, Nähte einfach zu verwenden, was ich in ihrer Dokumentation gelesen habe. Schau mal hier: http://alvarotrigo.com/fullPage/#firstPage – Spluf

jQuery Animation - Mehrere Elemente

Antwort

Verwandte Themen