Fade In su Scroll Down, Fade Out su Scroll Up – in base alla posizione dell’elemento nella finestra

Sto cercando di ottenere una serie di elementi da far sbiadire a scorrere verso il basso quando sono completamente visibili nella finestra. Se continuo a scorrere verso il basso, non voglio che si dissolvino, ma se faccio scorrere verso l’alto, voglio che svaniscano.

Questo è il jsfiddle più vicino che ho trovato. http://jsfiddle.net/tcloninger/e5qaD/

$(document).ready(function() { /* Every time the window is scrolled ... */ $(window).scroll( function(){ /* Check the location of each desired element */ $('.hideme').each( function(i){ var bottom_of_object = $(this).position().top + $(this).outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); /* If the object is completely visible in the window, fade it it */ if( bottom_of_window > bottom_of_object ){ $(this).animate({'opacity':'1'},500); } }); }); }); 

Fa esattamente quello che voglio sullo scroll down, ma voglio anche che gli elementi scompaiano se li sfoglio.

Ho provato questo senza fortuna.

  if( bottom_of_window > bottom_of_object ){ $(this).animate({'opacity':'1'},500); } else { $(this).animate({'opacity':'0'},500); } 

Grazie mille per aver dedicato del tempo a guardare questo.

Il motivo per cui il tuo tentativo non ha funzionato, è perché le due animazioni (dissolvenza in apertura e chiusura) stavano funzionando l’una contro l’altra.

Proprio prima che un object diventasse visibile, era ancora invisibile e quindi l’animazione per la dissolvenza si sarebbe verificata. Quindi, la frazione di secondo dopo, quando lo stesso object era diventato visibile, l’animazione di fade-in avrebbe provato a funzionare, ma la dissolvenza in uscita era ancora in esecuzione. Quindi lavorerebbero l’uno contro l’altro e non vedresti nulla.

Alla fine l’object sarebbe diventato visibile (la maggior parte delle volte), ma ci sarebbe voluto del tempo. E se si volesse scorrere verso il basso usando il pulsante freccia sul pulsante della barra di scorrimento, l’animazione funzionerebbe, perché si scorrerebbe utilizzando incrementi maggiori, creando meno eventi di scorrimento.


Basta spiegazioni, la soluzione (JS, CSS, HTML):

 $(window).on("load",function() { $(window).scroll(function() { var windowBottom = $(this).scrollTop() + $(this).innerHeight(); $(".fade").each(function() { /* Check the location of each desired element */ var objectBottom = $(this).offset().top + $(this).outerHeight(); /* If the element is completely within bounds of the window, fade it in */ if (objectBottom < windowBottom) { //object comes into view (scrolling down) if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);} } else { //object goes out of view (scrolling up) if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);} } }); }).scroll(); //invoke scroll-handler on page-load }); 
 .fade { margin: 50px; padding: 50px; background-color: lightgreen; opacity: 1; } 
  
Fade In 01
Fade In 02
Fade In 03
Fade In 04
Fade In 05
Fade In 06
Fade In 07
Fade In 08
Fade In 09
Fade In 10

Ho ottimizzato il tuo codice e l’ho reso più robusto. In termini di miglioramento progressivo è probabilmente meglio avere tutta la logica della dissolvenza in ingresso in JavaScript. Nell’esempio di myfunksyde ogni utente senza JavaScript non vede nulla a causa opacity: 0; .

  $(window).on("load",function() { function fade() { var animation_height = $(window).innerHeight() * 0.25; var ratio = Math.round( (1 / animation_height) * 10000 ) / 10000; $('.fade').each(function() { var objectTop = $(this).offset().top; var windowBottom = $(window).scrollTop() + $(window).innerHeight(); if ( objectTop < windowBottom ) { if ( objectTop < windowBottom - animation_height ) { $(this).html( 'fully visible' ); $(this).css( { transition: 'opacity 0.1s linear', opacity: 1 } ); } else { $(this).html( 'fading in/out' ); $(this).css( { transition: 'opacity 0.25s linear', opacity: (windowBottom - objectTop) * ratio } ); } } else { $(this).html( 'not visible' ); $(this).css( 'opacity', 0 ); } }); } $('.fade').css( 'opacity', 0 ); fade(); $(window).scroll(function() {fade();}); }); 

Guardalo qui: http://jsfiddle.net/78xjLnu1/16/

Saluti, Martin

So che è tardi, ma prendo il codice originale e cambio alcune cose per controllare facilmente il css. Così ho creato un codice con addClass () e removeClass ()

Qui il codice completo: http://jsfiddle.net/e5qaD/4837/

  if( bottom_of_window > bottom_of_object ){ $(this).addClass('showme'); } if( bottom_of_window < bottom_of_object ){ $(this).removeClass('showme'); 

Spiacente, questo è thread vecchio, ma alcune persone avrebbero ancora bisogno di questo, immagino,

Nota: l’ho raggiunto utilizzando la libreria Animate.css per animare la dissolvenza.

Ho usato il tuo codice e ho appena aggiunto la class .Hidden (usando la class nascosta di bootstrap) ma puoi ancora definire .hidden { opacity: 0; } .hidden { opacity: 0; }

 $(document).ready(function() { /* Every time the window is scrolled ... */ $(window).scroll( function(){ /* Check the location of each desired element */ $('.hideme').each( function(i){ var bottom_of_object = $(this).position().top + $(this).outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); /* If the object is completely visible in the window, fade it it */ if( bottom_of_window > bottom_of_object ){ $(this).removeClass('hidden'); $(this).addClass('animated fadeInUp'); } else { $(this).addClass('hidden'); } }); }); }); 

Un’altra nota: l’applicazione di questo ai contenitori potrebbe causare che sia glitch.