jquery | Tutoriales en la Web

Cabecera animada en JQUERY

Posteado el 27. Jul, 2010 por Webi in Desarrollo Web, Jquery

Esto es lo que aprenderás en este tutorial de JQUERY.

Mueve el cursos de derecha a izquierda para ver el efecto

PASO 1
Creamos una nueva carpeta llamada cabecera con movimiento, dentro de la cual creamos una carpeta llamada imágenes ahí vamos a insertar las imágenes que vamos a utilizar en este caso es un barco, un globo, una isla, unos pajaros, un brillo todo en png y el fondo principal de nuestra animación.

Cabecera animada en JQUERY

PASO 2
Vamos a Dreamweaver y creamos un nuevo documento de HTML en blanco.

Cabecera animada en JQUERY

PASO 3
Con el comando Ctrl + S salvamos nuestro documento con el nombre de cabecera con movimiento.html.

Cabecera animada en JQUERY

PASO 4
Ahora presionamos el comando Ctrl + N y creamos un nuevo documento CSS y con el comando ctrl. + s lo salvamos y lo guardamos dentro de una carpeta llamada css con el nombre de movimiento.

Cabecera animada en JQUERY

PASO 5
Ahora copiamos y pegamos el siguiente código dentro del css.

Code block

body {
background-image: url(../imagenes/fondocabecera.jpg);
background-repeat: repeat-x;
background-color: #d1d3d0;
}
 
#container {
width:1000px;
margin:0 auto;
background-image: url(../imagenes/brillo.png);
background-repeat: no-repeat;
background-position: center top;
overflow:hidden;
}
#parallax
{position:relative; overflow:hidden; width:800px; height:450px;border:none;
margin:0 auto 20px auto;}
#parallax a{width:100px;
height:100px;
 
}
#parallax a img{
border:none;}
a img{
border:none;}

Cabecera animada en JQUERY

PASO 6
Vamos a nuestro documento HTML y justo por debajo de la etiqueta cabecera con movimiento pegamos el siguiente código.

Cabecera animada en JQUERY

Code block

<link href="css/movimiento.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="Javascript" src="js/jquery_002.js"></script>
<script type="text/javascript">
 
jQuery(document).ready(function(){
 
	jQuery('#parallax').jparallax({yparallax:false},{xtravel: '100px'},{xtravel: '300px'});
 
 $(function() {
        $('#gallery a').lightBox();
    });
});
 
</script>

PASO 7
Creamos dentro de la carpeta cabecera con movimiento una carpeta llamada js y copiamos los siguientes archivos js dentro de ella, los cuales adjunto en este tutorial.