Existe un buen número de efectos en jQuery que también pueden hacerse con CSS, como por ejemplo revelar el contenido extra de un área determinada cuando se hacer hover sobre ella con el ratón, pero con jQuery conseguimos darle un aspecto más atractivo.

Este tutorial explica cómo crear una galería de imágenes con viñetas, y cómo conseguir que al hacer clic sobre ellas se revele la imagen completa e información adicional sobre ella.

El funcionamiento de este script es el siguiente:

1. El evento se inicia al darle al botón de “Más información”
2. “Crecen” dos cosas: todo el contenedor, y el div que contiene la foto
3. Desaparece el botón de “Más información”
4. Aparecen el área de “Información” y el botón de cerrar

CSS

.foto-area
{
	width: 100px;
	height: 130px;
	padding: 10px;
	border: 1px solid #666;
	overflow: hidden;
	position: relative;
	margin: 10px;
	background: white;
}
#foto
{
	width: 100px;
	height: 100px;
	background: url(imagenes/mthood.jpg) center center;
	margin-bottom: 5px;
}
.info-area
{
	opacity: 0.0;
}
a.mas-info
{
	display: block;
	width: 89px;
	height: 26px;
	background: url(imagenes/masInfo.jpg);
	text-indent: -9999px;
}
a.cerrar
{
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: block;
	width: 20px;
	height: 21px;
	background: url(imagenes/botonCerrar.jpg);
	text-indent: -9999px;
}

jQuery

	$(document).ready(function(){

		$(".mas-info").click(function(){
			$(this).parents(".foto-area").animate({
					width: "500px",
					height: "470px",
			        borderWidth: "10px"
			      }, 600 );

			$(this).fadeOut();

			$("#foto").animate({
		        width: "500px",
				height: "375px"
			      }, 600 );
			$(".info-area").animate({
		        opacity: 1.0,
			      }, 600 );
			});

		$(".foto-area .cerrar").click(function(){
			$(this).parents(".foto-area-1").animate({
					width: "100px",
					height: "130px",
			        borderWidth: "1px"
			      }, 600 );

			$(".mas-info").fadeIn();

			$("#foto").animate({
		        width: "100px",
				height: "100px"
			      }, 600 );
			$(".info-area").animate({
		        opacity: 0.0,
			      }, 600 );
			});

		});

Aunque el código funciona bien, tiene algunos problemas y limitaciones:

• El tamaño al que crecen .foto-area y #foto se ha especificado en el código de jQuery. Sería mucho mejor si en lugar de eso, crecieran en base al tamaño de la imagen, quizá con innerWidth.
• La forma de referenciar los elementos de la página también es mejorable; habría que buscar un modo de referenciar padres e hijos para reducir la cantidad de código.

o bien los archivos de ejemplo.

Fuente: Learning jQuery: Revealing Photo Slider (css-tricks)

¿Eres fotógrafo, dibujante o diseñador y quieres sorprender a los visitantes de tu web con una muestra de tus últimos trabajos? ¿Quieres dar un aspecto atractivo a tu portafolio con un carrusel de imágenes que puede hacerse con unas pocas líneas de código?

Entonces sigue los sencillos pasos que te mostramos en este tutorial y pronto podrás crear tu propia galería de imágenes.

Básicamente, los pasos que tenemos que realizar son:

• mostrar sólo la primera imagen y ocultar las demás
• colocar una clase “actual” en la lista de elementos
• sólo hay que ejecutar la función una vez cuando tenga el estado “actual”

Eso es todo, así de fácil. Pasamos a ver el código:

HTML

		<div class="carrusel">
			<ul class="listaReciente">
				<li><a class="actual" href="#imagen1">1</a></li>
				<li><a href="#imagen2">2</a></li>
				<li><a href="#imagen3">3</a></li>
			</ul>
			<img id="imagen1" src="imagen-1.gif" alt="Imagen 1 del carrusel" />
			<img id="imagen2" src="imagen-2.gif" alt="Imagen 2 del carrusel" />
			<img id="imagen3" src="imagen-3.gif" alt="Imagen 3 del carrusel" />
		</div>

CSS

En este ejemplo la lista desordenada tiene posición absoluta, y de esa forma podemos posicionar fácilmente los elementos de la lista sobre las imágenes.

		.carrusel
		{
			position: relative;
			background: #fafafa;
			width: 403px;
			height: 240px;
			border: 1px solid #e5e5e5;
			margin-bottom: 20px;
		}

		.carrusel img
		{
			position: absolute;
			top: 3px;
			left: 3px;
			z-index: 10;
			background: #fff;
		}

		ul.listaReciente
		{
			position: absolute;
			bottom: 12px;
			right: 4px;
			list-style: none;
			z-index: 20;
		}

		ul.listaReciente li { display: inline; }

		ul.listaReciente li a, ul.listaReciente li a:visited
		{
			display: block;
			float: left;
			background: #e5e5e5;
			padding: 4px 8px;
			margin-right: 1px;
			color: #000;
			text-decoration: none;
			cursor: pointer;
		}

		ul.listaReciente li a:hover, ul.listaReciente li a:visited:hover
		{
			background: #666; color: #fff;
		}

		ul.listaReciente li a.actual
		{
			background: #f00;
			color: #fff;
		}

jQuery

Vamos a asegurarnos de que cuando un elemento de la lista posea la clase “actual”, el script no se ejecute otra vez.

		$(function()
		{
			var imgWrapper = $('.carrusel > img');

			// mostrar sólo la primera imagen, ocultar el resto

			imgWrapper.hide().filter(':first').show();

			$('ul.listaReciente li a').click(function ()
			{
				// comprobar si este elemento no tiene class="actual"
				// si tiene class="actual" no debe ejecutar el script de nuevo

				if (this.className.indexOf('actual') == -1)
				{
					imgWrapper.hide();
					imgWrapper.filter(this.hash).fadeIn(500);
					$('ul.listaReciente li a').removeClass('actual');
					$(this).addClass('actual');
				}
				return false;
			});
		});

Fuente: Simple Slideshow with jQuery [icng]

Tanto los principiantes como los programadores más expertos pueden cometer errores en la codificación de sus archivos HTML y CSS, ya sea por descuido o por falta de experiencia.

Crear un código limpio es muy importante y te ayudará a mejorar tu habilidad como desarrollador web, además de ahorrarte el tiempo que perderías en posteriores ediciones. Nunca está de más revisar el código aunque seas un desarrollador experto, porque la causa de muchos de estos errores es hacer las cosas con demasiadas prisas y no haber observado unas buenas técnicas de codificación desde el principio.

Aquí tienes una útil lista de los errores y equivocaciones más comunes que hemos observado tanto en nuestros propios trabajos como en los ajenos.

Errores de HTML

Olvidarse de cerrar las etiquetas

Esto es muy habitual, especialmente entre los principiantes. Hay varias etiquetas que requieren sus etiquetas de cierre, como div, strong o los enlaces, por nombrar sólo unas pocas. Otras etiquetas requieren una barra de cierre para terminar la línea, como es el caso de la etiqueta img.

<div>Texto dentro del DIV.</div>
<img src="imagenes/nombredelaimagen.jpg" />

Utilizar un DOCTYPE inadecuado

HTML nos exige que empecemos el documento con una declaración DOCTYPE correcta. Debe hacerse antes de cualquier otro elemento del código, y comenzar el documento declarando qué tipo de HTML estamos usando.

Éste es el DOCTYPE para XHTML 1.0 Transicional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Anidar etiquetas de forma incorrecta

Es muy importante abrir y cerrar las etiquetas en el orden apropiado. Cuando abrimos algo (un div, por ejemplo), hay que cerrarlo antes de que cualquier elemento superior pueda cerrarse.

El ejemplo siguiente es incorrecto:

<div><strong>texto</div></strong>

Escribir las etiquetas en mayúsculas

Esto se considera simplemente una mala práctica, pero hará que tu código no pueda ser validado. Siempre deberíamos utilizar minúsculas para etiquetas como los div, los enlaces o las imágenes.

El ejemplo siguiente es incorrecto:

<DIV></DIV>

Olvidarse de abrir o cerrar comillas

Este error puede verse mucho en los principiantes, y provoca código erróneo y que las cosas no funcionen adecuadamente. HTML requiere comillas dobles que hay que abrir y cerrar correctamente.

Esto es un ejemplo de su uso correcto:

<img src="imagenes/imagendecabecera.jpg" />

Usar estilos en línea

Su uso también se considera mala práctica. Los estilos en línea funcionan pero terminan convirtiéndose en dolores de cabeza más tarde. El estilo de los elementos debería aplicarse de forma global mediante una hoja de estilos externa, y así será mucho más fácil editar y añadir estilos posteriormente.

Un ejemplo de estilos en línea:

<a href="enlace.html" style="color: #000; text-decoration: none;">nombre del enlace</a>

No codificar los caracteres especiales

Los caracteres como “©” o “&” deberían mostrarse utilizando el código HTML apropiado para cada uno. En la red pueden encontrarse infinidad de listas de caracteres con sus equivalencias en las entidades HTML correspondientes.

Confundir “class” con “id”

Las clases (“class”) son para elementos que se utilizan más de una vez en la página. Como por ejemplo, el estilo de un enlace al que se hace referencia varias veces desde una página pero que no sigue el estilo global de los demás enlaces. Los identificadores (“id”) son elementos a los que sólo se hace referencia una vez, como el div de la cabecera. A menudo se abusa de las clases y los identificadores, y también se utilizan en lugares innecesarios. Intenta usar el menor número posible de atributos.

Errores de CSS

Olvidarse de los cierres apropiados

Todos los elementos comienzan con una llave de apertura y terminan con una llave de cierre. Todos los estilos tienen que terminar con un punto y coma. La última declaración dentro de un elemento no necesita el punto y coma, pero es mejor utilizarlo porque en caso de que tengas que añadir más elementos posteriormente, es posible que te olvides de añadirlo.

Esto es un ejemplo de uso correcto:

#nombre_div
{
	width: 40px;
	height: 30px;
}

Es discutible si es conveniente condensar la hoja de estilos escribiendo todas las declaraciones de un div en una sola línea. Yo prefiero poner cada declaración en su propia línea porque creo que es más fácil editar el código de esa manera, pero otros argumentan que eso produce un código más largo y unos archivos CSS más pesados.

No usar estilos globales

El estilo de muchos elementos debería aplicarse de forma global, como los estilos de párrafo y cabecera para el texto o los estilos de los enlaces. Esto reducirá el riesgo de errores y también la cantidad de código de tu hoja de estilos.

No utilizar nombres únicos para los identificadores y las clases

Es muy importante elegir nombres que sean únicos para facilitar su posterior edición y para poder identificarlos en la hoja de estilo. Pon nombres específicos a tus div: es mejor un nombre como #columnaIzquierdaInicio que sólo #izquierda.

No usar código abreviado

El código abreviado es otra manera de condensar tu hoja de estilo, y resulta útil para acelerar los tiempos de carga del usuario y también para encontrar algo cuando estés editando más tarde. En vez de usar padding-top, padding-left, padding-bottom y padding-right, puedes escribir:

padding: 5px 10px 0 10px;

El código abreviado se puede utilizar en muchas declaraciones, incluyendo padding, margin, border y font.

No utilizar declaraciones cortas de color

Los números hexadecimales que se repiten, como #FFFFFF o #000000, pueden acortarse a #FFF y #000. Es otra forma de condensar tu código y de hacer que todo sea corto y fácil de revisar.

Usar el posicionamiento de forma incorrecta

El posicionamiento es difícil de comprender cuando se empieza con CSS. Tienes cuatro opciones a elegir: static, relative, absolute y fixed. Static es la opción por defecto y se posiciona según el flujo normal de la página. Un elemento cuyo estilo es relative posee una posición relativa a sí mismo, lo que significa que puedes moverlo arriba, abajo, a derecha o izquierda, basándonos en la posición en la que normalmente se colocaría. La posición absolute nos permite situar un elemento en cualquier lugar de la página, y es la declaración de posicionamiento que menos se usa. Los valores que establezcas para él serán relativos al último elemento padre que sea relative o absolute, y si no hay ninguno, vuelve por defecto a la etiqueta html, permitiéndonos situarlo en cualquier parte de la página mediante valores asignados a top, left, right o bottom.  Un elemento fixed tiene una posición relativa a la ventana del navegador, así que el elemento se quedará en el mismo sitio aunque el usuario haga scroll. Aprender cómo usar el posicionamiento correctamente es importante, aunque no debería utilizarse en exceso.

Validación

Validar tus archivos HTML y CSS te ayudará a reducir errores y a descubrir de dónde puede proceder un problema. Puede que tu página web funcione correctamente aunque muestre algunos de estos errores de HTML y CSS, pero eso no significa que sea buena práctica o código válido. El validador te ayudará a identificar estos problemas, y pronto serás capaz de mejorar tu forma de codificar en proyectos futuros.

Fuente: The Most Common HTML and CSS Mistakes to Avoid [web design ledger]

En este tutorial vamos a ver cómo crear dos efectos para que se muestren al hacer hover sobre un grupo de enlaces con iconos, en la misma línea que los efectos que poseen docks como ObjectDock o RocketDock.

Usando los efectos de animación de jQuery, vamos a experimentar con dos tipos de iconos: unos tienen un efecto de reflejo en su parte inferior y los otros tienen sombra.

Tanto el HTML como el CSS que vamos a usar son bastante claros, y tienen una estructura y estilo que son comunes a muchos menús de navegación web. No vamos a incluir el código en este artículo pero podéis echarle un ojo a la página de ejemplo o bien descargaros los archivos de ejemplo para verlos.

jQuery

// Inicio jQuery

$(document).ready(function() {

/* Menú con reflejo ----------------------------------------------- */

    // Agregar un SPAN a cada LI para añadir el reflejo

    $("#nav-reflection li").append("<span></span>");

    // Animar los botones, mover el reflejo y atenuarlo

    $("#nav-reflection a").hover(function() {
        $(this).stop().animate({ marginTop: "-10px" }, 200);
        $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
    },function(){
        $(this).stop().animate({ marginTop: "0px" }, 300);
        $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
    });

/* Menú con Sombra ----------------------------------------------- */

    // Agregar la imagen de la sombra a cada LI

    $("#nav-shadow li").append('<img class="shadow" src="images/icons-shadow.jpg" width="81" height="27" alt="" />');

    // Animar los botones, y encoger y atenuar la sombra

    $("#nav-shadow li").hover(function() {
    	var e = this;
        $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
        	$(e).find("a").animate({ marginTop: "-10px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
    },function(){
    	var e = this;
        $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
        	$(e).find("a").animate({ marginTop: "0px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0px", opacity: 1 }, 250);
    });

// Fin jQuery

En pocas palabras, el .JS añade un reflejo o una sombra a cada <li>, y luego anima la posición y opacidad de esos elementos y de los iconos-enlace al hacer hover. Hemos añadido .stop() para eliminar cualquier cola resultante de pasar el ratón de un lado a otro rápidamente por el menú de navegación.

Como nota final, tened en cuenta que no nos hemos molestado en dar soporte para IE6.

o bien los archivos de ejemplo.

Fuente: Create a Realistic Hover Effect with jQuery [adrian pelletier]

Este tutorial te enseñará cómo crear un script en jQuery para mostrar información a los visitantes cada vez que hagan hover con el ratón sobre una imagen.

Es un efecto muy sencillo de implementar que tiene un aspecto muy atractivo, y resulta una excelente opción para un portafolio, por ejemplo.

La mecánica es muy simple: hacemos una lista con posición relativa, colocamos imágenes con posición absoluta, y cuando pasemos el ratón sobre ella le daremos a jQuery la orden de aplicarle un bonito efecto de animación.

Aquí tenéis el código:

HTML

<ul class="bloque_hover">
	<li>
		<a href="/"><img src="your_image.gif" alt="alt" /> Texto</a>
	</li>
	<li>
		<a href="/"><img src="your_image.gif" alt="alt" /> Texto</a>
	</li>
</ul>

CSS

		ul.bloque_hover li
		{
			list-style: none;
			float: left;
			background: #fff;
			padding: 10px;
			width: 300px;
			position: relative;
			margin-right: 20px;
		}
		ul.bloque_hover li a
		{
			display: block;
			position: relative;
			overflow: hidden;
			height: 150px;
			width: 268px;
			padding: 16px;
			color: #000;
			font: 1.6em/1.3 Helvetica, Arial, sans-serif;
		}
		ul.bloque_hover li a { text-decoration: none; }
		ul.bloque_hover li img
		{
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
		}

jQuery

$(function()
{
	$('ul.bloque_hover li').hover(function()
	{
		$(this).find('img').animate({top:'182px'},{queue:false, duration:500});
	}, function()
	{
		$(this).find('img').animate({top:'0px'},{queue:false, duration:500});
	});
});

Podéis ver en acción este efecto de jQuery pinchando en este enlace: demo

Fuente: Animate a Hover with jQuery [icng]

HTML

<div id="carrusel">
<div id="botones">
		<a id="anterior" href="#">anterior</a>
		<a id="siguiente" href="#">siguiente</a>

</div>
<div id="paneles">
<ul>
	<li><img src="slide1.gif" alt="Imagen 1" width="240" height="240" /></li>
	<li><img src="slide2.gif" alt="Imagen 2" width="240" height="240" /></li>
	<li><img src="slide3.gif" alt="Imagen 3 3" width="240" height="240" /></li>
</ul>
</div>
</div>

#carrusel {
	width:255px;
	height:290px;
	margin:0 auto;
}

#paneles {
	overflow:hidden;
	/* fix ie overflow issue */
	position:relative;
	width:250px;
	height:250px;
	border:1px solid #ccc;
}

/* eliminar estilos de lista, width: ancho del elemento x total de elementos */
#paneles ul {
	position:relative;
	left:0;
	top:0;
	list-style:none;
	margin:0;
	padding:0;
	width:750px;
}

/* ancho del elemento; en este caso es un gif de 250x250px */
#paneles li {
	width:250px;
	height:250px;
	float:left;
}

#paneles li img {
	padding:5px;
}

/* estilo para los botones "anterior" y "siguiente" */
#botones {
	padding:0 0 5px 0;
	float:right;
}

#botones a {
	display:block;
	width:31px;
	height:32px;
	text-indent:-999em;
	float:left;
	outline:0;
}

a#anterior {
	background:url(arrow.gif) 0 -31px no-repeat;
}

a#anterior:hover {
	background:url(arrow.gif) 0 0 no-repeat;
}

a#siguiente {
	background:url(arrow.gif) -32px -31px no-repeat;
}

a#siguiente:hover {
	background:url(arrow.gif) -32px 0 no-repeat;
}

.clear {clear:both}

$(document).ready(function() {

	//velocidad de rotación y temporizador
	var speed = 5000;
	var run = setInterval('rotate()', speed);

	//tomar el ancho y calcular el valor izquierdo
	var item_width = $('#paneles li').outerWidth();
	var left_value = item_width * (-1);

	//poner el último elemento antes del primero, por si el usuario pulsa "anterior"
	$('#paneles li:first').before($('#paneles li:last'));

	//colocar el elemento por defecto en la posición correcta
	$('#paneles ul').css({'left' : left_value});

	//si el usuario pulsó "anterior"
	$('#anterior').click(function() {

		//tomar la posición derecha
		var left_indent = parseInt($('#paneles ul').css('left')) + item_width;

		//animar el elemento
		$('#paneles ul').animate({'left' : left_indent}, 200,function(){

			//mover el último elemento y ponerlo como primero
			$('#paneles li:first').before($('#paneles li:last'));

			//colocar el elemento por defecto en la posición correcta
			$('#paneles ul').css({'left' : left_value});

		});

		//cancelar el comportamiento del enlace
		return false;

	});

	//si el usuario pulsó "siguiente"
	$('#siguiente').click(function() {

		//tomar la posición derecha
		var left_indent = parseInt($('#paneles ul').css('left')) - item_width;

		//animar el elemento
		$('#paneles ul').animate({'left' : left_indent}, 200, function () {

			//mover el primer elemento y ponerlo como último
			$('#paneles li:last').after($('#paneles li:first'));

			//colocar el elemento por defecto en la posición correcta
			$('#paneles ul').css({'left' : left_value});

		});

		//cancelar el comportamiento del enlace
		return false;

	});

	//si se hace hover con el ratón pausar la autorotación, y si no, rotar
	$('#paneles').hover(

		function() {
			clearInterval(run);
		},
		function() {
			run = setInterval('rotate()', speed);
		}
	);

});

//una sencilla función para hacer clic en el siguiente enlace
//un temporizador llamará a esta función, y comenzará la rotación
function rotate() {
	$('#siguiente').click();
}

[/sourcecode]

¿Estás buscando una forma sencilla de hacer que tus lectores naveguen fácilmente por larguísimas páginas web? ¿Estás cansado de darle a la rueda del ratón durante un buen rato para llegar al principio del documento?

Aquí tienes un sencillo botón de “Volver al inicio” que flota sobre la esquina inferior derecha de la pantalla. Y lo mejor de todo es que está completamente hecho en jQuery, CSS y HTML, por lo que vas a poder integrarlo con facilidad en páginas que ya tengas hechas y personalizarlo para dejarlo a tu gusto.

El código está en gran parte una adaptación de los trabajos de Brian Cray y David Walsh, aunque es una combinación de sus ideas con el añadido de un efecto fade en el botón y un movimiento de scroll suave. El botón se ha colocado en la esquina inferior derecha para que resulte menos intrusivo. El navegador hará un scroll hasta el texto ancla de forma suave y agradable, gracias al estupendo plugin de jQuery ScrollTo, creado por Ariel Flesler.

¿Y cuál es ese plugin? ¿Quieres verlo en acción? Vale, entonces échale un ojo a la demo.

Sin más que añadir, aquí está el código. Primero, hay que añadir el botón y el texto ancla a la página o la plantilla. El botón debería ir al final de la página, justo encima de la etiqueta </body>. Y el texto ancla debería ir al principio de la página.

<div id="top"></div> <!--esto va al principio-->
<div id="message">
	<a href="#top" id="top-link">Volver al inicio</a>
</div> <!--esto va al final-->

Ahora, necesitaremos algo de CSS para formatear el aspecto del botón. Seguramente habrás visto que se ha dejado un espacio al final de la página para que puedan leerse las últimas líneas de texto sin que se vean obstruidas por el botón. Aquí está la hoja de estilos:

#message
{
	/* display: block antes de ocultarlo */
	display: block;
	display: none;

	/* el enlace va sobre todos los otros elementos */
	z-index: 999;

	/* el enlace no oculta texto tras él */
	opacity: .8;

	/* el enlace se queda en el mismo lugar de la página */
	position: fixed;

	/* el enlace va al final de la página */
	top: 100%;
	margin-top: -80px; /* = altura + margen inferior elegido */

	/* centrando el enlace */
	left: 80%;
	margin-left: -80px;

	/* redondea las esquinas (como prefieras) */
	-moz-border-radius: 24px;
	-webkit-border-radius: 24px;

	/* hazlo grande y fácil de ver (tamaño y estilo a tu elección) */
	width: 300px;
	line-height: 48px;
	height: 48px;
	padding: 10px;
	background-color: #000;
	font-size: 24px;
	text-align: center;
}

#message a {color: #fff;}

Y naturalmente, el jQuery. Asegúrate de haber incluido jQuery y el plugin ScrollTo en el código fuente:

$(function () // ejecuta este código al cargar la página (AKA DOM load)
{
	/* inicia las variables localmente para mejorar el rendimiento */
	var scroll_timer;
	var displayed = false;
	var $message = $('#message');
	var $window = $(window);
	var top = $(document.body).children(0).position().top;

	/* reacciona al evento 'scroll' en window */
	$window.scroll(function ()
	{
	window.clearTimeout(scroll_timer);
	scroll_timer = window.setTimeout(function ()
	{ // usa un temporizador para el rendimiento
		if($window.scrollTop() <= top) // ocúltalo si está al principio de la página
		{
			displayed = false;
			$message.fadeOut(500);
		}
		else if(displayed == false) // muéstralo si se hace scroll hacia abajo
		{
			displayed = true;
			$message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); });
		}
	}, 100);
});

$('#top-link').click(function(e)
{
	e.preventDefault();
	$.scrollTo(0,300);
});
});

… y listo! Comparte este código con tus amigos, y aprovecha los comentarios para contar qué tal te funciona. También puedes aportar tus sugerencias para mejorar sus funciones.

Fuente: Create a Hovering Scroll to Top button With jQuery [cherrysave]

jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My!

JQuery for Beginners: Using Simple JQuery Effects for a Rockstar User Interface »

Create a Hovering Scroll to Top Button With JQuery

JQuery Hovering Scroll to Top Button

Looking for an easy way to help your readers power through long web pages? Sick of scrolling for minutes at a time to get to the top of the document? Here’s a simple Scroll to Top button that hovers in the bottom right corner of your screen. Best of all, it’s made entirely from JQuery, CSS, and HTML, so you can easily drop it into preexisting pages and customize it to your hearts content.

The code is largely adapted from Brian Cray and David Walsh, but it’s a combination of the two ideas with the addition of a fade effect on the button and smooth scrolling action. Also, I moved the button to the bottom right corner of the page because I thought it was a little less intrusive. The browser will nicely and smoothly scroll up to the anchor when users click the link, and this is thanks to the super helpful ScrollTo plugin for JQuery, built by Ariel Flesler.

What’s that? You want to see it in action? Okay, you should check out the demo!

And without further ado, here’s the code. First, add the button and the anchor to your web page or template. The button should go at the bottom of your page, right above the </body> tag. And, the anchor should go at the top of your page.

view source

print?

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

1.<div id="top"></div> <!--this goes at the top-->

2.<div id="message"><a href="#top" id="top-link">Scroll to Top</a></div> <!--this goes at the bottom-->

Now, you’ll need some CSS to format the look and feel of the button. As you probably noticed, I left a gap at the bottom of the page so you can read the last few lines of text without being obstructed by the button. Here’s the stylesheet:

view source

print?

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

01..container {padding: 0 0 70px 0;} /* the gap for the bottom */

02.

03.#message

04.{

05./* display: block before hiding */

06.display: block;

07.display: none;

08.

09./* link is above all other elements */

10.z-index: 999;

11.

12./* link doesn't hide text behind it */

13.opacity: .8;

14.

15./* link stays at same place on page */

16.position: fixed;

17.

18./* link goes at the bottom of the page */

19.top: 100%;

20.margin-top: -80px; /* = height + preferred bottom margin */

21.

22./* link is centered */

23.left: 80%;

24.margin-left: -80px;

25.

26./* round the corners (to your preference) */

27.-moz-border-radius: 24px;

28.-webkit-border-radius: 24px;

29.

30./* make it big and easy to see (size, style to preferences) */

31.width: 300px;

32.line-height: 48px;

33.height: 48px;

34.padding: 10px;

35.background-color: #000;

36.font-size: 24px;

37.text-align: center;

38.}

39.

40.#message a { color: #fff; }

And, of course, the JQuery. Make sure you have JQuery and the ScrollTo plugin included in the source:

Si estás empezando como diseñador web freelance, siempre existe el temor a que las cosas no vayan a ir como tienes planeado, y por ello, no querrás gastarte montones de dinero en equipo y software caro.

Tendrás que centrarte en ser austero y en ahorrar dinero en todo lo que se pueda. Una forma de hacerlo sería utilizando herramientas gratuitas online o aplicaciones web para realizar tus tareas diarias como diseñador web.

Aquí tienes 15 herramientas online gratuitas que te resultarán de lo más útil:

Pixlr

Pixlr es una potente aplicación online de edición de imágenes. Aunque no puede hacer todo lo que hace Photoshop, posee algunas características realmente impresionantes, teniendo en cuenta que todo se realiza en el navegador.

Google Analytics

Google Analytics es probablemente la herramienta gratuita de análisis más popular. Posee montones de características, que incluyen vistas e informes personalizados, acceso compartido, e integración con AdSense.

Typetester

Typetester es una aplicación online para la comparación de fuentes en pantalla. Su papel principal es facilitar la vida del diseñador web. Según vayan integrándose nuevas fuentes en los sistemas operativos, se irá actualizando la lista de fuentes comunes.

CSS Type Set

CSS Type Set nos permite dar estilo a un texto de forma visual e interactiva, y luego generar el CSS correspondiente.

net2ftp

net2ftp nos ofrece un cliente de FTP completamente funcional dentro del navegador. Tiene hasta un skin diseñado para dispositivos móviles.

WhatTheFont

WhatTheFont nos permite seleccionar una imagen con texto o proporcionar la URL de una fuente cuyo nombre no sepamos para poder identificar la fuente y decirnos cuál es.

Color Scheme Designer

Color Scheme Designer ya lleva tiempo entre nosotros, pero su web se actualizó recientemente con una nueva interfaz y un nuevo motor de generación de esquemas de color.

FontStruct

FontStruct nos permite crear fuentes de forma fácil y rápida, contruyéndolas con formas geométricas que se disponen sobre una cuadrícula, como si fuesen bloques o losetas.

Kuler

Kuler es una aplicación web enfocada a comunidad que nos permite visualizar paletas de color creadas por otros usuarios. También podemos crear nuestras propias paletas utilizando la rueda de color, reglas de armonía y selectores de color.

Bespin

Bespin es un editor de código online creado por Mozilla. Nos permite escribir y editar código, compartir proyectos, y conectarnos a proyectos de código abierto ya existentes.

Adobe BrowserLab

Adobe BrowerLab nos concede la posibilidad de previsualizar y probar nuestras páginas web en diferentes navegadores y sistemas operativos. Ya que uno de los aspectos más molestos del diseño web es conseguir que una página web sea compatible con todos los navegadores, esta aplicación web debería resultarnos de gran valor a todos.

W3C Markup Validation Service

Markup Validator es un servicio gratuito del World Wide Web Consortium (W3C) que nos ayuda a comprobar la validación de XHTML y CSS en nuestros documentos web.

ViewLikeUs

ViewLikeUs nos permite comprobar cómo se ve nuestra página web en las resoluciones de pantalla más populares. Funciona bajo AJAX y PHP.

ColoRotate

Además de ser una manera útil de elegir colores, ColoRotate tiene un aspecto genial y es realmente divertido de usar. En vez de tener vistas en dos dimensiones, nos presenta paletas en 3D y a tiempo real.

Pingdom Tools

Pingdom Tools nos permite hacer pruebas del tiempo de carga de nuestras páginas web. Simula la forma en que una página se carga en el navegador web. El tiempo de carga de todos los objetos se muestra de forma visual con barras de tiempo. Podemos ver la lista de objetos en orden de carga o de forma jerárquica. La vista por jerarquía nos permite ver los enlaces a otros objetos, como por ejemplo un archivo CSS.

Fuente: 15 Free Online Tools for Web Designers in a Budget [web design ledger]