Ferdiggjør porteføljen for Responsive Timeline

Hva du skal skape

Fortsett med fra den forrige opplæringen, la oss legge til noe blomstre til vår bygg.

Laster ikon

Vi kommer til å dykke inn i CSS3 Animasjoner og lage en enkel spinning animasjon for vårt lastingsikon. Vi har allerede merket vi trenger på siden, så la oss gå rett inn i CSS.

div.loading color: darken ($ grå, 20%); posisjon: absolutt; bredde: 100px; bunn: 15px; venstre: 50%; margin-venstre: -50px; img vertikaljustering: midt; & .rotate -webkit-animasjon-navn: roter; -ms-animasjon-navn: roter; animasjonsnavn: roter; -webkit-animasjon-varighet: 1s; animasjon-varighet: 1s; -webkit-animasjon-iterasjon-telling: uendelig; -ms-animasjon-iterasjon-telling: uendelig; animasjon-iterasjon-telling: uendelig; -webkit-animasjon-timing-funksjon: lineær; -ms-animasjon-timing-funksjon: lineær; animasjon-timing-funksjon: lineær; 

Legg denne koden rett etter portefølje-element blokkere i vår Sass-fil. Til å begynne med, her er det bare å sette opp noen stiler for laste div selv. Vi posisjonerer det absolutt og sørger for at det er sentrert ved å bruke en margin-leftav -50 piksler, som er halvparten av elementets bredde. Dette er for å gjøre opp for at CSS stiller elementer fra øverste venstre hjørne.

Den neste delen er mye mer interessant. Som du kanskje har sett i HTML-koden, tildelte vi en klasse av rotere til lastingen  tag som vi vil bruke som kroken til å utføre en CSS animasjon. Stilene her er satt opp for vår animasjon. 

Vi forteller i utgangspunktet CSS hva animasjonsfunksjonen vår kalles (vi vil opprette det i et øyeblikk), hvor lenge animasjonen skal løpe, hvor mange ganger den skal løpe, og timing eller easing-funksjonen skal brukes. For vårt prosjekt ønsker vi en fin glatt 360 graders rotasjon som aldri stopper. Koden ovenfor vil oppnå akkurat det. 

Merk: Vi må inkludere forhåndsdefinerte deklarasjoner i nettleseren, slik at ingen savner det - og vi kan forbedre dette ved å bruke en Sass mixin for å gjøre den tunge løftingen for oss.

La oss ta en titt i nettleseren.

OK, det ser veldig bra ut, men det mangler en ting. Det er ikke animerende! La oss fikse det nå med følgende kode:

@ -webkit-keyframes roterer 100% -webkit-transformer: roter (360deg); transformer: roter (360deg); -webkit-transform-opprinnelse: sentrumsenter; transformasjons-opprinnelse: sentrumsenter;  @keyframes rotere 100% -webkit-transformer: roter (360deg); -ms-transformer: roter (360deg); transformer: roter (360deg); -webkit-transform-opprinnelse: sentrumsenter; -ms-transform-opprinnelse: sentrumsenter; transformasjons-opprinnelse: sentrumsenter; 

Så her er det rotere funksjon. Måten dette virker på, er å sette viktige punkter i animasjonen for å endre elementet. Du kan sette noe til å skje på 0%, 25%, 50% og så videre. Vår animasjon er veldig enkel, så vi trenger bare en deklarasjon på 100% som sier at elementet må roteres 360 grader. Dette betyr at vårt element vil utføre en hel spinn og ende opp igjen der den startet. Vår tidligere oppsett sørger for at den vil fortsette på ubestemt tid. De forvandle-opprinnelse eiendom forteller CSS der midtpunktet for animasjonen er. Vi kunne sette det til å snurre med øverste venstre hjørne som sentrum (det kan se interessant!), Men vi vil bare bruke det eksakte senteret av elementet vårt her. Lagre denne filen og ta en titt i nettleseren!

Det skal se ut som det ovenfor, men mye jevnere og raskere.

Det bryter opp vår tidslinjeporteføljeside, men det er en ting vi kan legge til i denne veiledningen.

Laster inn innhold

Nå, i den virkelige verden, vil denne typen layout / tema trolig inneholde en slags uendelig rullefunksjon der flere elementer vises når du ruller nedover siden, slik at du ikke må klikke for å gå gjennom sider.

Vi kan simulere Denne oppførselen her med noen få linjer av jQuery. Åpne opp app.js og begynn med å legge til følgende, over hvor vi skrev vår meny tittel click handler.

var visibleHeight = $ (dokument) .height () - $ (vindu) .height (); var elementer;

Først av alt må vi erklære to variabler som vi kan bruke senere. Den andre er bare en erklæring og vil bli tildelt en verdi senere. Den første, visibleHeight, tar tak i vindu høyde og trekker det fra det totale dokument høyde. Dette vil forlade oss med høyden på området som nå er synlig i brukerens nettleser.

storeElements (); $ (vindu) .on ('resize', funksjon (e) updateHeight ();); $ (vindu) .on ('scroll', funksjon (e) loadContent (););

Neste opp legger du til det overliggende kapittelet. Du vil se noen funksjonsanrop til funksjoner som ikke eksisterer ennå, noe som er OK da vi vil lage dem neste.

funksjonsbutikkElement () items = $ ('.portefølje-element: lt (3)'). klone (); // Strip første klasse fra utvalg items.removeClass ('first'); 

De storeElements funksjonen fungerer som en måte å fylle våre elementervariabel med noen DOM elementer. I vårt tilfelle ønsker vi å ta de første tre porteføljeposter. Bruken av jQuery's lt () lar oss selektivt velge elementene vi ønsker. Når vi har valget vi burde klone ()dem, så vi bruker ikke de faktiske elementene, men en kopi i stedet. Det siste trinnet er å fjerne først klasse hvis den eksisterer, da ingen av våre nye elementer er de første i listen.

funksjon updateHeight () visibleHeight = $ (dokument) .height () - $ (vindu) .height (); 

Plasser denne funksjonen over storeElements. Dette er trolig den enkleste funksjonen, da det bare gjør det vi gjorde på dokument klar. Grunnen til at jeg har brukt en funksjon for å gjøre dette, er å holde den gjenbrukbar.

Nå kommer vi til funksjonen som gjør jobben ...

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

OK, trinnvis for hva vi gjør her:

• Sjekk om rulleposisjonen er mer enn (rullet forbi) eller lik (for tiden ved) visibleHeight.
• Hvis det er, fjern det bla hendelseshåndterer fra vindu slik at vi kan behandle innholdet.
• cache lasting-wrap for senere bruk.
• Falme lasting-wrap inn og når fade fullfører ...
• ... sett en liten Pause å simulere "lasting" innholdet.
• Fest våre klonede elementer før lasting-wrap. Dette slår pent inn mellom lastikonet og strømmen porteføljeposter.
• Gjemme seg lasting-wrap og en gang skjult updateHeight, storeElementsog re-feste rullehendelsen til vindu med instruksjoner for å kjøre denne funksjonen igjen.

Puh! Det virker som mye, så kjør gjennom det igjen hvis du trenger det. En ting du kanskje merker, hvis du er ildled-eyed, er at vi fading i lasting-wrap som faktisk allerede er synlig i vår HTML. Løs det ved å legge til en inline-stil for det elementet ...

Så, hvis vi nå lagrer våre filer og ser arbeidet vårt i nettleseren, bør du se noe mer innhold "last" når du ruller til bunnen av siden. Oh vent, det er en annen ting vi trenger å legge til ...

$ ('menyer h3'). på ('klikk', funksjon (e) $ (dette) .next ('ul'). toggleClass ('open'); updateHeight (); e.preventDefault falsk; );

Inne i h3 klikkbehandler vi opprettet rett ved starten må vi legge til i en samtale tilupdateHeight (), På denne måten når vi klikker for å åpne en meny, oppdateres variablene for å gjenspeile endringen i høyden av dokumentet. Uten dette, hvis du åpner en meny på mobil, vil "loading" funksjonaliteten bli brutt som visibleHeight variabel ville være feil.

Konklusjon

Vi har nådd slutten! Vi kunne nok rydde opp JavaScript som vi nettopp har skrevet, og i en ekte verdenssituasjon ville det trolig bli endret til et AJAX-anrop eller noe.

Jeg håper du har lært noen forskjellige teknikker som følger med denne opplæringen. Det var morsomt å bygge, og jeg er glad for å dele med deg prosessen for å bringe dette flotte designet til liv. Jeg er sikker på at det er mange måter å forbedre dette på, så hvis du har noen forslag, vennligst gi meg beskjed i kommentarene!