Page web avec animations « OnScroll »

/ 22/05/2014

Dernièrement, j’ai recherché et testé quelques frameworks et plugins jQuery pour faire une single page application contenant des animations en JS lors du scroll.

Ce but de mes recherches est de réaliser une page contenant quelques animation lors du scroll sur différentes zones, ici la démonstration restera très basique mais le principe est posé.

onScreen_ImgCelui ayant retenu mon attention est onScreen, pour sa facilité d’utilisation. Effectivement, il présente l’avantage d’avoir deux fonctions très utiles :

– doIn, qui exécutera le code lorsque l’évènement Scroll entrera dans l’élément.

– doOut, qui exécutera donc le code lorsque l’évènement Scroll sortira de l’élément.

Ce petit plugin vérifiera que l’élément se trouve bien dans le viewport. Pour plus de précision et de possibilité dans nos animations, j’utiliserai le scrollTop() de jQuery !

Voici un exemple d’utilisation :

<!-- index.html -->
<html>
    <head>
        <script src="./js/jquery-2.0.3.min.js"></script>
        <script src="./js/jquery.onscreen.min.js"></script>
        <script src="./js/mysample.js"></script>
    </head>
    <style>
        section {background-color: #F7F7F7; border: #CCCCCC 1px solid; min-height: 300px; 
                 padding-top: 100px;}
        p, h1 {color: #3399FF; width: 1000px; margin: auto; display: block;}
        #section1 {background-color: #84d5f9; }
        #section2 {background-color: #84f9e2; }
        #section3 {background-color: #89f984; }
        #section4 {background-color: #edf984; z-index: 99;}
        #section5 {background-color: #f9ce84; z-index: 2001;}
        #object1 {display: block; background-image : url('./img/nexus5.png'); 
                  height: 300px; width: 151px; position: fixed; top: 40px; 
                  z-index: 1001; left: 55%;}
        #object2 {display: block; background-image : url('./img/nexus5-locked.png'); 
                  height: 300px; width: 151px; position: fixed; top: 40px; 
                  z-index: 1000; margin-left: 20%;}
    </style>
    <body>

        <div id="object1"></div>
        <div id="object2"></div>

        <section id="section1">
             <h1>My new Mobile</h1>
        </section>
        <section id="section2">
             <p>My sample text #2</p>
        </section>
        <section id="section3">
             <p>My sample text #3</p>
        </section>
        <section id="section4">
             <p>My sample text #4</p>
        </section>
        <section id="section5">
             <p>My sample text #5</p>
        </section>

    </body>
</html>
/* mysample.js */
$(document).ready(function(){
    $('#section2').onScreen({
        container: window,
        direction: 'vertical',
        doIn: function() {
            //console.log('in');
            $('#section2').animate({ opacity: 1, marginLeft: "0" }, 500 ); 
            $('#section1').animate({ opacity: 0.25 }, 500 ); 
            $('#section3').animate({ opacity: 0.25}, 500 );
            $('#object2').animate({ opacity: 0, marginLeft: "20%" }, 200 );      
        },
        doOut: function() {
            //console.log('out');
            $('#section2').animate({ opacity: 0.25, marginLeft: "0.6in" }, 500 ); 
            $('#section1').animate({ opacity: 1 }, 500 ); 
            $('#section3').animate({ opacity: 1 }, 500 );
            $('#object2').animate({ opacity: 1, marginLeft: "+=20%" }, 300 );
        },
        tolerance: 0,
        throttle: 50,
        toggleClass: 'onScreen',
        lazyAttr: null,
        debug: false
    });

    /* for great effects, i recommand to use just jQuery */
    $(window).scroll(function() {
        var scroll_pos = $(window).scrollTop();
        console.log(scroll_pos);
        if(scroll_pos <= 100){
            //do what you want, for example move the background-image on scroll
            $('#section1').css('background-position', '0px '+parseInt(-scroll_pos / 6) +'px');
            //effect like on my home page
        }
    });
});

Télécharger l’exemple ou voir la demo

Bien entendu, il y a du boulot pour réaliser un site aussi beau que celui de firefox OS, mais la tâche sera plus longue que difficile 😉

Références & téléchargements : http://silvestreh.github.io/onScreen/index.html

Articles en rapport