Fade In na rolagem para baixo, Fade Out na rolagem para cima – com base na posição do elemento na janela

Eu estou tentando obter uma série de elementos para diminuir a rolagem para baixo quando eles estão totalmente visíveis na janela. Se eu continuar rolando para baixo, eu não quero que eles desapareçam, mas se eu rolar para cima, eu quero que eles desapareçam.

Este é o jsfiddle mais próximo que encontrei. 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); } }); }); }); 

Ele faz exatamente o que eu quero na rolagem para baixo, mas eu também quero que os elementos desapareçam se eu passar por eles.

Eu tentei isso sem sorte.

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

Muito obrigado por tomar o tempo para olhar para isso.

A razão pela qual sua tentativa não estava funcionando, é porque as duas animações (fade-in e fade-out) estavam trabalhando umas contra as outras.

Logo antes de um object se tornar visível, ele ainda estava invisível e, portanto, a animação para o desaparecimento seria executada. Então, uma fração de segundo depois, quando o mesmo object se tornasse visível, a animação fade-in tentaria rodar, mas o fade-out ainda estava rodando. Então eles iriam trabalhar uns contra os outros e você não veria nada.

Eventualmente, o object se tornaria visível (na maior parte do tempo), mas demoraria um pouco. E se você rolasse para baixo usando o botão de seta no botão da barra de rolagem, a animação funcionaria, porque você rolaria usando incrementos maiores, criando menos events de rolagem.


Bastante explicação, a solução (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

Eu ajustei seu código um pouco e o tornei mais robusto. Em termos de aprimoramento progressivo, é melhor ter toda a lógica do fade-in-out no JavaScript. No exemplo de myfunksyde, qualquer usuário sem JavaScript não vê nada por causa da 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();}); }); 

Veja aqui: http://jsfiddle.net/78xjLnu1/16/

Felicidades, Martin

Eu sei que é tarde, mas eu pego o código original e troco algumas coisas para controlar facilmente o css. Então eu fiz um código com o addClass () e o removeClass ()

Aqui o código 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'); 

Desculpe isso e thread antigo, mas algumas pessoas ainda precisam disso eu acho,

Nota: Eu consegui isso usando a biblioteca Animate.css para animar o fade.

Eu usei seu código e apenas adicionei a class .hidden (usando a class oculta do bootstrap), mas você ainda pode definir apenas .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'); } }); }); }); 

Outra Nota: Aplicar isso a contêineres pode fazer com que seja glitchy.

    Intereting Posts