Comment recréer l'effet de survol de vignettes Parallax d'Apple TV

Dans mon précédent tutoriel, je vous ai montré comment utiliser CSS 3D Transforms pour créer une présentation de grille isométrique. C'était assez difficile, car quelques navigateurs tels que Firefox ont des approches légèrement différentes en ce qui concerne la manière dont ils rendent les éléments sur un plan tridimensionnel..

Dans ce didacticiel, nous allons continuer à explorer les transformations 3D en créant un effet de survol de la parallaxe 3D inspiré de l'interface Apple TV. Nous continuerons d’utiliser Envato Elements comme source d’inspiration pour notre contenu; voici ce sur quoi nous travaillons:

Survolez la vignette et déplacez votre curseur. la vignette se penche en fonction de la position du curseur et de la direction du mouvement.

Perspective: une introduction

En tant qu’êtres humains, notre visibilité est limitée à l’horizon de disparition et notre vision binoculaire crée ce que nous percevons comme la perspective. La perspective nous aide à interpréter un objet comme étant plus éloigné que d'être simplement plus petit..

La grille isométrique du didacticiel précédent ne prend pas en compte la «perspective». La grille taille-hauteur et largeur est effectivement conservée. En réalité, nous devrions voir le côté le plus éloigné de la grille se contracter en raison de la perspective.

En CSS, nous pouvons ajouter une perspective à la transformation 3D via le la perspective() une fonction. Il est à noter que la perspective() doit être ajouté avant d’autres fonctions de transformation telles que tourner() et Traduire() pour que cela prenne effet. Cela nécessite également une valeur définissant la distance de vue par rapport à l'élément; si l'élément doit être vu de loin ou de près.

#perspective transformation: perspective (600px) rotationX (60deg) rotationY (0deg) rotationZ (-45deg);

C'est ainsi que nous rendons un plan 3D avec CSS. Voyons maintenant comment nous pouvons appliquer cela pour créer un effet de parallaxe. Nous allons commencer par le HTML:

Le balisage HTML

Si vous avez suivi notre didacticiel précédent à fond, vous constaterez que le balisage HTML est assez similaire. Ici nous avons un div avec une classe de ItemCard encapsuler le nom, l'image et le lien pointant vers l'un des éléments sur Envato Elements.

    
 
  Les polices Herbert Lemuel
 10 août

Ajoutez le balisage HTML ci-dessus de haut en bas.

Le CSS

Nous commençons par ajouter quelques styles de réinitialisation qui, dans ce cas, définissent la taille de la boîte de l'élément sur boîte à bordure, retirer le figure élément marge, et rendre l'image fluide.

html box-sizing: border-box;  *, *: before, *: after box-sizing: inherit;  figure margin: 0;  img max-width: 100%; hauteur: auto;

Ceci fait, nous ajoutons quelques styles à la ItemCard. Au-delà des règles esthétiques telles que rayon de la frontière et boîte ombre, nous définissons la transition et la transformation des éléments, y compris la la perspective() une fonction.

.ItemCard position: relative; affichage: flex; débordement caché; direction de flexion: colonne; curseur: pointeur; border-radius: 6px; box-shadow: 0 2px 10px rgba (0,0,0, .3); align-items: centre; largeur maximale: 510px; hauteur: auto; transition: transformer .5s cube de Bézier (.215, 0.61, .355, 1), Box-Shadow .5s cube de Bézier (.215, 0.61, .355, 1); transformer: perspective (600px) translate3d (0, 0, 0);

Pour plus d'informations sur quoi cubic-bezier () fait ici, consultez le cours de Guy Routledge:

Facilité pour les fonctions de Bézier cubique dans notre cours de pause-café
Une façon de donner un peu plus de vie et un peu plus de personnalité à l'animation sur le Web consiste à expérimenter différents paramètres d'accélération. Dans ce café…

Andrew Blackman
16 mars 2016 Animation

Méta Styles

Ensuite, nous ajoutons les styles les ItemCard éléments enfants; le nom de l'élément, le nom de l'auteur de l'élément et le type d'élément. De même, les styles définissent la visibilité, la position, la taille, les transitions et les transformations de ces éléments..

.ItemCard .cover position: absolute; en haut: 0; gauche: 0; largeur: 100%; hauteur: 100%;  .ItemCard__dest z-index: 30; bloc de visualisation;  .ItemCard__thumb position: relative; z-index: 3; rembourrage: 0; transition: transformer .2s;  .ItemCard__thumb img display: block; transition: boîte-shadow 0.2s;  .ItemCard__layer z-index: 10; transition: opacité 1s-bezier-cubes (0,215, 0,61, 0,355, 1); opacité: 0; arrière-plan: gradient linéaire (120 ° C, # 9d50bb 0%, # 4096ee 100%);  .ItemCard__summary z-index: 20; rembourrage: 25px; affichage: flex; direction de flexion: colonne; transformer: perspective (600px) translate3d (0, 100%, 0); text-align: center; couleur: #fff; justifier-contenu: centre;  .ItemCard__title margin: 8px 0; poids de police: 900; transformer: translate3d (0, 150px, 50px); text-transform: majuscule; couleur: #fff; taille de police: 19px; hauteur de ligne: 1,48;

Rendu 3D

Ajoutez les styles suivants pour que les éléments enfants du ItemCard et le .ItemCard__summary compatible avec le rendu en trois dimensions.

/ ** * Conserve les éléments 3D pour les descendants * / .ItemCard, .ItemCard__summary transform-style: preserve-3d; visibilité face arrière: masquée;

Flotter

le ItemCard les styles d'état de survol définissent la boîte ombre ainsi que le Z axe de certains des éléments enfants:

/ ** * États survolés * / .ItemCard: survol box-shadow: 0 15px 30px rgba (0, 0, 0, 0,3);  .ItemCard: survolez .ItemCard__layer opacity: .9;  .ItemCard: survolez .ItemCard__title transformer: translate3d (0, 0, 50px);  .ItemCard: survolez .ItemCard__meta.category transformer: translate3d (0, 0, 40px);  .ItemCard: survolez .ItemCard__meta.designer transition-delay: .05s; transformer: translate3d (0, 0, 20px);

À ce stade, vous aurez quelque chose qui ressemble à ce qui suit:

Styles d'état initial et de survol

Effet de parallaxe avec jQuery

Nous allons exploiter un peu de jQuery ici, alors assurez-vous de créer un lien vers jQuery quelque part à partir de votre document. Dans CodePen, ajoutez https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js en tant que chemin JavaScript externe..

L'effet de parallaxe est appliqué via deux événements jQuery déplacer la souris et sortie de souris. le déplacer la souris L'événement se déclenche lorsque le curseur se déplace sur l'élément cible. dans ce cas,.ItemCard. le sortie de souris se déclenche lorsque le curseur de la souris est déjà en dehors de l'élément cible.

$ (document) .on ("mousemove", ".ItemCard", fonction (événement) ) .on ("mouseout", ".ItemCard", function () );

Pendant le déplacer la souris événement, nous récupérons les coordonnées du curseur de la souris, déterminons le ItemCard rotation, et appliquez ces nombres en ajoutant des styles inline. Pendant le sortie de souris événement, nous supprimons le style en ligne afin que le ItemCard retourne à sa position initiale.

$ (document) .on ("mousemove", ".ItemCard", fonction (événement) / ** * Moitié de la 'ItemCard' width * @type integer * / var halfW = (this.clientWidth / 2) ; / ** * La moitié de la 'ItemCard' height * @type integer * / var halfH = (this.clientHeight / 2); / ** * Coordonnée X du curseur de la souris * @type integer * / var coorX = (halfW - (event.pageX - this.offsetLeft));; / ** * Coordonnée Y du curseur de la souris * @type entier * / var coorY = (halfH - (event.pageY - this.offsetTop)); / ** * X Degré de rotation de 'ItemCard' * @type integer * / var degX = ((COOR / halfH) * 10) + 'deg'; // Degree max = 10 / ** * Y Degré de rotation de 'ItemCard '* @type integer * / var degY = ((coorX / halfW) * -10) +' deg '; // degré max = 10 / ** * Ajouter les styles en ligne * / $ (this) .css ('transform', function () return 'perspective (600px) translate3d (0, -2px, 0) scale (1.1) rotationX (' + degX + ') rotationY (' + degY + ')';) .children ('.ItemCard__summary') .css ('transform', perspective () return ' (600px) translate3d (0, 0, 0) rotationX ('+ degX +') rotationY ('+ degY +') '; ); ) .on ("mouseout", ".ItemCard", function () / ** * Supprimer les styles en ligne * / $ (this) .removeAttr ('style') .children ('.ItemCard__summary') .removeAttr ( 'style'););

Et c'est un wrap.

Emballer

Dans ce didacticiel, nous avons appris à tirer parti des transformations 3D pour créer un effet de parallaxe 3D inspiré de Apple TV..

Gardez à l'esprit que cet effet ne fonctionnera pas bien sur les appareils tactiles. Vous devrez donc envisager une solution de secours, éventuellement avec Touch Events pour reproduire l'effet de parallaxe. Je vais laisser cela sur la table pour que vous puissiez vous attaquer.!