En mi tutorial anterior, le mostré cómo usar Transformaciones 3D de CSS para crear un diseño de cuadrícula isométrica. Fue bastante desafiante, ya que algunos navegadores, como Firefox, tienen enfoques ligeramente diferentes en cuanto a cómo representan los elementos en un plano tridimensional..
En este tutorial, continuaremos explorando Transformaciones 3D, mediante la creación de un efecto de rollover de paralaje 3D, inspirado en la interfaz de Apple TV. Seguiremos utilizando Envato Elements como inspiración para nuestro contenido; Esto es para lo que estamos trabajando:
Coloca el cursor sobre la miniatura y mueve el cursor; La miniatura se inclinará según la posición del cursor y la dirección del movimiento..
Perspectiva: una cartilla
Como seres humanos, nuestra visibilidad se limita al horizonte que se desvanece, y nuestra visión binocular crea lo que percibimos como perspectiva. La perspectiva nos ayuda a interpretar que un objeto está más lejos, en lugar de simplemente ser más pequeño.
La cuadrícula isométrica del tutorial anterior no tiene en cuenta la "perspectiva". El tamaño de la rejilla, alto y ancho, en realidad se mantiene. En realidad, deberíamos ver el lado más alejado de la cuadrícula encogiéndose debido a la perspectiva.
En CSS, podemos agregar perspectiva a la transformación 3D a través de perspectiva() función. Cabe resaltar que perspectiva() Debe agregarse antes de otras funciones de transformación, como girar() y traducir() para que surta efecto. También requiere un valor que defina la distancia de vista relativa al elemento; si el elemento debe ser visto desde lejos o cerca.
Así es como renderizamos un plano 3D con CSS. Ahora veamos cómo podemos aplicar esto para crear una efecto de paralaje. Comenzaremos con el HTML:
El marcado HTML
Si sigues nuestro tutorial anterior a fondo, encontrarás que el formato HTML es bastante similar. Aquí tenemos un div con una clase de ItemCard envolver el nombre, la imagen y el enlace que apunta a uno de los elementos en Elementos de Envato.
Fuentes
Herbert lemuel
10 de agosto
Agregue el marcado HTML anterior de arriba a abajo.
El CSS
Comenzamos agregando algunos estilos de restablecimiento que, en este caso, establecen el tamaño de la caja del elemento en casillero, eliminar el figura Margen del elemento, y hacer que la imagen fluya..
html box-sizing: border-box; *, *: before, *: after box-sizing: inherit; figura margen: 0; img ancho máximo: 100%; altura: auto;
Con eso hecho, añadimos algunos estilos a la ItemCard. Más allá de las reglas estéticas tales como radio del borde y sombra de la caja, Definimos el elemento de transición y transformación incluyendo el perspectiva() función.
Para más información sobre que cúbico-bezier () está haciendo aquí, echa un vistazo al curso de Guy Routledge:
Facilidad en las funciones de Cubic Bezier en nuestro curso Coffee Break
Una forma de respirar un poco más de vida y un poco más de personalidad en la animación en la web es experimentar con diferentes ajustes de relajación. En este café ...
Estilos Meta
A continuación, añadimos los estilos ItemCard elementos hijos; el nombre del elemento, el nombre del autor del elemento y la categoría del elemento. De manera similar, los estilos definen la visibilidad, posición, tamaño, transiciones y transformaciones de estos elementos..
Agrega los siguientes estilos para hacer que los elementos secundarios de la ItemCard y el .ItemCard__summary compatible con la representación tridimensional.
/ ** * Conservar elementos 3D para los descendientes * / .ItemCard, .ItemCard__summary transform-style: preserve-3d; Backface-visibilidad: oculto;
Flotar
los ItemCard los estilos de estado de hover definen el sombra de la caja así como el Z eje de algunos de los elementos hijos:
En este punto, tendrás algo que se parece a lo siguiente:
Estilos de estado inicial y flotante
Efecto de paralaje con jQuery
Vamos a aprovechar algo de jQuery aquí, así que asegúrate de que estás enlazando a jQuery en algún lugar desde tu documento. En CodePen, agregue https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js como una ruta de JavaScript externa.
El efecto de paralaje se aplica a través de dos eventos jQuery movimiento del ratón y mouseout. los movimiento del ratón el evento se activa cuando el cursor se mueve sobre el elemento objetivo; en este caso,.ItemCard. los mouseout se dispara cuando el cursor del ratón ya está fuera del elemento objetivo.
$ (document) .on ("mousemove", ".ItemCard", function (event) ) .on ("mouseout", ".ItemCard", function () );
Durante el movimiento del ratón evento, recuperamos las coordenadas del cursor del mouse, determinamos el ItemCard rotación, y aplique estos números agregando estilos en línea. Durante el mouseout evento, eliminamos el estilo en línea para que el ItemCard vuelve a su posición inicial.
$ (document) .on ("mousemove", ".ItemCard", function (event) / ** * La mitad del ancho de la 'ItemCard' * @type integer * / var halfW = (this.clientWidth / 2) ; / ** * La mitad de la altura de 'ItemCard' * @type integer * / var halfH = (this.clientHeight / 2); / ** * Cursor del ratón X coordenada * @type integer * / var coorX = (halfW - (event.pageX - this.offsetLeft)); / ** * Coordenada Y del cursor del mouse * @type integer * / var coorY = (halfH - (event.pageY - this.offsetTop)); / ** * X grado de rotación de 'ItemCard' * @type integer * / var degX = ((coorY / halfH) * 10) + 'deg'; // grado máximo = 10 / ** * Y grado de rotación de 'ItemCard '* @type integer * / var degY = ((coorX / halfW) * -10) +' deg '; // max. degree = 10 / ** * Agregue los estilos en línea * / $ (this) .css ('transform', function () return 'perspectiva (600px) translate3d (0, -2px, 0) escala (1.1) rotateX (' + degX + ') rotateY (' + degY + ')';) .children ('.ItemCard__summary') .css ('transform', function () return 'en perspectiva (600px) translate3d (0, 0, 0) rotateX ('+ degX +') rotateY ('+ degY +') '; ); ) .on ("mouseout", ".ItemCard", function () / ** * Eliminar los estilos en línea * / $ (this) .removeAttr ('style') .children ('.ItemCard__summary') .removeAttr ( 'estilo'););
Y eso es una envoltura.
Terminando
En este tutorial aprendimos cómo aprovechar las transformaciones 3D para crear un efecto de paralaje 3D inspirado en Apple TV.
Tenga en cuenta que este efecto no funcionará bien en dispositivos táctiles, por lo que tendrá que considerar algún tipo de repliegue, posiblemente con eventos táctiles para replicar el efecto de paralaje. Lo dejaré en la mesa para que lo aborde.!
Accentsconagua
Share
Fuentes
Estilos de estado inicial y flotante
