Nel mio precedente tutorial ti ho mostrato come usare CSS 3D Transforms per creare una griglia isometrica. E 'stato abbastanza impegnativo, dal momento che alcuni browser come Firefox hanno approcci leggermente diversi rispetto a come rendono gli elementi su un piano tridimensionale.
In questo tutorial continueremo ad esplorare 3D Transforms, creando un effetto rollover parallasse 3D, ispirato all'interfaccia di Apple TV. Continueremo a utilizzare Envato Elements come fonte di ispirazione per i nostri contenuti; ecco a cosa stiamo lavorando:
Passa il mouse sopra l'anteprima e muovi il cursore; l'anteprima si inclinerà in base alla posizione del cursore e alla direzione del movimento.
Prospettiva: un primer
Come esseri umani, la nostra visibilità è limitata all'orizzonte che svanisce e la nostra visione binoculare crea ciò che percepiamo prospettiva. La prospettiva ci aiuta a interpretare un oggetto più lontano, piuttosto che semplicemente essere più piccolo.
La griglia isometrica del tutorial precedente non tiene conto della "prospettiva". La dimensione della griglia, altezza e larghezza, viene effettivamente mantenuta. In realtà dovremmo vedere il lato più lontano della griglia che si restringe a causa della prospettiva.
In CSS, possiamo aggiungere la prospettiva alla trasformazione 3D attraverso il prospettiva() funzione. Vale la pena notare che prospettiva() deve essere aggiunto prima di altre funzioni di trasformazione come ruotare() e tradurre() perché abbia effetto Richiede anche un valore che definisca la distanza di vista relativa all'elemento; se l'elemento dovrebbe essere visto da lontano o vicino.
È così che rendiamo un piano 3D con i CSS. Ora vediamo come possiamo applicare questo per creare un effetto di parallasse. Inizieremo con l'HTML:
Il markup HTML
Se hai seguito a fondo il nostro tutorial precedente, troverai che il markup HTML è abbastanza simile. Qui abbiamo un div con una classe di ItemCard avvolgendo il nome, l'immagine e il collegamento che punta a uno degli elementi su Envato Elements.
Caratteri
Herbert Lemuel
August10
Aggiungi il markup HTML sopra riportato dall'alto al basso.
Il CSS
Iniziamo aggiungendo alcuni stili di reset che, in questo caso, impostiamo il dimensionamento del riquadro dell'elemento border-box, Rimuovi il figura margine dell'elemento e rendere l'immagine fluida.
html box-sizing: border-box; *, *: before, *: after box-sizing: inherit; figura margine: 0; img larghezza massima: 100%; altezza: auto;
Fatto ciò, aggiungiamo alcuni stili al ItemCard. Oltre le regole estetiche come border-radius e box-ombra, definiamo la transizione e la trasformazione dell'elemento includendo il prospettiva() funzione.
Per maggiori informazioni su cosa cubi-Bezier () sta facendo qui, controlla il corso di Guy Routledge:
Facilità di accesso alle funzioni cubiche di Bezier nel nostro corso Coffee Break
Un modo per respirare un po 'più di vita e un po' più di personalità nell'animazione sul web è sperimentare diverse impostazioni di easing. In questo caffè ...
Stili Meta
Successivamente, aggiungiamo gli stili il ItemCard elementi figlio; il nome dell'oggetto, il nome dell'autore dell'articolo e la categoria dell'articolo. Allo stesso modo, gli stili definiscono la visibilità, la posizione, il dimensionamento, le transizioni e le trasformazioni di questi elementi.
A questo punto, avrai qualcosa che assomiglia al seguente:
Stili dello stato iniziale e al passaggio del mouse
Effetto Parallax con jQuery
Stiamo andando a sfruttare alcuni jQuery qui, quindi assicurati di collegarti a jQuery da qualche parte all'interno del tuo documento. In CodePen aggiungi https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js come percorso JavaScript esterno.
L'effetto di parallasse viene applicato attraverso due eventi jQuery MouseMove e mouseout. Il MouseMove l'evento si attiva quando il cursore si sposta sull'elemento target; in questo caso,.ItemCard. Il mouseout si attiva quando il cursore del mouse si trova già all'esterno dell'elemento di destinazione.
$ (document) .on ("mousemove", ".ItemCard", function (event) ) .on ("mouseout", ".ItemCard", function () );
Durante MouseMove evento, recuperiamo le coordinate del cursore del mouse, determiniamo il ItemCard rotazione e applica questi numeri aggiungendo stili incorporati. Durante mouseout evento, eliminiamo lo stile inline in modo che il ItemCard ritorna alla sua posizione iniziale.
$ (document) .on ("mousemove", ".ItemCard", function (event) / ** * Metà della larghezza "ItemCard" * @type intero * / var halfW = (this.clientWidth / 2) ; / ** * Metà dell'altezza 'ItemCard' * @ tipo intero * / var metàH = (this.clientHeight / 2); / ** * Cursore del mouse X coordinata * @ tipo intero * / var coorX = (halfW - (event.pageX - this.offsetLeft)); / ** * Cursore del mouse Y coordinate * @type intero * / var coorY = (halfH - (event.pageY - this.offsetTop)); / ** * X grado di rotazione di 'ItemCard' * @ tipo intero * / var degX = ((coorY / halfH) * 10) + 'deg'; // max. Grado = 10 / ** * Y grado di rotazione di 'ItemCard '* @type integer * / var degY = ((coorX / halfW) * -10) +' deg '; // max. degree = 10 / ** * Aggiungi gli stili in linea * / $ (this) .css ('transform', function () return 'perspective (600px) translate3d (0, -2px, 0) scale (1.1) rotateX (' + degX + ') rotateY (' + degY + ')';) .children ('.ItemCard__summary') .css ('transform', function () return 'perspective (600px) translate3d (0, 0, 0) rotateX ('+ degX +') rotateY ('+ degY +') '; ); ) .on ("mouseout", ".ItemCard", function () / ** * Rimuovi gli stili in linea * / $ (this) .removeAttr ('style') .children ('.ItemCard__summary') .removeAttr ( 'stile' ); );
E questo è un involucro.
Avvolgendo
In questo tutorial abbiamo imparato come sfruttare le trasformazioni 3D per creare un effetto di parallasse 3D ispirato ad Apple TV.
Tieni presente che questo effetto non funziona bene su dispositivi abilitati al tocco, quindi dovrai considerare una sorta di fallback, possibilmente con Touch Events per replicare l'effetto di parallasse: lo lascerò sul tavolo per affrontarlo!
Accentsconagua
Share
Caratteri
Stili dello stato iniziale e al passaggio del mouse
