Como Iluminar un Icono con Efecto de Desvanecimiento y jQuery
Efecto Fading con jQuery
En esta ocación les traigo este script que sirve para darle un efecto de desvanecimiento a una imagene que nosotros queramos, por ejemplo nuesto icono rss.
Para esto debemos de tener un par de imagenes (como ejemplo la imagen que se muestra en el post). Yo utilize un imagen .png de un rss, una fue la original y la otra la converti a grises con ayuda de photoshop(Imagen->Modo->Escala de Grises).
Ya una vez que tengas las imagenes vamos con el codigo que es realmente sencillo.
Empezamos con el codigo CSS:
CSS:
-
body{
-
background:#000;
-
background-image: url(dinpattern-stripe.gif);
-
background-repeat: repeat;
-
}
-
#rss{
-
width:150px;
-
height:150px;
-
margin:auto;
-
position:center;
-
display:block;}
-
#rss a{
-
background-image:url(Feed2.png);
-
background-repeat: no-repeat;
-
position:center;
-
display:block;
-
width:150px;
-
height:150px;
-
}
-
#rss span.hover{
-
width:150px;
-
height:150px;
-
background-image:url(Feed.png);
-
background-repeat: no-repeat;
-
position:center;
-
display:block;}
Donde Feed2.png es la imagen a escala de grises y Feed.png es la imagen original
Ahora el HTML que es muy sencillo, solo una pequeña llamada a la clase:
Y por ultimo el codigo Javascript que ira entre las etiquetas Head y /Head:
JavaScript:
-
$(function () {
-
$('#rss a')
-
-
.append('<span class="hover" id="rsscolor"/>').each(function () {
-
-
var $span = $('> span.hover', this).css('opacity', 0);
-
-
$(this).hover(function () {
-
-
$span.stop().fadeTo(800, 1);
-
}, function () {
-
-
$span.stop().fadeTo(800, 0);
-
});
-
});
-
});
Nota: No te olvides de hacer el llamado al archivo jquery-1.3.2.js, de lo contrario no funcionara.(Entre Head y /Head tambien)
JavaScript:
-
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
Demo
Descargar Archivos
Vota esta entrada:
Entradas Relacionadas
Únete a nuestro grupo de Facebook
Devblab en Facebook
Author:
cuisi Comments: 8 comments Date:
16 Jun 2009
Categories: Diseño, Javascript, Tutos Tags: Diseño Web, Efectos, jQuery
Categories: Diseño, Javascript, Tutos Tags: Diseño Web, Efectos, jQuery
There are 8 comments. Leave a comment!
¬ meneame.net
#2274 June 16th, 2009 at 2:49 pm
Como Iluminar un Icono con Efecto de Desvanecimiento y jQuery | DevBlab...
Tal cual en el post:"Hoy en dia podemos ver por la red muchos sitios que usan diferentes scripts y lenguajes para crear efectos en su sitio. Algo de lo mas usado ultimamente, o por lo menos asi lo veo yo es jQuery, y yo pienso que esto se debe a l...
¬ teknear.com
#2276 June 16th, 2009 at 5:18 pm
Como Iluminar un Icono con Efecto de Desvanecimiento y jQuery...
Vota este post en teknear.com...
¬ isaac flores
#2344 August 4th, 2009 at 2:22 pm
Hola buenas. Increible tu tutorial. Estoy empezando en esto de jquery. Esta genial. Me dedico a hacer paginas web , soy autonomo llevo 2 años en esto, poca cosa, me pregunto si cuando inserte esta funcion de fading en una web es necesario pedirte permiso a si esto tiene alguna licencia o es totalmente gratuito para incorporarlo a webs y venderlas... como lo has hecho tu ..... Ya me diras saludos
¬ cuisi
#2345 August 4th, 2009 at 4:05 pm
Que tal @isaac flores no tienes que pedirme ningun permiso , esto es libre para el que lo quiera usar, y pues gracias por el comentario, el primero despues de alrededor de 300 descargas del script jejeje, se siente bien saber que alguien le sirvio... de nuevo gracias y saludos.
P.D. Usalo libremente
¬ vikerweb
#2761 January 8th, 2010 at 10:38 am
Buen codigo y buen ejemplo. Aunque me gustaria modificarlo un poco para poder explicarlo ampliamente en mi blog. Eso si, citaria la fuente original y el autor que eres tu.
Yo lo tengo creado haciendo un rollover con css, y estaba buscando un ejemplo concreto en jQuery y que no fuera empalagoso. Por tanto estoy a la espera de tu conformidad.
Saludos.
¬ cuisi
#2772 January 10th, 2010 at 12:57 am
Hola @vikerweb por supuesto que lo puedes utilizar en tu blog. Dale explicalo como tu quieras, saludos
¬ vikerweb
#2775 January 10th, 2010 at 9:19 pm
Perfecto, gracias!. Saludos.
¬ Efecto Fadding jQuery « Viker Web
#2793 January 14th, 2010 at 7:36 am
[...] ¡Comentar! Gracias al amigo Cuisi en su fabuloso articulo sobe iluminar un icono con efecto fadding en jQuery. [...]