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

2012-06-24 à 08:59:55

Transition CSS3 : un texte animé grâce à un peu de Javascript

CSS, CSS3, transition, javascript, vaesoli

Ce qu'on veut montrer ici c'est la possibilité de disposer de plusieurs textes qui sont affichés en séquence avec un effet de fade out, fade in. Nous nous donnons comme objectif de pouvoir réaliser cette transition grâce à la norme CSS3 et avec un peu de Javascript, vraiment un peu.

Voici tout de go l'effet escompté avec 4 textes latins qui sont enchaînés :

La première chose à faire c'est de définir une division container et une division target, la division container entourant la division target.

L'exemple que nous avons pris enchaîne quatre textes latins que voici :

<div id="LSText-1">
<p>1. Tum Pomponius: At ego, quem vos ut deditum Epicuro insectari soletis, sum multum 
equidem cum Phaedro, quem unice diligo, ut scitis, in Epicuri hortis, quos modo 
praeteribamus, sed veteris proverbii admonitu vivorum memini, nec tamen Epicuri 
licet oblivisci, si cupiam, cuius imaginem non modo in tabulis nostri 
familiares, sed etiam in poculis et in anulis habent.</p></div>

<div id="LSText-2">
<p>2. Stoici, nos appellemus convenientiam, si placet,cum igitur in eo sit id bonum,
quo omnia referenda sint, honeste facta ipsumque honestum, quod solum in bonis
ducitur, quamquam post oritur, tamen id solum vi sua et dignitate expetendum
est; eorum autem, quae sunt prima naturae, propter se nihil est expetendum.</p></div>


<div id="LSText-3">
<p>3. Iam in altera philosophiae parte. quae est quaerendi ac disserendi, quae logikh
dicitur, iste vester plane, ut mihi quidem videtur, inermis ac nudus est. tollit
definitiones, nihil de dividendo ac partiendo docet, non quo modo efficiatur
concludaturque ratio tradit, non qua via captiosa solvantur ambigua
distinguantur ostendit; iudicia rerum in sensibus ponit, quibus si semel aliquid
falsi pro vero probatum sit, sublatum esse omne iudicium veri et falsi putat.</p></div>

<div id="LSText-4">
<p>4. Confirmat autem illud vel maxime, quod ipsa natura, ut ait ille, sciscat et
probet, id est voluptatem et dolorem. ad haec et quae sequamur et quae fugiamus
refert omnia. quod quamquam Aristippi est a Cyrenaicisque melius liberiusque
defenditur, tamen eius modi esse iudico, ut nihil homine videatur indignius. ad
maiora enim quaedam nos natura genuit et conformavit, ut mihi quidem videtur. ac
fieri potest, ut errem, sed ita prorsus existimo, neque eum Torquatum, qui hoc
primus cognomen invenerit, aut torquem illum hosti detraxisse, ut aliquam ex eo
perciperet corpore voluptatem, aut cum Latinis tertio consulatu conflixisse apud
Veserim propter voluptatem; quod vero securi percussit filium, privavisse se
etiam videtur multis voluptatibus, cum ipsi naturae patrioque amori praetulerit
ius maiestatis atque imperii.</p></div>

Touces ces textes sont mis dans une division dont la définition CSS cache le contenu. Voyez comment :

<div class="TEXT-TRANSITION">ici, les 4 textes latins indiqués plus faut</div>
div.TEXT-TRANSITION { display:none; }

Ainsi, les quatre textes latins demeurent cachés. Ce qu'il faut faire maintenant c'est de parcourir les quatre textes latins et d'insérer, en séquence, le premier texte dans la division target, puis le deuxième, le troisième et enfin le quatrième. Après, il faut recommencer avec le premier, etc.

En fait, la division target fait usage des transitions de CSS3. Voyez la définition CSS qu'on lui a donnée :

div#target  {   -o-transition       :   opacity 3000ms ease;   /* Pour Opera */
                -webkit-transition  :   opacity 3000ms ease;   /* Pour Chrome et Safari */
                -moz-transition     :   opacity 3000ms ease;   /* Pour Firefox */
                -ms-transition      :   opacity 3000ms ease;   /* Pour Internet Explorer */
                transition          :   opacity 3000ms ease;   /* Pour W3C */
                opacity             :   1;
                height              :   110px;
                overflow            :   hidden;
            }

Puis, il faut capturer l'événement de fin de transition. Quand la transition d'un texte est terminée (d'opacité 1 à opacité 0), il est temps de traiter le texte suivant. Pour détecter la fin de la transition il faut attacher un listener d'événement sur la division dont il faut détecter la fin de transition, cad la division target. C'est donc ici que le Javascript entre en jeu.

<script type="text/javascript">
// <![CDATA[
function __RevealTempo( x )
{
    if ( x == 0 )
    {
        setTimeout( '__RevealTempo( 1 )',1000 );
    }
    else if ( x == 1 )
    {
        oTarget.style.opacity = 0;
    }
}

var oTarget = null;
var iIndex  = 1;

if ( oTarget = document.getElementById('LS-TEXT-TRANSITION-target') )
{
    oTarget.style.opacity = 1;
    oTarget.addEventListener( 'webkitTransitionEnd',__Reveal,true );
    oTarget.addEventListener( 'transitionend',__Reveal,true );
    oTarget.addEventListener( 'MSTransitionEnd',__Reveal,true );
    oTarget.addEventListener( 'oTransitionEnd',__Reveal,true );
    oTarget.innerHTML = document.getElementById( 'LSText-1' ).innerHTML;
    /* Create a delay before changing the opacity */
    setTimeout( '__RevealTempo( 0 )',0 );
}

function __Reveal()
{
    i = iIndex + 1;

    if ( i > 4 )
    {
        i = 1;
    }

    /* Make the next division visible */
    if ( o = document.getElementById( 'LSText-' + i ) )
    {
        if ( oTarget.style.opacity == 0 )
        {
            oTarget.innerHTML = o.innerHTML;
            oTarget.style.opacity = 1;
            iIndex = i;
        }
        else if ( oTarget.style.opacity == 1 )
        {
            oTarget.style.opacity = 0;
        }
    }
}

//]]>
</script>

Ce petit exemple fonctionne à la perfection en Firefox, en Chrome, en Safari et, évidemment, en Opera (qui reste notre navigateur favori). Par contre, Internet Explorer est toujours à la traîne ! À croire que les développeurs de Microsoft se sont endormis une fois de plus, ce que confirment d'ailleurs de nombreuses réactions sur le web. Le retard de Microsoft devrait les inciter à abandonner une fois pour toutes le monde des navigateurs : il est évident qu'ils n'arrivent pas à concurrencer les Opera, Chrome, Safari et Firefox. Rappelons aussi

Une classe LSTextTrans a été créée en Vae Soli! pour encapsuler le tout. Nous vous fournirons plus d'indications sur le sujet une fois que cette classe sera publiée dans notre framework.