Ich habe eine Funktion, die im Moment Elemente sequentiell ausblendet, id jedoch wie das Mausrad, um ihre Deckkraft zu steuern, wenn es möglich ist.
Kann jemand raten, wie ich das machen würde? Würde es das Mausrad Plugin benötigen? Danke für jede Eingabe
%Vor%HTML-Markup
%Vor%Ein Ansatz ist, dass Sie Datenattribute verwenden können, um einen Punkt festzulegen, wenn das Element fadeIn sein soll.
%Vor%Und in JS prüfen, ob der scrollTop-Wert im Bereich zwischen dem Bildlaufpunkt des Elements und dem Bildlaufpunkt des nächsten Elements liegt.
Immer wenn Sie ein Mausrad zum Scrollen verwenden, ändert sich die Deckkraft, um sie mehr oder weniger sichtbar zu machen. Dies geschieht mit dem DOMMouseScroll -Ereignis oder dem mousewheel -Ereignis. Siehe den folgenden Code:
Hier ist ein jsFiddle, es selbst zu versuchen: Ссылка
Danke an Ссылка
Sie könnten eine Bibliothek verwenden, nämlich scrollReveal.js, was ziemlich nett ist.
Hier ist ein Code Pen , den ich mithilfe der Bibliothek erstellt habe. Eine vereinfachte Version von diesem Code-Stift
Ihr Code kann so einfach sein wie:
%Vor%Aufgrund Apples Entscheidung, das "scroll" -Ereignis erst nach dem Scrollen zu senden, würde ich stattdessen so etwas vorschlagen -
Zuerst legen Sie alles fest, was angezeigt werden soll: Block und Deckkraft: 0
%Vor%Obwohl dies eine jQuery-Frage ist - das Ausführen von Code wie diesem auf jedem Frame, an dem sich die Dinge ändern, kann teuer sein, daher habe ich direkten DOM-Code verwendet, der wesentlich schneller ist!
Hier ist eine modifizierte Geige . Es ist nicht ganz klar in Ihrer Frage, aber ich nehme an, Sie möchten, dass die Deckkraft basierend darauf festgelegt wird, wo sich das Element im Ansichtsfenster befindet.
%Vor%Wenn ich Sie richtig verstehe, möchten Sie, dass beim sequenziellen Blättern durch den Benutzer die Elemente nacheinander eingeblendet werden. ( Führen Sie die Code-Snippets aus, um zu sehen, ob Sie das möchten oder nicht )
Brauchst du das?
%Vor%Ich habe die Verzögerung (350) auf der jfiddle entfernt, aber Sie können es zurückstellen, wenn benötigt: JsFiddle
Ich weiß nicht, ob Sie es brauchen, aber wenn ja, gibt es einen Code JsFiddle (nicht perfekt) das macht, was Sie wollen, plus das Gegenteil .
Sie können einfach Twitter Bootstrap Scrol Spy verwenden und nicht versuchen, das Rad neu zu erfinden. Um das gewünschte Verhalten zu erreichen, folgen Sie einfach den Anweisungen und fügen Sie die folgenden css hinzu:
%Vor%Übrigens können Sie es auch dort ausprobieren. Öffnen Sie die verknüpfte Website, fügen Sie das Snippet auf der Konsole hinzu und scrollen Sie durch die Dokumentation.
Also hier ist meine Lösung für das Problem:
Elemente, die eine Klasse von .sectrol-link haben, werden ausgeblendet oder nacheinander, je nachdem, wie Sie scrollen.
Damit diese Methode funktioniert, müssen Sie keine aktuelle Bildlaufleiste haben. Die Lösung verfolgt die Scroll-Position nicht, sie basiert auf dem Ereignis "Scrollrad".
Es blendet auch die Elemente beim Scrollen aus.
Ich bin mir sicher, dass Sie die Lösung an Ihre Bedürfnisse anpassen können.
%Vor%Die Menge an Rad-Scrolling, die zum Ein- oder Ausblenden der Verbindung benötigt wird, wird durch die Variable pxPerItem gesteuert. Wenn Sie ein solches Objekt unten auf Ihrer Seite platzieren möchten, müssten Sie die Variablen scrollYMax und calculateFadeFunction so anpassen, dass sie Ihrer Höhe entsprechen.
Geige: Ссылка
Tags und Links javascript jquery