blog sur le développement web, jquery,css3, Magento, Symphony, php et bien d'autres choses

Transition de couleur,

néon texte html

et jquery

j’ai trouvé cet effet de néon en jquery plutôt sympa. il s’agit d’une transition d’image en jquery qui donne un effet neon, de changement de couleur sur du texte et au final c’est assez sympa.

c’est très simple:

créer deux images avec du texte coloré, avec des dégradés sur les mots comme sur l’exemple:
image effet néon jquery transition de couleur

on pose le code html:

<h1 id="neonText">
	Neon Text Effect With jQuery & CSS.
	<span id="layer1"></span>
	<span id="layer2"></span>
</h1>

on pose le CSS

/* The two text layers */
#neonText span{
	width:700px;
	height:150px;
	position:absolute;
	left:0;
	top:0;

	background:url('img/text.jpg') no-repeat left top;
}

span#layer1{
	z-index:100;
}

span#layer2{
	background-position:left bottom;
	z-index:99;
}

/* The h1 tag that holds the layers */
#neonText{
	height:150px;
	margin:180px auto 0;
	position:relative;
	width:650px;
	text-indent:-9999px;
}

et enfin le code j-query:

$(document).ready(function(){

	setInterval(function(){

		// Selecting only the visible layers:
		var versions = $('.textVersion:visible');

		if(versions.length<2){
			// If only one layer is visible, show the other
			$('.textVersion').fadeIn(800);
		}
		else{
			// Hide the upper layer
			versions.eq(0).fadeOut(800);
		}
	},1000);

});
 

et au final! l’animation de couleur, style neon sur du texte full jquery ça donne ça

>>>>>Demo du style neon sur le texte en jquery html et css<<<<<

Commentaires sur: "Effet néon sur du texte en jquery et html" (2)

  1. Maintenant, tu peux faire des sites de boîtes de nuits facile🙂

    Il est fort ce Jquery quand même, il sait tout faire !

  2. […] n°4: Effet néon sur du texte en jquery et html […]

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s