web-dev-qa-db-fra.com

Afficher Div lorsque la position de défilement

Tout d'abord, je voudrais me référer à ce site Web: http://annasafroncik.it/ J'aime la façon dont les animations apparaissent. Est-il difficile de créer une fonction similaire dans jquery? Existe-t-il des plugins pour créer un tel effet?

J'espère que quelqu'un m'aidera.

jqueryscrolljquery-animate
27
idbranding

Fondamentalement, vous souhaitez ajouter une classe "hideme" à chaque élément que vous souhaitez masquer (vous définissez ensuite cette classe sur "opacity: 0";

Ensuite, en utilisant jQuery, vous définissez un événement $ (window) .scroll () pour vérifier l'emplacement du bas de chaque élément "hideme" par rapport au bord inférieur de votre fenêtre visible.

Voici la viande de celui-ci ...

/* 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).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

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

        }

    }); 

});

Voici un jsfiddle complet: http://jsfiddle.net/tcloninger/e5qaD/

59
Timothy Aaron

Plugins? Peut-être, mais vous pouvez certainement créer vous-même toutes les combinaisons d'animation que vous pourriez imaginer avec jQuery. Si vous maîtrisez bien les sélecteurs et CSS, le ciel est la limite! Je suggère de commencer sur le site Web jQuery et de vérifier quelques exemples .

Pour aider à faire avancer les choses et peut-être vous donner quelques idées si vous êtes déjà familier avec jQuery, vous pouvez essayer ce qui suit ... déterminer à quelle distance de votre div se trouve, écouter les événements de défilement , et lorsque le div est mis en évidence (c'est-à-dire que la page a défilé au-delà de la position du div que vous avez définie), exécutez une animation. Quelque chose comme:

<div id="my_div">Some content</div>

<script type="text/javascript">

    $(document).ready(function() {

        var my_div = $("#my_div");
        var div_top = my_div.offset().top;

        $(document).scroll(function() {
            if (div_top <= $(document).scrollTop()) {
                // do some cool animations...
            }
        });

    });

</script>

J'espère que je n'ai pas foiré ma syntaxe!

7
Chris Kempen