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

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.







¿Qué te ha parecido este post?

¡Haz clic en una estrella para calificarla!

Puntuación media 5 / 5. Recuento de votos: 2

¡No hay votos hasta ahora! Sé el primero en calificar esta publicación.

No te pierdas otros artículos ...

¡Síguenos en las redes sociales!

¡Lamentamos que esta publicación no te haya sido útil!

¡Permítanos mejorar esta publicación!

¿Cuéntanos cómo podemos mejorar esta publicación?

Resumen
Tilt, un efecto de inclinación parallax interactivo con jQuery
Nombre
Tilt, un efecto de inclinación parallax interactivo con jQuery
Descripción
Vamos a ver un poco por encima el complemento TILT. Un complemento jQuery que nos permite añadir un efecto de inclinación parallax interactivo.
Autor
sapoclay
Nombre del editor
entreunosyceros
Logo del editor

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.