Cómo crear flechas de navegación animadas con Flexslider y CSS3

Como de costumbre lo primero, por la mañana, leo todo tipo de noticias. Desde noticias del mundo hasta noticias del mundo del desarrollo web. Pues así descubrí un tutorial de CSS3 titulado "Arrow Navigation Styles" en Codrops. Así es como empecé este tutorial.

Seguro que estáis muy familiarizados con los tutoriales de Codrops. Son muy inspiradores y creativos. Estuve haciendo pruebas con los estilos para la flecha de navegación de la demo y me quedé impresionado. Me pregunté cómo de difícil sería implementarlo en un slider, sin llegar a crear un slider desde cero. El primer slider que de inmediato me vino a la mente fue FlexSlider.

Me encanta FlexSlider. Es fácil de implementar y responde muy bien a los diseños responsive y a todos los navegadores en general. Aparte de eso, cuenta con muchas opciones y lo más importante, funciones de devolución de llamadas muy prácticas. Como ya he trabajado con Flexslider en múltiples proyectos de clientes, sé que puedo integrar las nuevas flechas de navegación en dicho slider, y os contaré a vosotros también cómo hacerlo.

Así quedaría ya integrado:

Voy a tratar de implementar 4 estilos con mi propio código. Necesitarás CSS3 y jQuery para este tutorial.

Configuración de Flexslider

Lo primero es lo primero, necesitas saber cómo configurar Flexslider. No vamos a tratar ese tema en este tutorial, puedes leerlo en su documentación.

Este es el diseño por defecto para que funcione el slider:

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>	

Una vez lo tengamos funcionando, tenemos que configurar y añadir algunos scripts para poblar ciertos elementos de la navegación direccional de FlexSlider, por lo que, si queremos, podemos darle estilo más tarde. Por defecto, este es el diseño HTML que obtendrás una vez que el slider se esté ejecutando (lo puedes ver con un inspeccionador).

<ul class="flex-direction-nav">
	<li><a class="flex-prev" href="#">Previous</a></li>
	<li><a class="flex-next" href="#">Next</a></li>
</ul>

Eventos de devolución de llamada

Tenemos que añadir leyendas y miniaturas al slider. Ya conoces el diseño HTML, y a continuación te mostramos el que vamos a utilizar:

<div class="flexslider">
  <ul class="slides">
    <li>
			<img src="img/full/5.jpg" alt="icy Mountain" data-thumbnail="img/thumbnail/5.jpg" />	
		</li>		
 		<li>
			<img src="img/full/3.jpg" alt="Stoney Creek" data-thumbnail="img/thumbnail/3.jpg" />	
		</li>
    <li>
			<img src="img/full/2.jpg" alt="Narrow Road" data-thumbnail="img/thumbnail/2.jpg" />	
		</li>						 		
    <li>
			<img src="img/full/1.jpg" alt="Grey Sky" data-thumbnail="img/thumbnail/1.jpg"/>	
		</li>		
    <li>
			<img src="img/full/4.jpg" alt="Wood Pattern" data-thumbnail="img/thumbnail/4.jpg" />	
		</li>
	</ul>
</div>

Tenemos que añadir alt y también data-thumbnail para las leyendas y las rutas a las miniaturas.

Por último, utilizamos los eventos de devolución de llamada para añadir HTML al nav. Más o menos se explica por sí mismo.

$(function () {

	//Initialize FlexSlider
	$('#hero .flexslider').flexslider({
		slideshow: false,
		slideshowSpeed: 5000,
		pauseOnHover: true,
		start: renderPreview,	//render preview on start
		before: renderPreview //render preview before moving to the next slide
	});
		
	function renderPreview(slider) {
	
		 var sl = $(slider);
		 var prevWrapper = sl.find('.flex-prev');
		 var nextWrapper = sl.find('.flex-next');		 
		 
		 //calculate the prev and curr slide based on current slide
		 var curr = slider.animatingTo;
		 var prev = (curr == 0) ? slider.count - 1 : curr - 1;
		 var next = (curr == slider.count - 1) ? 0 : curr + 1;		 

		 //add prev and next slide details into the directional nav
		 prevWrapper.find('.preview, .arrow').remove();
		 nextWrapper.find('.preview, .arrow').remove();		 		 
		 prevWrapper.append(grabContent(sl.find('li:eq(' + prev + ') img')));
		 nextWrapper.append(grabContent(sl.find('li:eq(' + next + ') img')));		 

	}
	
	// grab the data and render in HTML
	function grabContent(img) {		
		var tn = img.data('thumbnail');
		var alt = img.prop('alt');		
		var html = '';
		
		//you can edit this markup to your own needs, but make sure you style it up accordingly
		html = '<div class="arrow"></div><div class="preview"><img src="' + tn + '" alt="" /><div class="alt">' + alt + '</div></div>';	
		return html;
	}
	
});	

Una vez que actualices y ejecutes este script, este será el diseño para el nav:

<ul class="flex-direction-nav">
	<li>
		<a class="flex-prev" href="#">Previous
			<div class="arrow"></div>
			<div class="preview">
				<img src="img/thumbnail/3.jpg" alt="">
				<div class="alt">Stoney Creek</div>
			</div>
		</a>
	</li>
	<li>
		<a class="flex-next" href="#">Next
			<div class="arrow"></div>
			<div class="preview">
				<img src="img/thumbnail/1.jpg" alt="">
				<div class="alt">Grey Sky</div>
			</div>
		</a>
	</li>
</ul>	

Animacion CSS3

Para la animación vamos a depender en gran medida de CSS3. Como resultado de ello, ten en cuenta que este tutorial sólo funcionará en los navegadores modernos. Lo he comprobado en Chrome, Safari, Firefox e IE10. Además, el diseño responsive requerirá estilo adicional. Por último, al igual que en el tutorial de Codrop, no es una solución para dispositivos táctiles.

A continuación muestro el estilo para el Slide Out. Añadimos una transición a .preview y cambiando las propiedades left y right, seremos capaces de deslizar el contenido fácilmente.

/* general style */
.preview {
	width: 360px;
	height:90px;
	position: absolute;
	top:0;
	left:-90px;
	z-index:100;
	-webkit-transition:  all 0.3s ease-out; 
	-moz-transition:  all 0.3s ease-out; 
	transition:  all 0.3s ease-out; 	
	opacity:0;
}

.preview img {
	position: absolute;
	left:90px;
	top:0;
	width: 90px;
}

.preview .alt {
	position: absolute;
	left:180px;
	top:0;
	background: #fff;
	width: 180px;
	height:90px;
	color:#000;
	text-indent:0;
	text-transform: uppercase;
	text-align:center;
	font-size:16px;
	line-height:90px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}


/* next button */			
.flex-next .preview {
	right:-50px;
	left:auto;	
}

.flex-next .preview img {
	position: absolute;
	left:180px;
	top:0;
	width: 90px;
}

.flex-next .preview .alt {
	left:0;
}


/* hover style */		
.flex-prev:hover .preview {
	left:0;
	opacity:1;
}

.flex-next:hover .preview {
	right:0;
	opacity:1;
}	

El siguiente CSS es para realizar una animación Flip Out. Un Flip Out es mucho más complicado porque tocamos transformaciones 3D. Tenemos que definir ciertas propiedades como perspective-origin, perspective, transform-origin, etc, para asegurarnos de que tiene un buen efecto de volteo 3D.

/* general style */
.preview {
	width: 90px;
	height:90px;
	position: absolute;
	top:0;
	left:90px;
	z-index:100;
	-webkit-transition:  all 0.3s ease-out; 
	-moz-transition:  all 0.3s ease-out; 
	transition:  all 0.3s ease-out; 	
}

.preview img {
	position: absolute;
	left:0;
	top:0;
	width: 90px;
}

.preview .alt {
	display:none;
}


/* prev button */				
.flex-prev {
	-webkit-perspective-origin: 100% 50%;
	perspective-origin: 100% 50%;
	-webkit-perspective: 1000px;
	perspective: 1000px;			
}

.flex-prev .preview {
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}


/* next button */				
.flex-next {
	-webkit-perspective-origin: 0% 50%;
	perspective-origin: 0% 50%;			
	-webkit-perspective: 1000px;
	perspective: 1000px;				
}

.flex-next .preview {
	right:90px;
	left:auto;	
	-webkit-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.flex-next .preview img {
	position: absolute;
	left:0;
	top:0;
	width: 90px;
}


/* hover style */				
.flex-direction-nav a:hover .preview {
	opacity:1;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);			
}


/* different hover style for flexslider nav */
.flex-direction-nav a {
	-webkit-transition:  none; 
	-moz-transition: none; 
	transition:  none;		
}

Fuente: queness.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP