Hvordan gjenopprette Apple TVs Parallax Thumbnail Rollover Effect

I min forrige veiledning viste jeg deg hvordan du bruker CSS 3D Transforms til å lage et isometrisk nettoppsett. Det var ganske utfordrende, siden noen nettlesere som Firefox har litt forskjellige tilnærminger i forhold til hvordan de gjør elementer på et tredimensjonalt plan.

I denne opplæringen fortsetter vi å utforske 3D Transforms, ved å bygge en 3D-parallax-overgangseffekt, inspirert av Apple TVs grensesnitt. Vi vil fortsatt bruke Envato Elements som inspirasjon for innholdet vårt; her er det vi jobber med:

Hold musepekeren over miniatyrbildet og flytt markøren rundt; miniatyrbildet vil lene seg i henhold til markørposisjonen og bevegelsesretningen.

Perspektiv: en primer

Som menneske er vår synlighet begrenset opp til forsvinner horisonten, og vår kikkert synker opp det vi oppfatter som perspektiv. Perspektiv hjelper oss å tolke et objekt for å være lenger unna, enn å bare være mindre.

Det isometriske nettverket fra forrige veiledning tar ikke hensyn til "perspektiv". Rutenettens størrelse og høyde er faktisk beholdt. I virkeligheten bør vi se at den lengste siden av rutenettet krympes på grunn av perspektivet.

I CSS kan vi legge til perspektiv på 3D-transformasjon gjennom perspektiv() funksjon. Det er verdt å merke seg perspektiv() må legges til før andre transformasjonsfunksjoner som rotere() og oversette() for at den skal tre i kraft. Det krever også en verdi som definerer visningsavstanden i forhold til elementet; om elementet skal sees fjernt eller nært.

#perspective transform: perspective (600px) rotateX (60deg) rotateY (0deg) rotateZ (-45deg);

Slik gjør vi et 3D-plan med CSS. La oss nå se hvordan vi kan bruke dette til å lage en parallax effekt. Vi starter med HTML:

HTML-merkingen

Hvis du fulgte vår tidligere opplæring grundig, vil du finne HTML-oppslaget til å være ganske like. Her har vi en div med en klasse av ItemCard pakker inn navnet, bildet og lenken som peker på et av elementene på Envato Elements.

    
 
  fonter Herbert Lemuel
 August10

Legg til HTML-oppsettet ovenfor fra øverst til nederst.

CSS

Vi begynner med å legge til noen tilbakestillingsstiler som i dette tilfellet setter elementets boksstørrelse til border-box, fjern figur elementmargin, og lag bildevæsken.

html boks størrelse: border-box;  *, *: før, *: etter boks-størrelse: arve;  figur margin: 0;  img maksimal bredde: 100%; høyde: auto;

Med det gjort, legger vi til noen stiler til ItemCard. Utover de estetiske reglene som border-radius og box-shadow, Vi definerer elementovergangen og transformasjonen, inkludert perspektiv() funksjon.

.Varekart posisjon: relativ; display: flex; flow: hidden; flex-retning: kolonne; Markøren: pekeren; border-radius: 6 piksler; boks-skygge: 0 2px 10px rgba (0,0,0, .3); juster-poster: center; maksimal bredde: 510px; høyde: auto; overgang: transformer .5s kubisk-bezier (.215, .61, .355, 1), boks-skygge .5s kubisk-bezier (.215, .61, .355, 1); transformere: perspektiv (600px) translate3d (0, 0, 0);

For mer informasjon om hva kubikk-Bezier-() gjør her, sjekk ut Guy Routledge's kurs:

Nyt inn i Cubic Bezier Funksjoner i vår Coffee Break Course
En måte å puste litt mer liv og litt mer personlighet på i animasjon på nettet, er å eksperimentere med ulike innstillinger for lettelse. I denne kaffen ...

Andrew Blackman
16. mars 2016 animasjon

Meta Styles

Deretter legger vi til stilene ItemCard barnelementer; varenavnet, varen forfatterens navn og varen kategorien. På samme måte definerer stilene disse elementene siktbarhet, posisjon, dimensjonering, overganger og transformasjoner.

.ItemCard .cover posisjon: absolute; topp: 0; venstre: 0; bredde: 100%; høyde: 100%;  .ItemCard__dest z-indeks: 30; skjerm: blokk;  .ItemCard__thumb posisjon: relative; z-indeks: 3; polstring: 0; overgang: transformer .2s;  .ItemCard__thumb img display: block; Overgang: Box-Shadow 0.2s;  .ItemCard__layer z-indeks: 10; overgang: opacity 1s kubisk bezier (0,215, 0,61, 0,355, 1); opasitet: 0; bakgrunn: lineær gradient (120deg, # 9d50bb 0%, # 4096ee 100%);  .ItemCard__summary z-indeks: 20; polstring: 25px; display: flex; flex-retning: kolonne; transformere: perspektiv (600px) translate3d (0, 100%, 0); tekst-align: center; farge: #fff; begrunn-innhold: center;  .ItemCard__title margin: 8px 0; font-vekt: 900; transformere: translate3d (0, 150px, 50px); tekst-transformer: store bokstaver; farge: #fff; skriftstørrelse: 19px; linjehøyde: 1,48;

3D-rendering

Legg til følgende stiler for å gjøre barnets elementer av ItemCard og .ItemCard__summary kompatibel med tredimensjonal gjengivelse.

/ ** * Bevare 3D-elementer for etterkommerne * / .ItemCard, .ItemCard__summary transform-style: preserve-3d; backface-synlighet: skjult;

Sveve

De ItemCard svingstilstandsstiler definerer box-shadow så vel som Z aksen til noen av barnets elementer:

/ ** * Hover States * / .ItemCard: hover box-shadow: 0 15px 30px rgba (0, 0, 0, 0.3);  .ItemCard: svever .ItemCard__layer opacity: .9;  .ItemCard: svever .ItemCard__title transform: translate3d (0, 0, 50px);  .ItemCard: svever .ItemCard__meta.category transform: translate3d (0, 0, 40px);  .ItemCard: svever .ItemCard__meta.designer overgangsforsinkelse: .05s; transformere: translate3d (0, 0, 20px);

På dette tidspunktet har du noe som ligner på følgende:

Initial og hover state stiler

Parallax-effekt med jQuery

Vi kommer til å utnytte noe jQuery her, så sørg for at du kobler til jQuery et sted fra dokumentet ditt. I CodePen legger du til https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js som en ekstern JavaScript-sti.

Parallax-effekten blir brukt gjennom to jQuery-hendelser mousemove og mouseout. De mousemove hendelsen bryr seg opp når markøren beveger seg over målelementet; i dette tilfellet,.ItemCard. De mouseout brenner når musemarkøren allerede er utenfor målelementet.

$ (dokument) .on ("mousemove", ".ItemCard", funksjon (hendelse) ) .on ("mouseout", ".ItemCard", funksjon () );

Under mousemove hendelse, henter vi markørkoordinatene, bestemmer ItemCard rotasjon, og bruk disse tallene ved å legge til inline stiler. Under mouseout Hendelse, vi striper ut inline stilen slik at ItemCard går tilbake til sin opprinnelige posisjon.

$ (dokument) .on ("mousemove", ".ItemCard", funksjon (hendelse) / ** * Halvparten av 'ItemCard' bredden * @type integer * / var halfW = (this.clientWidth / 2) ; / ** * Halvparten av "ItemCard" høyde * @type integer * / var halvH = (this.clientHeight / 2); / ** * Musemarkør X koordinat * @type integer * / var coorX = (halfW - (event.pageX - this.offsetLeft)); / ** * Musemarkør Y koordinat * @type integer * / var coorY = (halvH - (event.pageY - this.offsetTop)); / ** * X Rotasjonsgrad av 'ItemCard' * @type integer * / var degX = ((coorY / halfH) * 10) + 'deg'; // maks. Grad = 10 / ** * Y Rotasjonsgrad av 'ItemCard '* @type integer * / var degY = ((coorX / halfW) * -10) +' deg '; // maks. grad = 10 / ** * Legg til inline-stilene * / $ (dette) .css rotateX ('+ degX +') rotateY ('+ degY +') ';) .children (' + degX + ') ('.ItemCard__summary') .css ('transform', funksjon () (retur) perspektiv (600px) translate3d (0, 0, 0) rotateX ('+ degX +') rotateY ('+ degY +') '; ); ) .on ("mouseout", ".ItemCard", funksjon () / ** * Fjern inline-stilene * / $ (dette) .removeAttr ('style') .children ('.ItemCard__summary') .removeAttr 'stil' );  );

Og det er en vikle.

Wrapping Up

I denne opplæringen lærte vi hvordan vi kunne utnytte 3D-transformasjoner for å bygge en 3D-parallax-effekt inspirert av Apple TV.

Husk, denne effekten vil ikke fungere bra på berøringsaktiverte enheter, så du må vurdere noen form for fallback, muligens med Touch Events for å replikere parallax-effekten. Jeg vil la det på bordet for deg å takle!