Notes

Un fade in au chargement de la page avec jQuery

sur du texte ou sur une image

Tags : , ,

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.

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>

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

P.-S.

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/

© 2017 - Abel Poucet web design