Efecto Parallax con imagenes HTML5-CSS3

abril 25, 2013 | Html5 & Css3, Jquery, Recursos

en estos ultimos tiempos el efecto parallax se a vuelto muy popular, tanto que agencias de publicidad lo han aplicado en los proyectos de sus clientes. uno de los ejemplos mas populares es la pagina de nike que actualmente tiene un juego con las imágenes, como un efecto de velocidad predeterminada a sus objetos, este mismo llamado efecto parallax

¿Que es efecto Parallax?

El efecto Parallax o de desplazamiento, en el diseño web, es la técnica que a través de diversas capas de imágenes que se mueven alrededor del sitio web a diferentes velocidades crean una ilusión 3D.

En este artículo desarrollares el efecto parallax de una forma sencilla y simple, dando movimiento a alguna imágenes con dicho efecto, comenzemos!

<title>Efecto Parallax con HTML5-CSS3<title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="js/plax.js"></script>
<script>
$(document).ready(function () {
$('#shell img').plaxify()
$.plax.enable()
})
</script>

dentro de «head» harémos la llamada al «Jquery» mediante la URL del mismo, luego llamarémos al «plugin» «plax.js» y por ultimo redactarémos una función para las imágenes y el plugin. la llamda del css se puede hacer aqui, o de lo contrario lo pueden agregar en el «head»

<div id="shell">
      <img id="plax-logo" alt="" src="img/plax_logo.png" width="136" height="70" data-xrange="20" data-yrange="20" />
      <img id="plax-sphere-1" alt="" src="img/plax_sphere_small.png" width="93" height="92" data-xrange="40" data-yrange="40" />
      <img id="plax-sphere-2" alt="" src="img/plax_sphere_large.png" width="215" height="215" data-xrange="10" data-yrange="10" />
      <img id="plax-sphere-3" alt="" src="img/plax_sphere_small.png" width="93" height="92" data-xrange="40" data-yrange="40" data-invert="true" />
</div>

como veran es un codigo simple, solo unas llamadas a la imágenes con las que realizarémos el efecto parallax

     * {
       margin: 0px;
       padding: 0px;
     }
     body {
       background: #ebeae6 url(img/body_bg.png) top left repeat;
       position: relative;
     }
     div#shell {
       display: block;
       position: relative;
       margin: 100px auto;
       width: 318px;
       height: 318px;
     }
     div#shell{
       z-index: 1;
     }
     img#plax-logo {
       position: absolute;
       top: 125px;
       left: 90px;
       z-index: 3;
     }
     img#plax-sphere-1 {
       position: absolute;
       z-index: 4;
       top: 189px;
       left: 191px;
     }
     img#plax-sphere-2 {
       position: absolute;
       z-index: 2;
       top: 49px;
       left: 53px;
     }
     img#plax-sphere-3 {
       position: absolute;
       top: 35px;
       left: 32px;
       z-index: 1;
     }

por ultimo pondremos los estilos correspondientes a nuestro efecto parallax, con esto hemos terminado

para la vista previa dejo la demo y descarga de los archivos originales icluido otros efectos parallax dentro del mismo, contraseña del zip: antocas.com

Relacionados