Fondu sur faites Défiler vers le Bas, Fade Out sur faites Défiler Jusqu' - basé sur la position de l'élément dans la fenêtre de l'

Je vais essayer d'obtenir une série d'éléments à fondu sur faites défiler vers le bas quand ils sont pleinement visibles dans la fenêtre. Si je continue à faire défiler vers le bas, je n'en voulez pas à s'estomper, mais si j'ai faites défiler vers le haut, je ne les voulez à s'estomper.

C'est le plus proche jsfiddle que j'ai trouvé.
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);

        }    
    }); 
}); 
});

C'est exactement ce que je veux le faire défiler vers le bas, mais je veux aussi les éléments de disparaître si je défilement vers le passé.

J'ai essayé cela avec pas de chance.

            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'opacity':'1'},500);  

            } else {

               $(this).animate({'opacity':'0'},500); }

Merci beaucoup pour avoir pris le temps de regarder cela.

OriginalL'auteur minimographite | 2014-11-01

  1. 3

    J'ai modifié ton code un peu et il est plus robuste. En termes de l'amélioration progressive, c'est probaly mieux d'avoir tous les fade in-out de la logique en JavaScript. Dans l'exemple de myfunksyde tout utilisateur sans JavaScript ne voit rien à cause de la 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();});
});

    Voir ici: http://jsfiddle.net/78xjLnu1/16/

    Cheers,
    Martin

    Bonne prise au sujet de la non-javascript utilisateurs. Et j'aime bien votre réponse:)

    OriginalL'auteur hobbeshunter

  2. 3

    Je sais il est tard, mais je prends le code d'origine et changer quelques trucs pour contrôler facilement le css. J'ai donc fait un code avec le addClass() et le removeClass()

    Voici le code complet : 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');
    J'aime cette option est de travailler mieux!! Comment pouvez modifier le bottom_of_object pour l'avoir sur le haut de la bas?

    OriginalL'auteur Michael Deleau

  3. 0

    Désolé c'est et ce vieux thread mais certaines personnes seraient encore besoin de ce que je devine,

    Note: j'ai obtenu ce à l'aide de l'Animer.css bibliothèque pour animer le fondu.

    J'ai utilisé votre code et venez d'ajouter .caché classe (à l'aide de bootstrap cachés de la classe), mais vous pouvez toujours définir
    .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');
               }

}); 
}); 
});

    Une autre Remarque: l'Application de ce à conteneurs pourrait provoquer une glitch.

    OriginalL'auteur Valumin