CraftySlide es un plugin para jquery que nos permite crear un slideshow de un modo muy sencillo. Basta con un HTML similar al siguiente:

<div id="slideshow">
         <ul>
            <li>
              <img src="images/image1.jpg" title="Lorem ipsum dolor sit amet" />
            </li>
            
            <li>
              <img src="images/image2.jpg" title="Lorem ipsum dolor sit amet" />
            </li>
            
            <li>           
              <img src="images/image3.jpg" title="Lorem ipsum dolor sit amet" />
            </li>	                         
          </ul>
</div>

Incluir los ficheros javascript y CSS incluidos en el paquete del plugin, junto con jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
<script src="js/craftyslide.js"></script>
<link rel="stylesheet" href="css/craftyslide.css" />

e inicializar el carrusel de imágenes:

$(document).ready(function() {
	$("#slideshow").craftyslide();
});

Ver ejemplo en funcionamiento » »
Craftyslide » »

CSS3 nos permite rotar letras, pero es bastante complicado organizar cada letra a lo largo de un trazado curvo. Arctext.js es un plugin de jQuery que nos permite hacer exactamente eso de un modo sencillo. Basado en Lettering.js, calcula la rotación correcta de cada letra y distribuye los caracteresm de un modo equidistante en el arco.

Arctext.js » »

ResponsiveSlides.js es un pequeño plugin de jQuery que crea un slideshow "responsive" dentro de un solo contenedor. Funciona con una amplia gama de navegadores incluyendo todas las versiones de IE desde IE6 en adelante. También agrega soporte CSS para max-width en los navegadores IE6 y otros que no lo soporten de forma nativa. La única dependencia es jQuery y que todas las imágenes sean del mismo tamaño.

La mayor diferencia con respecto a otros plugins "responsive" es el tamaño (~ 1kb miniaturizado y comprimido).

ResponsiveSlides.js » »

En este tutorial vamos a crear una caja flotante que se desplaza a medida que se hace scroll por la página. De ese modo el contenido de lo que haya en su interior siempre estará visible. Lo mejor es ver un ejemplo.

Ver ejemplo en funcionamiento » »

Lo primero es situar la caja al final de la página. Por ejemplo, justo antes del final del BODY.

<div id="caja_flotante">
    	<div id="cont_caja_flotante">
    		<a href="#"><img src="images/facebook.png" alt="facebook" /></a>
    		<a href="#"><img src="images/twitter.png" alt="twitter" /></a>
    		<a href="#"><img src="images/flickr.png" alt="flickr" /></a>
    	</div>
 </div>

En las propiedades CSS de esta caja la situamos en una posición absoluta:

#caja_flotante{
		position: absolute;
        top:0;
        left: 10px;
        border: 1px solid #CCC;
        background-color: #F2F2F2;
        width:100px;
}

Ahora tan sólo queda recurrir a jQuery:

$(document).ready(function() {
        var posicion = $("#caja_flotante").offset();
	    var margenSuperior = 15;
	     $(window).scroll(function() {
	         if ($(window).scrollTop() > posicion.top) {
	             $("#caja_flotante").stop().animate({
	                 marginTop: $(window).scrollTop() - posicion.top + margenSuperior
	             });
	         } else {
	             $("#caja_flotante").stop().animate({
	                 marginTop: 0
	             });
	         };
	     });
});

La siguiente técnica nos permite realizar una transición entre dos fotos cuando situamos el puntero del ratón sobre una de ellas. Tenemos que realizar una capa con el tamaño exacto de las dos imágenes, poner como fondo de esta capa a una de ellas y dentro de la capa a la otra imagen.

HTML:

<div id="ejemplo_fade">
    	<img src="img/fashion1.jpg" />
</div>

CSS:

#ejemplo_fade{
	background:url("img/fashion2.jpg");
	position:relative;
	width:200px;
	height:200px;
	cursor:pointer;
}

JAVASCRIPT:

$(document).ready(function() {
	
    $("#ejemplo_fade").hover(function(){
        $(this).find("img").fadeOut();
    }, function() {
        $(this).find("img").fadeIn();
    });	

});

El ejemplo completo sería:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fade Imagenes</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	
$("#ejemplo_fade").hover(function(){
    $(this).find("img").fadeOut();
}, function() {
    $(this).find("img").fadeIn();
});	

});	
</script>
<style type="text/css">
#contenido{
	width:500px;
	margin:auto 0;
	padding:30px;
}
#ejemplo_fade{
	background:url("img/fashion2.jpg");
	position:relative;
	width:200px;
	height:200px;
	cursor:pointer;
}
</style>
</head>
<body>
<div id="contenido">
	<div id="ejemplo_fade">
    	<img src="img/fashion1.jpg" />
    </div>
</div>
</body>
</html>

Ver ejemplo en funcionamiento » »

La siguiente función permite crear un agradable efecto de scroll para desplazarse hasta un anclaje. Tan sólo hay que añadir la clase "toplink".

$("a.toplink").click(function() {
	$("html, body").animate({
		scrollTop: $($(this).attr("href")).offset().top + "px"
	}, {
		duration: 1000,
		easing: "swing"
	});
	return false;
});

Ver ejemplo en funcionamiento » »
Visto en snipplr » »

El siguiente snippet nos permite crear un menú de salto con jQuery

$(".menu_salto").change(function() {
    	var val = $('select option:selected').val();
    	if (val != '') {
    	location.href=val;
	}
});

Un ejemplo podría ser el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu Salto jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".menu_salto").change(function() {
		var val = $('select option:selected').val();
		if (val != '') {
		location.href=val;
	}
	});
});	
</script>
</head>
<body>
<select name="menu" class="menu_salto">
	<option value="">Ir a....</option>
	<option value="http://www.google.es">Google</option>
	<option value="http://www.yahoo.es">Yahoo</option>
 	<option value="http://dribbble.com/">Dribble</option>
</select>
</body>
</html>

Ver ejemplo en funcionamiento » »

El siguiente snippet nos permite añadir un valor por defecto a un campo de texto y que cuando el usuario se disponga a introducir datos en él, este valor desaparezca. Esta técnica se suele utilizar para dar indicaciones sobre como rellenar el campo dentro del propio campo.

$("#caja").focus(function() {
           if( this.value == this.defaultValue ) {
           this.value = "";
           }
           }).blur(function() {
           if( !this.value.length ) {
           this.value = this.defaultValue;
           }
       });

Un ejemplo podría ser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu Salto jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".caja").focus(function() {
           if( this.value == this.defaultValue ) {
           this.value = "";
           }
           }).blur(function() {
           if( !this.value.length ) {
           this.value = this.defaultValue;
           }
       });
});	
</script>
<style type="text/css">
.caja{
	padding:5px;
	font-size:11px;
	color:#666;
	background:#E8E8E8;
	border:1px solid #CCC;	
}
</style>
</head>
<body>
<p><label> Ejemplo 1:</label><input name="caja" class="caja" width="60" maxlength="200" value="valor por defecto" /></p>
<p><label> Usuario:</label><input name="caja" class="caja" width="60" maxlength="200" value="Al menos 5 caracteres" /></p>
</body>
</html>

Ver ejemplo en funcionamiento » »

Slideshowify es un plugin para jQuery, muy interesante, que nos sirve para crear el denominado "efecto Ken Burns" sobre las imágenes que coinciden con un selector. Para ver el efecto lo mejor es acceder a la demo.

Demo » »
Slideshowify » »