Página de inicio   Diseño y desarollo web

Mastercafe S.L.

Dirección: 
Pl. Puerta de Europa 2 - 1D 
Oviedo Asturias 
33011

Telefonos de contacto: 
Oficina:  +34 627 531 764
Tel:  985 11 3939
Fax:  985 11 5780 

Correo electronico:  

info@mastercafe.com

 

ver mapa....

qrcode

TopBox

jQuery tutoriales haz más escribiendo menos

jQuery tutoriales y ejemplos

separador
16
May

Scroll menu con thumbs en jQuery

Relacionados: CSS3 jQuery Scroll Menu Vertical

Menu scroll vertical

En este tutorial vamos a crear un menu fijo con imagenes tipo thumbnail que incorporan un scroll vertical. La idea es crear un menú fijo en la parte inferior de la ventana y dar un bloque vertical de imagenes pequeñas que se deslicen en la medida que movemos el ratón sobre ellas Los thumbnails se deslizaran por debajo del ratón en base al trayecto realizado con un agradable efecto. Se han incluido algunas propiedades CSS3 para mejorar el aspecto, estas mejoras no serán visibles en navegadores antiguos que no sean compatibles con CSS3.

La base de programación para el script que usa jQuery tiene como origen el ejemplo de Andrew Valums Vertical Scrolling Menu.

Las imágenes usadas en la demo son de una colección de moda recopilada de Flickr propiedad de kk+ on flickr. El tutorial original es de la genial Mary Lou de Codrops

Comenzamos con el paso a paso

El HTML basico

El código html es realmente simple, tan solo necesitamos una lista desordenada que disponga de sus elementos "li" que incluyen la lista de imágenes y el título del menú:

<ul class="menu" id="menu">
	<li>
		<a href="#">Brand 1</a>
		<div class="sc_menu_wrapper">
			<div class="sc_menu">
				<a href=""><img src="images/1.jpg" alt=""/></a>

				<a href=""><img src="images/2.jpg" alt=""/></a>
				...
			</div>
		</div>
	</li>
	...

</ul>

Hasta aquí es bastante sencillo, pero necesitamos nuestras CSS y script para que realmente consigamos el efecto deseado.
Las CSS

Primero vamos a definir la propiedad overflow para la página, así evitamos el scroll :

body{
    overflow:hidden;
}

Este bloque no es realmente necesario para el trabajo, pero los ayuda a visualizar mejor y con un aspecto más agradable, nada complicado y realmente ayuda al resultado.

/* Navigation Style */
ul.menu{
    list-style:none;
    font-family: "Trebuchet MS", Arial, sans-serif;;
    font-size: 15px;
    font-style: normal;
    font-weight: normal;
    text-transform:uppercase;
    letter-spacing: normal;
    line-height: 1.45em;
    position: fixed;
    bottom:0px;
    left:0px;
    width:700px;
    height:100%;
}

Si queremos que nuestra página tenga un scroll, entonces debemos asegurarnos que fijamos la posición del menú, si es que queremos verlo en la parte inferior de la web. La lista de elementos y los links serán con el estilo que indicamos:

ul.menu li{
    float:left;
    position:relative;
    height:100%;
    width:130px;
}
ul.menu li > a{
    position:absolute;
    bottom:0px;
    left:0px;
    width:130px;
    height:40px;
    text-align:center;
    line-height:40px;
    color:#ddd;
    background-color:#291A2F;
    letter-spacing:1px;
    cursor:pointer;
    text-decoration:none;
    text-shadow:0px 0px 1px #fff;
    -moz-box-shadow:-1px 0px 5px #000;
    -webkit-box-shadow:-1px 0px 5px #000;
    box-shadow:-1px 0px 5px #000;
    opacity:0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

Con un texto en blanco y sombreado, conseguimos un efecto realzado de la tipografía, esto nos da un efecto suavizado (especialmente para Chrome). La última linea solo funcionará en IE y es para conseguir gestionar la transparencia del elemento.
Debemos ser cuidadosos con los filtros sobre imágenes PNG ya que tendremos algunas partes (semi-)transparentes: IE rellena con un negro degradado por fuera.

El estilo de las imágenes pequeñas se definen de la siguiente forma:

/* Thumb Scrolling Style */
div.sc_menu_wrapper {
    position: absolute;
    top:0px;
    width:150px;
    overflow: hidden;
    bottom:0px;
    left:0px;
    visibility:hidden;
}
div.sc_menu {
    width:130px;
    visibility:hidden;
}

Ahora, porque no usar visibility:hidden aquí? Tenemos dos razones: una es que queremos hacer que los thumbs aparezcan como si de un apilado se tratara desde la parte inferior hacia la parte superior, de esta forma ya emplazamos los elementos allí y solo tenemos que hacerlo visible con javascript. Con display:none, conseguimos que el elemento no asume ningún ancho o alto en la web, pero con visibility:hidden tendremos desde el principio es espacio reservado y asignado y simplemente no es visible.

La razón de porque hacemos que esto es porque la función "scroll" en jQuery necesita el alto de los elementos. Si nuestro elemento no fuera visualizado o mostrado, entonces no sería posible recuperar el valor. Así pues la visibilidad la resolvemos de esta forma.

La imagen pequeña y su link se personalizan de esta forma:

.sc_menu a {
    display: block;
    background-color:#22002F;
    color: #fff;
    text-align:center;
    -moz-box-shadow:3px -3px 3px #3B0F4F;
    box-shadow:3px -3px 3px #3B0F4F;
    -webkit-box-shadow:3px -3px 3px #3B0F4F;
}
.sc_menu img {
    display: block;
    border: none;
    opacity:0.3;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}

Ya tenemos toda nuestra hoja de estilos completada!

El JavaScript

La principal idea es construir los "thumbs" o mini-imágenes cuando el ratón este sobre el elemento del menú. Mostraremos los elementos apilados (Stack) sobre la imagen o elemento señalado y en orden uno sobre otro y todo ello con un pequeño delay o retraso que veremos en las lineas 34 a 44.

La función “buildThumbs” nos da el scroll a realizar sin barras de deslizamiento, con un simple movimiento del ratón de arriba a abajo.

La función “inactiveMargin” nos permite encontrar el mayor y menor elemento de imagen pequeña, de esta forma podemos ver la imagen completa sobre el ratón y no recortar nada.

Inicialmente queremos comenzar con el botón de inicio (Start) así que usamos un scroll down (lineas 13).

Cuando dejamos los elementos principales, ponemos el fondo como normal, así lo ocultamos de nuevo (lineas 49-58).

Cuando hacemos "hover" sobre las imágenes, cambiamos la opacidad (lineas 62-75)

$(function(){

	/* function to make the thumbs menu scrollable */

	function buildThumbs($elem){
		var $wrapper    	= $elem.next();
		var $menu 			= $wrapper.find('.sc_menu');
		var inactiveMargin 	= 150;

		/* move the scroll down to the
		beggining (move as much as the height of the menu) */

		$wrapper.scrollTop($menu.outerHeight());

		/* when moving the mouse up or down,
		the wrapper moves (scrolls) up or down */

		$wrapper.bind('mousemove',function(e){
			var wrapperHeight 	= $wrapper.height();
			var menuHeight 	= $menu.outerHeight() + 2 * inactiveMargin;
			var top 	= (e.pageY - $wrapper.offset().top) * (menuHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
			$wrapper.scrollTop(top+10);
		});
	}

	var stacktime;

	$('#menu li > a').bind('mouseover',function () {
		var $this = $(this);

		buildThumbs($this);

		var pos	=	$this.next().find('a').size();
		var f	=	function(){
			if(pos==0) clearTimeout(stacktime);
			$this.next()
				 .find('a:nth-child('+pos+')')
				 .css('visibility','visible');
			--pos;
		};

		/* each thumb will appear with a delay*/

		stacktime = setInterval(f , 50);
	});

	/* on mouseleave of the whole <li> the scrollable area is hidden */

	$('#menu li').bind('mouseleave',function () {
		var $this = $(this);
		clearTimeout(stacktime);
		$this.find('.sc_menu')
			 .css('visibility','hidden')
			 .find('a')
			 .css('visibility','hidden');
		$this.find('.sc_menu_wrapper')
			 .css('visibility','hidden');
	});

	/* when hovering a thumb, change its opacity */

	$('.sc_menu a').hover(
		function () {
			var $this = $(this);
			$this.find('img')
			.stop()
			.animate({'opacity':'1.0'},400);
		},
		function () {
			var $this = $(this);
			$this.find('img')
			.stop()
			.animate({'opacity':'0.3'},400);
		}
	);
});

Este tutorial fue extraido de CoDrops y realizado por Mary Lou. Puedes ver el ejemplo funcionando standalone en esta demo.

 

| Mas
Vota
Regístrate para acceder al blog

VOLVER
separador

Web creada con MBC Diseño y desarrollo web © Mastercafe SL - Alojamiento web trafico ilimitado hosting ISPActivo  |  Nota legal  |  Nota técnica

Valid XHTML 1.0 Transitional Valid XHTML 1.0 Transitional

 

blanco

blanco

Login/Conexion

No estas registrado? Registrate!