Efecto de tvOS estilo Parallax Hover de Apple con vainilla JavaScript-perspectiva Hover

Vista prévia

Descripción

Perspectiva Hover es un plugin de JavaScript vainilla que utiliza la biblioteca Velocity. js para crear un efecto de desplazamiento interactivo en elementos de la tarjeta como el cartel de Apple TV.

Funcionamiento

Incluya la biblioteca de JavaScript Velocity. js necesaria y el complemento perspectiva hover en la Página Web.

<script src="js/velocity.min.js"></script>
<script src="js/script.js"></script>

Compile la estructura HTML.

<div class="js-perspective">


<div class="perspective-card-wrap">


<div class="js-perspective-card perspective-card">



<div class="perspective-card__content">




<span>Hover Me</span>



</div>


</div>

</div>

</div>

Las reglas CSS/CSS3 requeridas.

.perspective { /* perspective: 800px; */

/* perspective-origin: top center; */
}

.perspective-card-wrap {

perspective: 1000px;

perspective-origin: top center;

display: inline-block;
}

.perspective-card__content {

position: absolute;

top: 2rem;

left: 0;

width: 100%;

transform: translateZ(40px);

text-align: center;
}

.perspective-card {

width: 200px;

height: 300px;

margin: 50px;

color: white;

padding: 1rem;

text-transform: uppercase;

font-family: 'open sans';

background-image: url(https://images.unsplash.com/photo-1441906363162-903afd0d3d52?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=5b57e367fd1e525f687202b75468c678);

text-align: center;

background-color: white;

box-shadow: 0px 3px 20px rgba(0,0,0,0.15);

/* necessary for effect */

position: relative;

transform-style: preserve-3d;

will-change: transform;
}