1. Services|
2. Références|
3. Articles|
4. Didacticiels|
5. Ressources|
6. Jobs|
7. Contact|
8. Termes|
9. Aide|
10. Sitemap|

Citation du jour

Nos autres articles

Transition d'images

En quelques petites instructions, il est possible de créer un effet de transition entre deux images, et ce, en jouant sur le simple effet CSS d'opacité.

L'effet que nous nous apprêtons à créer suppose donc que votre navigateur traite correctement les CSS et plus particulièrement l'attribut d'opacité comme nous venons de l'indiquer. Si ce n'était pas le cas, nous vous suggérons de passer à Opera ou Firefox.

Mise en place des ingrédients

Nous allons donc passer d'une image à l'autre avec un effet de fade out. Voilà les deux images que nous allons utiliser :

En contrôlant l'opacité d'une image, on peut la faire disparaître. À titre d'exemple, voilà les deux images présentées successivement avec 85% d'opacité, puis 65%, 45%, 25%, 15% et finalement 5% :

85%	85%
65%	65%
45%	45%
25%	25%
15%	15%
5%	5%

Nous allons créer un petit javascript qui modifie l'opacité de notre image toutes les 75 millisecondes  : c'est notre effet de transition. Lorsque l'opacité de l'image arrive à 0, on passe à l'autre image. L'image dont nous allons modifier l'opacité est associée à un id : quitus.

<script type="text/javascript">
    var iOpacity   = 1;
    var iIncrement = -0.05;
    var oImg       = null;

    function transition()
    /*-----------------*/
    {
        if ( oImg == null )
            oImg = document.getElementById( 'quitus' );

        oImg.style.opacity = iOpacity = Math.min( Math.max( iOpacity + iIncrement,0 ),1 );

        setTimeout( "transition()",75 );

        /* Inverse increment direction */
        if ( iOpacity == 0 || iOpacity == 1 )
            iIncrement = - iIncrement;
    }
</script>

L'opacité de l'image est modifiée toutes les 75 millisecondes. Lorsque l'opacité atteint 0 on la fait remonter jusqu'à 1 en un mouvement d'inverseur. Rien de plus. Si vous cliquez sur l'image ci-dessous, vous pourrez visualiser l'effet.

Bien, maintenant que vous avez visualisé l'effet, faisons en sorte qu'on passe d'une image à l'autre lorsque l'opacité atteint 0. Voici le script modifié :

<script type="text/javascript">
    var iOpacity   = 1;
    var iIncrement = -0.05;
    var iImg       = 1;
    var oImg       = null;

    function transition02( olImg )
    /*-------------------------*/
    {
        if ( olImg != null )
            oImg = olImg;            

        oImg.style.opacity = iOpacity = Math.min( Math.max( iOpacity + iIncrement,0 ),1 );

        if ( iOpacity == 0 )
        {
            if ( ++iImg % 2 )
                oImg.src = "/images/quitus2.png";
            else
                oImg.src = "/images/quitus-rose.png";
        }

        setTimeout( "transition02()",75 );

        /* Inverse increment direction */
        if ( iOpacity == 0 || iOpacity == 1 )
            iIncrement = - iIncrement;
    }
</script>

Cliquez sur l'image pour visualiser l'effet :

Ce petit script vous offre finalement un petit effet de transition bon marché.