carlessanagustin-parallax1

Mi primera experiencia con Parallax

21 agosto, 2013

He probado de programar una nueva tendencia en diseño web: Parallax. Se basa en el concepto de la física de un desplazamiento o una diferencia en la posición aparente de un objeto visto a lo largo de dos líneas diferentes de la vista. Hoy en día, muchos sitios web están diseñados siguiendo esta regla que crea el efecto de movimiento en 3D cuando se desplaza horizontal o verticalmente.

Para el ejemplo creado usé las librerias Stellar.js, jQuery Easing y YUI CSS 3; Stellar genera el efecto Parallax, Easing para dar opciones avanzadas de movimiento flexible a jQuery y YUI3 resetea el CSS del navegador.

Demo.

Al desplazarse por la interfaz podemos llegar a diferentes diapositivas y experimentar el efecto Parallax. En la parte HTML encontraremos los datos estructurados en estático y diapositiva. Los datos estáticos es contenido repetitivo como la lista del menú de la izquierda y el logotipo en el centro de la página. Mientras que las diapositivas son un grupo de 5 divs con objetos en movimiento y otros contenidos estáticos para cada una de las diapositivas. Los datos estáticos está fuera de cualquier Stellar.js div. Una diapositiva en general:

some text here

title
  1. div.slide: Contiene el contenido general de una diapositiva.
  2. div.slide span: Contiene texto formatado.
  3. div.slide div.wrapper: Contiene elementos Parallax como imágenes y botones.

Los atributos HTML son particulares de Stellar.js. Para más información sugiero leer su documentación.

function goToByScroll(dataslide) {
	htmlbody.animate({
	scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
	}, 2000, 'easeInOutQuint');
}
links.click(function (e) {
	e.preventDefault();
	dataslide = $(this).attr('data-slide');
	goToByScroll(dataslide);
});
  1. goToByScroll function: Función general del movimiento entre diapositivas.
  2. click function: Acción de click para los botones. Envia al usuario a la diapositiva seleccionada.

He usado el CSS para dar estilo y posicionamiento de elementos.

Como me ha gustado la experiencia, voy a seguir estudiando el efecto Parallax y espero a publicar más artículos.
Saludos.

    Etiquetas: , , ,

    1 comentario

    1. seo marketing company dice:

      I really like reading through an article that will make people think.
      Also, thanks for allowing me to comment!

    Dejar un comentario