Hur man återskapar Apple TVs Parallax Thumbnail Rollover Effect

I min tidigare handledning visade jag dig hur du använder CSS 3D Transforms för att skapa en isometrisk rutnätlayout. Det var ganska utmanande, eftersom några webbläsare som Firefox har lite olika metoder när det gäller hur de gör element på ett tredimensionellt plan.

I den här handledningen fortsätter vi att utforska 3D Transforms genom att bygga en 3D-parallax-rollover-effekt, inspirerad av Apple TVs gränssnitt. Vi använder fortfarande Envato Elements som inspiration för vårt innehåll. här är vad vi arbetar mot:

Håll muspekaren över miniatyren och flytta markören runt; miniatyrbilden lutar sig enligt markörens position och rörelseriktningen.

Perspektiv: en primer

Som människa är vår synlighet begränsad till den försvinnande horisonten, och vår binokulära vision skapar vad vi uppfattar som perspektiv. Perspektiv hjälper oss att tolka ett objekt för att vara längre bort, snarare än att bara vara mindre.

Det isometriska nätet från den tidigare handledningen tar inte hänsyn till "perspektiv". Gridstorlekens höjd och bredd - sparas faktiskt. I verkligheten bör vi se att den längsta sidan av gallret krymper på grund av perspektiv.

I CSS kan vi lägga till perspektiv på 3D-transformation genom perspektiv() fungera. Det är värt att notera perspektiv() måste läggas till före andra transformationsfunktioner som rotera() och Översätt() för att den ska träda i kraft. Det kräver också ett värde som definierar visningsavståndet relativt elementet; om elementet ska ses från eller nära.

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

Så gör vi ett 3D-plan med CSS. Låt oss nu se hur vi kan tillämpa detta för att skapa en parallax effekt. Vi börjar med HTML:

HTML Markup

Om du följde vår tidigare handledning grundligt, hittar du HTML-uppställningen för att vara ganska likadan. Här har vi en div med en klass av ItemCard Innehåller namn, bild och länk som pekar på ett av objekten på Envato Elements.

    
 
  typsnitt Herbert Lemuel
 August10

Lägg till ovanstående HTML-markup från topp till botten.

CSS

Vi börjar med att lägga till några återställningsstilar, som i så fall sätter in elementets rutans storlek border-box, ta bort figur elementmarginal och gör bildvätskan.

html box-size: border-box;  *, *: före, *: efter box-size: arv;  siffra marginal: 0;  img maxbredd: 100%; höjd: auto;

Med det gjort lägger vi till några stilar till ItemCard. Utöver de estetiska reglerna som border-radius och box-shadow, Vi definierar elementövergången och transformationen inklusive perspektiv() fungera.

.ItemCard position: relative; display: flex; overflow: hidden; flex-riktning: kolonn; markören: pointer; border-radius: 6px; boxskugga: 0 2px 10px rgba (0,0,0, .3); rikta in-poster: center; max bredd: 510px; höjd: auto; övergång: transformera .5s kubisk-bezier (.215, .61, .355, 1), box-shadow .5s cubic-bezier (.215, .61, .355, 1); transformera: perspektiv (600px) translate3d (0, 0, 0);

För mer information om vad kubisk-bezier () gör här, kolla Guy Routledge kurs:

Lätt in i Cubic Bezier-funktioner i vår Coffee Break-kurs
Ett sätt att andas lite mer liv och lite mer personlighet i animering på webben är att experimentera med olika inställningar av lättnad. I denna kaffe

Andrew Blackman
16 mars 2016 Animering

Meta Styles

Därefter lägger vi till stilar i ItemCard barnelement varunamnet, föremålet för författarens namn och artikelkategorin. På samma sätt definierar stilarna dessa elementers synlighet, position, dimensionering, övergångar och omvandlingar.

.ItemCard .cover position: absolute; topp: 0; vänster: 0; bredd: 100%; höjd: 100%;  .ItemCard__dest z-index: 30; display: block;  .ItemCard__thumb position: relative; z-index: 3; vaddering: 0; övergång: transformera .2s;  .ItemCard__thumb img display: block; övergång: box-skugga 0.2s;  .ItemCard__layer z-index: 10; övergång: opacitet 1s kubisk-bezier (0,215, 0,61, 0,355, 1); opacitet: 0; bakgrund: linjär gradient (120deg, # 9d50bb 0%, # 4096ee 100%);  .ItemCard__summary z-index: 20; vaddering: 25px; display: flex; flex-riktning: kolumn; transformera: perspektiv (600px) translate3d (0, 100%, 0); text-align: center; färg: #fff; rättfärdiga innehåll: center;  .ItemCard__title margin: 8px 0; font-vikt: 900; transformera: translate3d (0, 150px, 50px); text-transform: stor bokstav; färg: #fff; fontstorlek: 19px; linjehöjd: 1,48;

3D-rendering

Lägg till följande stilar för att göra barnets element i ItemCard och den .ItemCard__summary kompatibel med tredimensionell återgivning.

/ ** * Bevara 3D-element för efterkommande * / .ItemCard, .ItemCard__summary transform-style: preserve-3d; backface-visibility: hidden;

Sväva

De ItemCard svävarstatstilar definierar box-shadow liksom Z axel av några av barnelementen:

/ ** * Byta stater * / .ItemCard: sväva box-shadow: 0 15px 30px rgba (0, 0, 0, 0.3);  .ItemCard: sväva .ItemCard__layer opacity: .9;  .ItemCard: sväva .ItemCard__title transform: translate3d (0, 0, 50px);  .ItemCard: sväva .ItemCard__meta.category transform: translate3d (0, 0, 40px);  .ItemCard: svep .ItemCard__meta.designer övergångsfördröjning: .05s; transformera: translate3d (0, 0, 20px);

Vid denna tidpunkt har du något som liknar följande:

Initiala och svävarstillståndsstilar

Parallax Effekt med jQuery

Vi kommer att använda vissa jQuery här, så se till att du länkar till jQuery någonstans inom ditt dokument. I CodePen lägg till https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js som en extern JavaScript-sökväg.

Parallax-effekten appliceras genom två jQuery Events mouse och mouseOut. De mouse händelse brinner upp när markören flyttar över målelementet; I detta fall,.ItemCard. De mouseOut bränder när muspekaren är redan utanför målelementet.

$ (dokument) .on ("mousemove", ".ItemCard", funktion (händelse) ) .on ("mouseout", ".ItemCard", funktion () );

Under mouse händelse hämtar vi muskoordinaterna, bestämmer ItemCard rotation och tillämpa dessa nummer genom att lägga till inline-stilar. Under mouseOut händelse, vi tar bort inline-stilen så att ItemCard återgår till sin ursprungliga position.

$ (dokument) .on ("mousemove", ".ItemCard", funktion (händelse) / ** * Hälften av "ItemCard" bredden * @type integer * / var halfW = (this.clientWidth / 2) ; / ** * Hälften av "ItemCard" höjd * @type heltal * / var halfH = (this.clientHeight / 2); / ** * Muspekare X koordinat * @type heltal * / var coorX = (halfW - (event.pageX - this.offsetLeft)); / ** * Muspekare Y koordinat * @type heltal * / var coorY = (halfH - (event.pageY - this.offsetTop)); / ** * X Rotationsgrad av "ItemCard" * @type heltal * / var degX = ((coorY / halfH) * 10) + 'deg'; // maxgrad = 10 / ** * Y Rotationsgrad av 'ItemCard * * @type heltal * / var degY = ((coorX / halfW) * -10) + 'deg'; // maxgrad = 10 / ** * Lägg till inline-stilar * / $ (detta) .css roteraX ('+ degX +') roteraY ('+ degY +') ';) .children (' transformera ', funktion () ('.ItemCard__summary') .css ('transform', funktion () (retur) perspektiv (600px) translate3d (0, 0, 0) rotateX ('+ degX +') roteraY ('+ degY +') '; ); ) .on ("mouseout", ".ItemCard", funktion () / ** * Ta bort inline-stilar * / $ (detta) .removeAttr ('style') .children ('.ItemCard__summary') .removeAttr 'stil'););

Och det är en omslag.

Avslutar

I denna handledning lärde vi oss hur vi kan utnyttja 3D-omvandlingar för att bygga en 3D-parallax-effekt inspirerad av Apple TV.

Tänk på att den här effekten inte fungerar bra på enheter med beröring, så du måste överväga någon form av fallback, eventuellt med Touch Events för att replikera parallaxeffekten. Jag kommer att lämna det på bordet för att du ska kunna hantera!