Blend: jQuery Effect – Menú con efecto difuminado

Para crear un vistoso menú, ya no es necesario usar alguna tecnología como Flash, porque con jQuery se pueden hacer implementaciones muy modernas y con atractivos efectos, como por ejemplo, un menuú que muestra unos colores difuminados al posar el puntero del mouse.

Blend: jQuery Effect es un plugin jQuery que permite crear un menú con efecto difuminado muy fácilmente.

Implementación

Implementar este menú es tan sencillo como:

Definir los estilo en una CSS

Si descargas el ejemplo y revisas el código verás que éste utiliza sprites, que en realidad es muy sencillo, todos los gráficos están en un sólo archivo imagen y con CSS se muestran determinadas porciones de este.

Enlazar los archivos JS:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.blend.js"></script>

Inicializar el script:

<script type="text/javascript">
        $(document).ready(function(){

            $("#demo a").blend();
        });
</script>

Y definir en el cuerpo del HTML (BODY) algo similar a la siguiente porción de código:

<div class="demo" id="demo">
<h2>Blend Default: $(selector).blend();</h2>

<a href="#" id="demo_home">Home</a>
<a href="#" id="demo_blog">Blog</a>
<a href="#" id="demo_demo">Demo</a>
<a href="#" id="demo_about">About</a>
<a href="#" id="demo_services">Services</a>
<a href="#" id="demo_contact">Contact</a>

</div>

También se puede usar otras variaciones del efecto como:

$("#demo a").blend({pulse:true}); //efecto pulsante
$("#demo a").blend({reverse:true}); //efecto inverso

Como vez, con cada implementación jQuery se logra muy fácilmente efectos muy atractivos que potencian nuestros desarrollos y enriquecen la experiencia del usuario.

Blend: jQuery Effect:

Web: colorpowered.com/blend

Vía: delicious.com