Universal AJAX Live Search

Scroll y Acción! Anima tu página web con CSS y jQuery

En este artículo veremos como darle vida a tu página web por medio del uso de animaciones logradas con CSS3 y HTML5 adicionalmente, implementaremos una forma de navegación vertical con jQuery para sacarle más provecho a estos efectos.

 Para poder realizar los efectos que puedes ver en el Demo , vamos a hacer uso de las siguientes herramientas:

Propiedad Transform de CSS- La propiedad Transform es una implementación de CSS3, que nos va a permitir hacer cambios a los objetos del documento al que le apliquemos este estilo, esta propiedad nos va permitir hacer las siguientes transformaciones a los elementos: translate (traducir), rotate (rotar), scale (escalar) o skew (sesgar), efectos que antes era imposible hacer con css y para usarlos en la web teníamos que utilizar flash o javascript.

Su uso está soportado en los siguientes navegadores: 

Transformaciones 2D

Chrome   Safari    Firefox  Opera    IE   Android  IOS

Todos        3.1+    3.5+   10.5+   10+   ?     Mínimo 4

Transformaciones 3D

Chrome   Safari  Firefox    Opera    IE   Android IOS

10+           4+          12+  none   10+    ?      5?

 

Habiendo dicho lo anterior, otra de las herramientas que utilizaremos es el plugin de jQuery "OnePageScroll" que nos ayudará a crear una navegación vertical que nos lleve de manera sutil a cada una de las secciones de la página dónde a su vez se llevarán a cabo las animaciones.

Las animaciones que se implementarán en este Demo son las siguientes:

  • Fade In o Aparición progresiva 
  • Slide o Deslizamiento horizontal
  • Overlapping o Superposición de elementos a diferentes velocidades

Lo primero que necesitamos es un documento HTML5 para crear las secciones donde verán nuestras animaciones, la estructura básica con la que comenzaremos es esta, llamaremos este documento index.html: 

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Scroll y animación web</title>
   <link rel="stylesheet" href="css/estilos.css"> 
</head>
<body>
<!--Aqui iremos contruyendo el Demo-->	

</body>

</html>

 

Como puede observarse, ya se encuentra la indicación de ligar el archivo estilos.css, mismo que se creará con los bloques que iremos agregando. A continuación agregaremos el primer contenedor para realizar la animación de entrada

FADE IN O APARICIÓN PROGRESIVA

HTML

<body class="loading">
    <section>
        <!--En esta parte vamos a introducir el contenido que aparecerá progresivamente-->
    </section>
</body>

 

CSS 

.loading {
    background: url('../img/ico_loading.gif') no-repeat center center; /*Esta parte hará la función de cargador mientras aparece el contenido*/
}
section {
    opacity: 0; /*El valor inicial de la opacidad del contenedor es 0, por medio de javascript haremos que aparezca al asignarle la clase .loaded_section*/
    -webkit-transition:opacity .6s;
    -moz-transition:opacity .6s;
    -o-transition:opacity .6s;
    transition: opacity .6s;
}
.loaded section {
    opacity: 1;
}

 

 JS

Este bloque de Javascript lo introduciremos en la parte final de nuestro documento, justo antes de </body>, con lo cuál estaremos removiendo la clase .loading de el elemento y asignando la clase loaded 2 segundos después de que la página esté cargada 

<script type="text/javascript">
$(window).load(function() {
    // start up after 2sec no matter what
    window.setTimeout(function(){
        $('body').removeClass("loading").addClass('loaded');
    }, 2000);
});
</script>

 

SLIDE O DESPLAZAMIENTO HORIZONTAL

Para esta animación, crearemos un segundo contenedor en nuestro documento index.html 

HTML 

<section id="revealAnim">
      <div class="section-content">
           <div class="copy-container">
	        <h2>Con el Poder de CSS, HTML5 y Javascript</h2>
           </div>
           <div class="images-container">
	       <img class="front" src="img/html5.jpg" alt="html5 logo" />
	       <img class="back" src="img/css3.jpg" alt="css3 logo" />
	       <img class="side" src="img/javascript.jpg" alt="javascript logo" />
           </div>
       </div>
</section>

 

CSS

Lo que necesitamos para acer que este efecto funcione, es simplemente alinear nuestras imágenes una junto a otra usando la propiedad "float", y usar translate3d para cambiar su posición de inicio, al final se resetea a 0 el valor de translate3d, adicionalmente el valor.9s es el retardo en la animación y la duración de la misma.

#revealAnim .images-container img {
    -webkit-transition: -webkit-transform .6s .9s;
    -moz-transition: -moz-transform .6s .9s;
    transition: transform .6s .9s;
}
#revealAnim .images-container .back { z-index:2;
    -webkit-transform:translate3d(-40%, 0, 0);
       -moz-transform:translate3d(-40%, 0, 0);
            transform:translate3d(-40%, 0, 0);
}
#revealAnim .images-container .front {
    -webkit-transform:translate3d(61.6%, 0, 0);
       -moz-transform:translate3d(61.6%, 0, 0);
            transform:translate3d(61.6%, 0, 0);
}
#revealAnim .images-container .side {
    -webkit-transform:translate3d(-338%, 0, 0);
       -moz-transform:translate3d(-338%, 0, 0);
            transform:translate3d(-338%, 0, 0);
}
.viewing-page-2 #revealAnim .images-container img {
    -webkit-transform: translate3d(0, 0, 0) !important;
    -moz-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}

 

OVERLAPPING O SUPERPOSICIÓN DE ELEMENTOS

Para este efecto, lo que sucederá es que tendremos dos elementos que van a tomar su posición a diferentes velocidades para terminar sobreponiendose por medio de la propiedad z-index y nuevamente, el uso de translate3d para controlar el movimiento de los elementos. En esta ocasión crearemos un bloque html donde el contenedor con la clase .images-container tiene una imagen y en otro contenedor con la clase .fake-container se encuentra la otra imagen, para poder moverlas de forma independiente.

El plugin OnePageScroll funciona renderizando una clase en el <body> del documento detectando cada bloque que hemos creado como una "página", usaremos la clase .viewing-page-3 para cambiar la posición de .fake-content.

HTML

<section id="betweenSlidesAnimEnd">
     <div class="fake-content">
	   <div class="images-container">
	        <img class="" src="img/usabilidad-corazon.png" alt="love web" />
	    </div>
	</div>
        <div class="section-content2">
              <div class="copy-container2">
	           <h2>Para darle vida a tus contenidos!</h2>
	      </div>
              <div class="images-container">
	         <img class="front2" src="img/hands.png" alt="hand" />
              </div>
	</div>
</section>

 

CSS 

.viewing-page-3 .fake-content {
    -webkit-transform: translate3d(0, -100%, 0) !important;
    -moz-transform: translate3d(0, -100%, 0) !important;
    transform: translate3d(0, -100%, 0) !important;
}
.viewing-page-3 .fake-content .green {
    -webkit-transform: translate3d(0, 160px, 0) !important;
    -moz-transform: translate3d(0, 160px, 0) !important;
    transform: translate3d(0, 160px, 0) !important;
}

 

POR ULTIMO, AGREGUEMOS LA NAVEGACIÓN 

El siguiente código lo agregaremos justo antes de cerrar la etiqueta <body>, con lo cual estaremos cargando la librería jquery, el plugin OnePageScroll, con su respectiva hoja de estilos e inicializando el plugin para crear la navegación.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="js/onepagescroll/jquery.onepage-scroll.js"></script>
		<link href='js/onepagescroll/onepage-scroll.css' rel='stylesheet' type='text/css'>
		 <script type="text/javascript">
		
$(document).ready(function(){

	$(".main").onepage_scroll({
	   sectionContainer: "section", // sectionContainer acepta cualquier tipo de selector, en caso de que no desees usar section
	   easing: "ease", // Las opciones de tipo de animaciòn acepta estilos de animaciòn CSS· tales como "ease", "linear", "ease-in", "ease-out", "ease-in-out", o incluso valores de bezier-cubico como "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
	   animationTime: 900, // AnimationTime te permite definir cuànto tiempo le tomarà a la secciòn ejecutar la animaciòn
	   pagination: true, // Puedes decidir que se muestre o no la paginaciòn para tus secciones detectadas, los valores son True para mostrar, false para ocultar.
	});
	
});

 

Con estos pasos habremos experimentado con la propiedad translate3d de CSS3 y la ayuda de jQuery para crear efectos muy útiles en tus próximos proyectos web, recuerda que tu creatividad es el límite y que afortunadamente, estos efectos y muchos otros ya son soportados por la mayoría de navegadores web.

Sigue praticando! Nos vemos en el próximo artículo :)

 

Zae Vega. Diseñadora Web, Amante del Café, la Usabilidad y Front-End.

Dudas o comentario? Encuéntrame en twitter como @ZaeVega