Het parallax Thumbnail Rollover-effect van Apple TV herscheppen

In mijn vorige zelfstudie heb ik je laten zien hoe je CSS 3D Transforms kunt gebruiken om een isometrische rasterlay-out te maken. Het was een hele uitdaging, omdat een paar browsers zoals Firefox enigszins verschillende benaderingen hebben met betrekking tot hoe ze elementen op een driedimensionaal vlak weergeven.

In deze tutorial zullen we 3D Transforms blijven verkennen, door een 3D parallax rollover-effect te ontwikkelen, geïnspireerd door de interface van Apple TV. We zullen Envato Elements nog steeds gebruiken als inspiratie voor onze inhoud; Dit is waar we naartoe werken:

Plaats de muisaanwijzer op de miniatuur en beweeg uw cursor rond; de miniatuur zal leunen afhankelijk van de cursorpositie en de bewegingsrichting.

Perspectief: een primer

Als mens is onze zichtbaarheid beperkt tot de verdwijnende horizon, en onze verrekijkervisie creëert wat we waarnemen perspectief. Perspectief helpt ons om een voorwerp te interpreteren als verder weg, in plaats van simpelweg kleiner te zijn.

Het isometrische raster van de vorige zelfstudie houdt geen rekening met "perspectief". De rastergrootte - hoogte en breedte - wordt eigenlijk behouden. In werkelijkheid zouden we de verste kant van het raster moeten zien slinken vanwege perspectief.

In CSS kunnen we perspectief toevoegen aan 3D-transformatie via de perspectief() functie. Het is vermeldenswaard dat perspectief() moet worden toegevoegd voordat andere transformatiefuncties zoals draaien() en vertalen() om het effect te krijgen. Het vereist ook een waarde die de kijkafstand ten opzichte van het element definieert; of het element van veraf of dichtbij moet worden bekeken.

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

Dat is hoe we een 3D-vlak renderen met CSS. Laten we nu kijken hoe we dit kunnen toepassen om een te maken parallax effect. We beginnen met de HTML:

De HTML-markering

Als je onze vorige tutorial goed hebt gevolgd, zul je merken dat de HTML-markup behoorlijk op elkaar lijkt. Hier hebben we een div met een klasse van ItemCard het omwikkelen van de naam, de afbeelding en de koppeling naar een van de items op Envato Elements.

    
 
  fonts Herbert Lemuel
 August10

Voeg de bovenstaande HTML-markup van boven naar beneden toe.

De CSS

We beginnen met het toevoegen van een aantal resetstijlen, waarmee in dit geval de boxgrootte van het element wordt ingesteld border-box, Verwijder de figuur elementmarge en maak het beeld vloeiend.

html box-sizing: border-box;  *, *: before, *: after box-sizing: inherit;  figuur marge: 0;  img max-width: 100%; hoogte: auto;

Met dat gedaan, voegen we een aantal stijlen toe aan de ItemCard. Voorbij de esthetische regels zoals border-radius en box-shadow, we definiëren de elementovergang en -transformatie inclusief de perspectief() functie.

.ItemCard positie: relatief; weergave: flex; overloop verborgen; flex-richting: kolom; cursor: wijzer; border-radius: 6px; vakschaduw: 0 2px 10px rgba (0,0,0, .3); uitlijnen-items: center; maximale breedte: 510 px; hoogte: auto; overgang: transform .5s cubic-bezier (.215, .61, .355, 1), box-shadow .5s cubic-bezier (.215, .61, .355, 1); transformatie: perspectief (600px) translate3d (0, 0, 0);

Voor meer informatie over wat kubieke Bezier () doet hier, bekijk de cursus van Guy Routledge:

Gemak in Cubic Bezier-functies in onze koffiepauze
Eén manier om wat meer leven en een beetje meer persoonlijkheid in te blazen in animatie op het web, is door te experimenteren met verschillende versmellingsinstellingen. In deze koffie ...

Andrew Blackman
16 maart 2016 animatie

Meta Styles

Vervolgens voegen we stijlen toe aan de ItemCard kind elementen; de itemnaam, de naam van de itemauteur en de itemcategorie. Op dezelfde manier definiëren de stijlen de zichtbaarheid, positie, dimensionering, overgangen en transformaties van deze elementen.

.ItemCard .cover positie: absoluut; boven: 0; links: 0; breedte: 100%; hoogte: 100%;  .ItemCard__dest z-index: 30; weergave: blok;  .ItemCard__thumb position: relative; z-index: 3; opvulling: 0; overgang: transformeer .2s;  .ItemCard__thumb img weergave: blok; overgang: doosschaduw 0.2s;  .ItemCard__layer z-index: 10; overgang: opacity 1s cubic-bezier (0.215, 0.61, 0.355, 1); dekking: 0; achtergrond: lineair verloop (120 graden, # 9d50bb 0%, # 4096ee 100%);  .ItemCard__summary z-index: 20; opvulling: 25px; weergave: flex; flex-richting: kolom; transformatie: perspectief (600px) translate3d (0, 100%, 0); text-align: center; kleur: #fff; justify-content: center;  .ItemCard__title margin: 8px 0; font-gewicht: 900; transformatie: translate3d (0, 150px, 50px); text-transform: hoofdletters; kleur: #fff; lettertypegrootte: 19px; regelhoogte: 1,48;

3D-weergave

Voeg de volgende stijlen toe om de onderliggende elementen van de te maken ItemCard en de .ItemCard__summary compatibel met driedimensionale weergave.

/ ** * Bewaar 3D-elementen voor de afstammelingen * / .ItemCard, .ItemCard__summary transform-style: preserve-3d; backface-visibility: verborgen;

zweven

De ItemCard hover-statusstijlen definiëren de box-shadow zo goed de Z as van sommige van de onderliggende elementen:

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

Op dit punt heb je iets dat lijkt op het volgende:

Initial en hover state-stijlen

Parallax-effect met jQuery

We gaan hier wat jQuery gebruiken, dus zorg ervoor dat je ergens vanuit je document naar jQuery linkt. Voeg in CodePen https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js toe als een extern JavaScript-pad.

Het parallax-effect wordt toegepast via twee jQuery-gebeurtenissen mousemove en mouseout. De mousemove gebeurtenis wordt geactiveerd wanneer de cursor over het doelelement beweegt; in dit geval,.ItemCard. De mouseout flitst wanneer de muiscursor zich al buiten het doelelement bevindt.

$ (document) .on ("mousemove", ".ItemCard", functie (event) ) .on ("mouseout", ".ItemCard", function () );

Tijdens de mousemove gebeurtenis, we halen de coördinaten van de muiscursor op, bepalen de ItemCard roteren en pas deze nummers toe door inline stijlen toe te voegen. Tijdens de mouseout evenement, we verwijderen de inline-stijl zodat de ItemCard keert terug naar zijn oorspronkelijke positie.

$ (document) .on ("mousemove", ".ItemCard", functie (event) / ** * De helft van de 'ItemCard'-breedte * @type integer * / var halfW = (this.clientWidth / 2) ; / ** * De helft van de 'ItemCard'-lengte * @type geheel getal * / var halfH = (this.clientHeight / 2); / ** * Muiscursor X-coördinaat * @type integer * / var coorX = (halfW - (event.pageX - this.offsetLeft)); / ** * Muiscursor Y-coördinaat * @type geheel getal * / var coorY = (halfH - (event.pageY - this.offsetTop)); / ** * X Rotatiegraad van 'ItemCard' * @type integer * / var degX = ((coorY / halfH) * 10) + 'deg'; // max. Graad = 10 / ** * Y Rotatiegraad van 'ItemCard '* @type integer * / var degY = ((coorX / halfW) * -10) +' deg '; // max. graad = 10 / ** * Voeg de inline-stijlen * / $ (this) .css toe ('transform', function () return 'perspectief (600px) translate3d (0, -2px, 0) schaal (1.1) rotateX (' + degX + ') rotateY (' + degY + ')';). kinderen ('.ItemCard__summary') .css ('transform', function () return 'perspectief (600px) translate3d (0, 0, 0) rotateX ('+ degX +') rotateY ('+ degY +') '; ); ) .on ("mouseout", ".ItemCard", function () / ** * Verwijder de inline stijlen * / $ (this) .removeAttr ('style') .children ('.ItemCard__summary') .removeAttr ( 'stijl' );  );

Klaar is kees.

Afsluiten

In deze zelfstudie hebben we geleerd hoe we 3D-transformaties kunnen gebruiken om een 3D parallaxeffect te maken dat is geïnspireerd op Apple TV.

Houd in gedachten dat dit effect niet goed werkt op apparaten met aanraakbediening, dus je moet een soort terugval overwegen, mogelijk met Touch Events om het parallax-effect te reproduceren - ik laat dat op tafel liggen om aan te pakken!