Inicio Apuntes FPApuntes DAW Tilt, un efecto de inclinación parallax interactivo con jQuery

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

Publicado por entreunosyceros

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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.