• Josetxu.com
  • Perfil
  • Portafolio
  • Iconos
  • Demos
  • Blog
Blog · Josetxu.com

Efecto Mouse Parallax

Publicada en 28 sep 2016 de Josetxu

El parallax (o paralaje) es la desviación angular de la posición aparente de un objeto, dependiendo del punto de vista elegido.
JQuery Parallax es uno de los múltiples plugins de JQuery que se puede utilizar para conseguir este efecto de manera muy fácil utilizando como punto de vista la posición variable del ratón. Vamos a verlo…

Mouse Parallax

HTML / HTML5

 

Empecemos por la estructura HTML.

1. El elemento main contiene toda la escena.

2. Dentro ponemos una lista de tipo ul y le añadimos el atributo id con el valor scene.

3. Cada elemento li del interior la lista, además de llevar el atributo class con valor layer, lleva el atributo data-depth de HTML5, que es usado por javascript para distribuir las imagenes en diferentes planos usando diferentes valores para cada elemento: 0.1, 0.2, 0.3 y 0.4.

4. Dentro de cada elemento li pondremos un div que será el que lleve cada una de las imágenes de fondo, las cuales se añaden con CSS mediante una clase única en cada uno de los div, que en este caso son: layer1, layer2, layer3 y layer4.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<main>
    <ul id="scene">
        <li class="layer" data-depth="0.1">
            <div class="layer1"></div>
        </li>
        <li class="layer" data-depth="0.2">
            <div class="layer2"></div>
        </li>
        <li class="layer" data-depth="0.3">
            <div class="layer3"></div>
        </li>
        <li class="layer" data-depth="0.4">
            <div class="layer4"></div>
        </li>
    </ul>
</main>

CSS / CSS3

 

En la parte de CSS lo único destacable sería:

El elemento main que debe llevar las propiedades width y height al 100% y 100vh respectivamente, esto hace que el elemento abarque el ancho total de la pantalla del navegador. También usamos overflow con valor hidden para ocultar lo que sobresalga de la escena.

CSS
1
2
3
4
5
main {
width: 100%;
height: 100vh;
overflow: hidden;
}

 

La lista con el id scene debe llevar las propiedades width al 115% y height al 120vh para conseguir un sobredimensionamiento y poder mover las imágenes sin que se vea el corte del final de las mismas. También hay que ponerle las propiedades top y height al -5% para centrar toda la escena.

CSS
1
2
3
4
5
6
7
8
9
#scene {
padding: 0;
margin: 0;
width: 115%;
height: 120vh;
overflow: hidden;
top: -5%;
left: -5%;
}

 

A los elementos li de la lista les daremos estilos con la clase layer. Hacemos lo mismo que en el caso anterior para sobredimensionar los elementos y poder moverlos sin ver los bordes de las imágenes, añadimos las propiedades width y height al 110% y 120vh respectivamente.

CSS
1
2
3
4
5
.layer {
width: 110%;
height: 120vh;
overflow: hidden;
}

 

Dentro de cada li, en el elemento div, añadimos una imagen de fondo a cada uno de los elementos utilizando las clases únicas: layer1, layer2, layer3 y layer4.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.layer1, .layer2, .layer3, .layer4 {
background-size: cover;
background-position: center;
position: absolute;
width: 100%;
height: 100%;
left: -1%;
top: -1%;
}
 
.layer1 {
background-image: url(https://josetxu.com/demos/img/parallax-1.jpg);
}
 
.layer2 {
background-image: url(https://josetxu.com/demos/img/parallax-2.png);
}
 
.layer3 {
background-image: url(https://josetxu.com/demos/img/parallax-3.png);
}
 
.layer4 {
background-image: url(https://josetxu.com/demos/img/parallax-4.png);
}

Javascript / JQuery

 

Como decíamos al principio de este artículo todo esto no funciona sin el plugin JQuery Parallax.
Debemos descargar el plugin y añadir los siguientes archivos javascript a nuestro código HTML. Se pueden poner en el head del documento, o al final del body para agilizar la carga, eso ya es cosa vuestra…

XHTML
1
2
<script src="jquery.min.js"></script>
<script src="jquery.parallax.min.js"></script>

 

También hay que añadir una pequeña función en el document ready que activará el efecto que buscamos.

JavaScript
1
2
3
$(document).ready(function () {
    $('#scene').parallax();
});

Demo

Y aquí tenéis la demo con el resultado final.

See the Pen JQuery Mouse Parallax Effect by Josetxu (@josetxu) on CodePen.

ver demo grande

Compatibilidad en navegadores
El número indica la primera versión del navegador que soporta la característica.
Navegador ► ▼ Característica
data-* 4 2 5.5 9.6 3.1
vh 20 19 9 20 6
Publicado en: CSS3, HTML5, Javascript, JQuery | Etiquetas: Animación, Imagen |
« Flip Cards o Tarjetas Giratorias con CSS3
» Convertir duración de video de la API v3 de Youtube en PHP

Artículos Relacionados

  • Efecto “Before / After” Responsive Efecto “Before / After” Responsive
  • Afinador de Guitarra – Online Guitar TunerAfinador de Guitarra – Online Guitar Tuner
  • Flip Cards o Tarjetas Giratorias con CSS3Flip Cards o Tarjetas Giratorias con CSS3
  • Captcha en PHPCaptcha en PHP
  • Imagen aleatoria con PHPImagen aleatoria con PHP
josetxu Josetxu López

Diseñador y programador web multidisciplinar y autodidacta.
Investigo las posibilidades que nos ofrece la tecnología aprendiendo algo nuevo cada día. La curiosidad y la paciencia me han enseñado casi todo lo que sé...

Buscar

Categorías

  • CSS (7)
  • CSS3 (7)
  • HTML (4)
  • HTML5 (3)
  • Javascript (8)
  • JQuery (1)
  • PHP (6)

Etiquetas

Animación Audio Básico Captcha Clases Constructores Formularios Funciones Iconos Imagen JSON Métodos Responsive

Recientes

Crear pestañas de contenido o 'tabs' fácilmente con javascript
Crear pestañas de contenido o 'tabs' fácilmente con javascript
Funciones básicas en PHP: [include()] y [require()]
Funciones básicas en PHP: [include()] y [require()]
Iconos con CSS
Iconos con CSS
Aplicar estilos CSS a campos [radio] y [checkbox]
Aplicar estilos CSS a campos [radio] y [checkbox]

Utilidades

Color Picker w3c Selector de color Google Fonts google Fuentes de Google Can I use @Fyrd Soporte por navegadores Gimp gimp Manipulación de imágenes Notepad++ notepad++ Editor de código W3C Validator w3c Validador de código Highcharts highchartsGráficas en Javascript

Aviso

La información contenida en este blog es solo orientativa . No soy profesor, solo un tio curioso que quiere compartir lo aprendido durante estos años.

CyberChimps WordPress Themes

josetxu.comJosetxu.com Perfil | Portafolio | Iconos | Demos | Blog 2000 - 2020 © josetxu.com
▲