Un fade in au chargement de la page avec jQuery

Accueil du site > tools > Un fade in au chargement de la page avec jQuery

sur du texte ou sur une image

Javascript | webdesign | jQuery

On veut lancer automatiquement un "fade in" (ou tout autre effet visuel) sur un bloc choisit (une image ou du texte) au lancement de la page en utilisant la bibliothèque javascript jQuery. Un petit script bien pratique (trouvé sur le blog de nodeo) qui m’évite d’insérer du Flash dans mes pages pour, par exemple, un simple logo qui apparaît en page d’intro.

Voir en ligne : http://blog.nodeo.net/index.php/pos...

Voici le code d’appelle du javascript à installer dans la balise "head" de vos pages. On peut utiliser un "fade in" ou bien tout autre "effet" de jQuery :

<script type="text/javascript">



    $(document).ready(function(){

            $("#nom_de_la_div").fadeIn(8000);

    });



</script>

Et ci dessous le html à mettre dans "body". On glisse un "display : none" dans le bloc voulu, puis, dans une balise "noscript" on remet la div sans le "display : none" pour les visiteurs qui auraient désactivé javascript sur leur navigateur.

<div id="div_exemple" style="display: none;">Ce bloc apparaît au chargement de la page!</div>



<noscript><div id="div_exemple">Ce bloc apparaît au chargement de la page!</div></noscript>

Autres liens :

Fade in sur une image en roll-over avec Jquery : http://cssbeauty.com/skillshare/dis...

Diaporama en fade in : http://medienfreunde.com/lab/innerfade/

Vos réactions

Clément, [5 décembre 2008]

Pourquoi pas, mais en l’absence de JS, le bloc n’apparait jamais ! Embêtant non ?

abel Poucet, [17 décembre 2008]

Oui c’est vrai, il faut mettre un "noscript" avec le bloc en question pour les utilisateur sans JS. Ils n’auront pas l’effet fade in mais verront le contenu de la div... Merci, j’ai modifié l’article.

Réagir

(Vous pouvez laisser un message en remplissant les champs ci-dessous)

Navigation alternative :

Tools : derniers articles

Créa : derniers articles

Contact

14 bis, bd de l'Hôpital 75005 Paris
06 81 35 98 00