De responsive tijdlijnportfoliopagina voltooien

Wat je gaat creëren

Laten we verder gaan met de vorige zelfstudie, laten we wat toevoegen aan onze build.

Pictogram laden

We gaan in op CSS3-animaties en maken een eenvoudige draaiende animatie voor ons laadpictogram. We hebben al de markup die we nodig hebben op de pagina, dus laten we direct naar de CSS gaan.

div.loading kleur: donkerder ($ grijs, 20%); positie: absoluut; breedte: 100 px; onderaan: 15px; links: 50%; margin-left: -50px; img vertical-align: middle; & .rotate -webkit-animation-naam: roteren; -ms-animation-naam: roteren; animatie-naam: roteren; -webkit-animatie-duur: 1s; animatie-duur: 1s; -webkit-animatie-iteratie-telling: oneindig; -ms-animatie-iteratie-telling: oneindig; animatie-iteratie-telling: oneindig; -webkit-animatie-timing-functie: lineair; -ms-animation-timing-functie: lineair; animatie-timing-functie: lineair; 

Plaats deze code direct na de portfolio-post blokkeren in ons Sass-bestand. Om te beginnen stellen we hier enkele stijlen voor de laaddiv zelf. We positioneren het absoluut en zorgen ervoor dat het gecentreerd is door a te gebruiken -Margevan -50px, dat is de helft van de breedte van het element. Dit is om het feit goed te maken dat CSS elementen in de linkerbovenhoek plaatst.

De volgende sectie is veel interessanter. Zoals je misschien in de HTML hebt gezien, hebben we een klasse van toegewezen draaien naar het laden  tag die we als haak gebruiken om een ​​CSS-animatie uit te voeren. De stijlen hier zijn ingesteld voor onze animatie. 

We vertellen CSS in feite wat onze animatiefunctie heet (we zullen dat in een oogwenk creëren), hoe lang de animatie moet lopen, hoe vaak deze moet worden uitgevoerd en de timing- of versmallingsfunctie die moet worden gebruikt. Voor ons project willen we een mooie soepele 360 ​​graden rotatie die nooit stopt. De bovenstaande code zal precies dat bereiken. 

Notitie: We moeten browser-voorverklarende verklaringen opnemen zodat niemand het mist - en we kunnen dit verbeteren door een Sass-mixin te gebruiken om het zware werk voor ons te doen.

Laten we een kijkje nemen in de browser.

OK, het ziet er goed uit, maar er ontbreekt één ding. Het is niet aan het animeren! Laten we dit nu oplossen met de volgende code:

@ -webkit-hoofdframes roteren 100% -webkit-transform: roteren (360 graden); transformeren: roteren (360 graden); -webkit-transform-origin: middencentrum; transformatie-oorsprong: middelpunt;  @keyframes draaien 100% -webkit-transform: roteren (360 graden); -ms-transformatie: roteren (360 graden); transformeren: roteren (360 graden); -webkit-transform-origin: middencentrum; -ms-transform-origin: middencentrum; transformatie-oorsprong: middelpunt; 

Dus hier is het draaien functie. De manier waarop dit werkt, is door belangrijke punten in de animatie in te stellen om het element te veranderen. Je zou iets kunnen laten gebeuren op 0%, 25%, 50% enzovoort. Onze animatie is heel eenvoudig, dus we hebben alleen een verklaring nodig van 100%, waarin staat dat het element 360 graden moet worden gedraaid. Dit betekent dat ons element een hele draai zal maken en terug zal eindigen waar het begon. Onze eerdere set-up zorgt ervoor dat het voor onbepaalde tijd blijft draaien. De transformatie-oorsprong property vertelt CSS waar het middelpunt voor de animatie is. We zouden het kunnen instellen om te draaien met de linkerbovenhoek als middelpunt (dat ziet er misschien interessant uit!) Maar we willen gewoon het exacte midden van ons element hier gebruiken. Bewaar dit bestand en kijk in de browser!

Het zou op het bovenstaande lijken, maar een stuk soepeler en sneller.

Dat pakt onze Timeline Portfolio-pagina op, maar er is één ding dat we hieraan kunnen toevoegen voor de doeleinden van deze tutorial.

Inhoud laden

Nu, in de echte wereld zou dit type lay-out / thema waarschijnlijk een soort van oneindige scroll-functie bevatten waarin meer items verschijnen als u de pagina afrolt, zodat u niet hoeft te klikken om door pagina's te bladeren.

We kunnen simuleren dit gedrag hier met een paar regels jQuery. Doe open app.js en begin met het toevoegen van het volgende hierboven waar we onze menu-titelklikbehandelaar hebben geschreven.

var visibleHeight = $ (document) .height () - $ (window) .height (); var items;

Allereerst moeten we twee variabelen declareren die we later kunnen gebruiken. De tweede is louter een verklaring en krijgt later een waarde toegewezen. De eerste, visibleHeight, pakt de venster hoogte en trekt dit af van het totaal document hoogte. Dit laat ons achter met de hoogte van het gebied dat momenteel zichtbaar is in de browser van de gebruiker.

storeElements (); $ (window) .on ('resize', functie (e) updateHeight ();); $ (window) .on ('scroll', functie (e) loadContent (););

Voeg vervolgens het bovenstaande fragment toe. U zult een paar functie-aanroepen zien voor functies die nog niet bestaan, wat OK is, want we zullen ze vervolgens creëren.

function storeElements () items = $ ('. portfolio-item: lt (3)'). clone (); // Strip de eerste klas uit selectie-items.removeClass ('first'); 

De storeElements functie dient als een manier om onze te vullen itemsvariabele met enkele DOM-elementen. In ons geval willen we de eerste drie pakken portfolio-items. Het gebruik van jQuery's lt () stelt ons in staat om selectief de elementen te kiezen die we willen. Zodra we de selectie hebben, zouden we dat moeten doen clone ()ze, dus we gebruiken niet de feitelijke elementen maar een kopie. De laatste stap is het verwijderen van eerste klasse als deze bestaat, omdat geen van onze nieuwe elementen de eerste in de lijst is.

functie updateHeight () visibleHeight = $ (document) .height () - $ (window) .height (); 

Plaats deze functie hierboven storeElements. Dit is waarschijnlijk de eenvoudigste functie omdat het alleen doet wat we deden klaar voor document. De reden dat ik een functie heb gebruikt om dit te doen, is het herbruikbaar te houden.

Nu komen we bij de functie die het werk doet ...

function loadContent () if ($ (window) .scrollTop ()> = visibleHeight) $ (window) .unbind ('scroll'); var loadingWrap = $ ('. loading-wrap'); loadingWrap.fadeIn (function () setTimeout (function () loadingWrap.before (items); loadingWrap.hide (function () updateHeight (); storeElements (); $ (window) .on ('scroll', functie ( ) loadContent ();););, 500);); 

OK, stap voor stap wat we hier doen:

• Controleer of de schuifpositie meer is dan (voorbij scrollen) of gelijk is aan (momenteel op) visibleHeight.
• Als dit het geval is, verwijdert u de rol event handler van de venster dus we kunnen de inhoud verwerken.
• Cache loading-wrap voor later gebruik.
• Vervagen loading-wrap in en zodra de vervaging is voltooid ...
• ... een kleine instellen Time-out om het laden van de inhoud te simuleren.
• Bevestig onze gekloond items voor de loading-wrap. Dit zal mooi aansluiten tussen het laadpictogram en de huidige portfolio-items.
• Verbergen loading-wrap en eenmaal verborgen updateHeight, storeElementsen bevestig de scroll-gebeurtenis opnieuw aan de venster met instructies om deze functie opnieuw uit te voeren.

Phew! Dat lijkt veel, dus loop er nog een keer doorheen als dat nodig is. Een ding dat je misschien opvalt, als je een blik in de ogen hebt, is dat we vervagen in de loading-wrap wat eigenlijk al zichtbaar is in onze HTML. Los dit op door een inline stijl toe te voegen aan dat element ...

Dus als we nu onze bestanden opslaan en ons werk in de browser bekijken, zou u meer inhoud moeten zien "laden" zodra u naar de onderkant van de pagina scrolt. Oh wacht, er is nog iets dat we moeten toevoegen ...

$ ('.menu's h3'). on ('klik', functie (e) $ (this) .next ('ul'). toggleClass ('open'); updateHeight (); e.preventDefault (); false;);

Binnen in de h3 klikhandler die we aan het begin hebben gemaakt, moeten we toevoegen aanupdateHeight (), op deze manier wanneer we klikken om een ​​menu te openen, worden de variabelen bijgewerkt om de hoogte van het document te wijzigen. Zonder dit, als u een menu op mobiel opent, zou de "laad" -functionaliteit gebroken zijn als de visibleHeight variabele zou onjuist zijn.

Conclusie

We zijn aan het einde gekomen! We kunnen waarschijnlijk het JavaScript opschonen dat we zojuist hebben geschreven en in een echte wereld zou het waarschijnlijk worden veranderd in een AJAX-gesprek ofzo.

Ik hoop dat je samen met deze tutorial een aantal verschillende technieken hebt geleerd. Het was leuk om te bouwen en ik ben blij om het proces met u te delen om dit zeer mooie ontwerp tot leven te brengen. Ik weet zeker dat er voldoende manieren zijn om dit te verbeteren, dus als je suggesties hebt, laat het me dan alsjeblieft weten in de comments!