Więc tu jest moje rozwiązanie problemu:
przedmioty, które mają klasę .sectrol-link zanikanie lub jeden po drugim w oparciu o sposób przewijania.
Aby ta metoda działała, nie trzeba mieć rzeczywistego paska przewijania. Rozwiązanie nie śledzi pozycji przewijania, jest oparte na zdarzeniu "scrollwheel".
To również zanika elementy podczas przewijania w górę.
Jestem pewien, że możesz dostosować rozwiązanie do swoich potrzeb.
// Constants
var pxPerItem = 720;
var sectorLinks = $('.sector-link');
var scrollYMax = sectorLinks.length * pxPerItem;
//Fade controller variable
var currentScrollY = 0;
//Calculates fade value for the item based on current 'scroll' position
function calculateFade(itemNo) {
var relativeScroll = (currentScrollY - pxPerItem * itemNo)/pxPerItem;
return Math.min(Math.max(0, relativeScroll), 1)
}
//Keeps the controller scroll variable within the bounds based on the amount of elements.
function normalizeCurrentScroll() {
currentScrollY = Math.min(Math.max(0, currentScrollY), scrollYMax);
}
//The actual event that controls items fade
$(window).bind('mousewheel DOMMouseScroll', function(event){
var delta = event.originalEvent.wheelDelta == 0 ? event.originalEvent.detail : event.originalEvent.wheelDelta;
currentScrollY -= delta;
for (var i = 0; i < sectorLinks.length; i++) {
$(sectorLinks[i]).fadeTo(20, calculateFade(i));
}
normalizeCurrentScroll();
});
Ilość rolka potrzebne ani wygaszać się związek jest sterowany przez zmienną "pxPerItem. Jeśli chcesz umieścić coś takiego poniżej na stronie, musisz zmodyfikować zmienną scrollYMax i obliczyć wartośćFadeFunction tak, aby pasowały do Twojego wzrostu.
Fiddle: https://jsfiddle.net/gLtgj54s/18/
skrzypce robi praca –
@MohitBhasi tak robi. Zanikanie przy ładowaniu strony. – Adjit
Więc zamiast w pełni zautomatyzowanego fadeIn, chcesz dostosować krycie każdego wiersza tekstu na podstawie pozycji przewijania? – Terry