Tilt, un efecto de inclinación parallax interactivo con jQuery

Tabla de contenido

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. En esta ocasión vengo a dejar un pequeño artículo sobre un efecto muy chulo que se consigue utilizando Tilt. Este es un pequeño complemento de jQuery que aplica el efecto de inclinación parallax multicapa tipo póster de tvOS a cualquier elemento HTML utilizando requestAnimationFrame y transformaciones 3D CSS3.

Efecto de parallax al pasar el ratón con Tilt.js

tilt.js

Este complemento jQuery agrega un efecto en el elemento que responde de acuerdo con el movimiento del ratón. Tan solo tendremos que incluir el script jQuery y un poco de CSS. Para empezar vamos a necesitar un archivo html para este ejemplo

Archivo html

Dentro del archivo vamos a definir la estructura sobre la que vamos a aplicar el efecto.

<html>
<head>
	<title>ejemplo</title>
<!-- Definimos la ruta hasta el archivo css que vamos a utilizar para aplicar el efecto-->
	 <link rel="stylesheet" href="./tilt.css">

</head>
<body>
<!-- Definimos el primer elemento, que será un cuadro con un texto por encima-->
<div class="tilt tilt-logo" data-tilt data-tilt-glare="true" data-tilt-scale="1.1">
	<span class="tilt-logo-inner">
		SAPOCLAY
	</span>
</div>
<!-- Definimos un segundo elemento consistente en una imágen cargada desde una URL externa al proyecto-->
<div class="tilt tilt-movie" data-tilt data-tilt-glare="true" data-tilt-scale="1.1">
	<img src="https://entreunosyceros.net/wp-content/uploads/2019/03/cropped-logo-512x512-entreunosyceros.png">
</div>
<!-- Para terminar definimos la ruta hasta los archivos .js necesarios. En tilt.jquery.min.js podremos definir los valores que nos muestran en la documentación-->
<script src="js/jquery.min.js" ></script>
<script src="js/tilt.jquery.min.js"></script>
</body>
</html>

Una vez guardado el archivo html, vamos a definir el archivo css necesario.

El archivo CSS

En este archivo vamos a definir las propiedades css para las clases que aplicamos a los elementos del ejemplo incluidos en el archivo html.

html {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: inherit;
}
.tilt {
	box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
	transform-style: preserve-3d;
	margin: 50px auto;
}

.tilt-logo {
	width: 200px;
	height: 200px;
	background-color: #7e56ff;
	background-image: linear-gradient(150deg, #5a00ff 0%, #ff1ff7 100%, #ff1ff7 100%);
}

.tilt-logo-inner {
	transform: translateZ(50px) translateY(-50%) translateX(-50%);
	position: absolute;
	top: 50%;
	left: 50%;
	color: white;
	font-size: 1.9rem;
}

.tilt-movie, .tilt-movie img {
	width: 400px;
	height: 300px;
}

Todos estos parámetros anteriores son modificables a gusto del usuario.

Archivos js

En cuanto a los archivo .js necesarios, se pueden descargar desde el repositorio de GitHub en el que me encontré este complemento. Tan solo habrá que clonar el repo y en el master que nos podemos descargar, encontraremos todos los archivos necesarios.

Yo lo he probado ya en una web, consiguiendo un efecto muy chulo, aun que en la versión móvil no tiene el efecto tan fluido como se consigue en una web desde su versión de escritorio. Además he montado un ejemplo para que se pueda ver lo descrito en las anteriores líneas en funcionamiento.

Con el uso de este complemento, se puede aumentar la participación de los usuarios con el contenido. Se puede establecer el valor de las operaciones utilizando JavaScript o con el atributo de inclinación de datos. Los usuarios podemos obtener más información acerca de este complemento en la landing page que tienen en GitHub.

Tilt, un efecto de inclinación parallax interactivo con jQuery