Finire la pagina del portafoglio reattivo

Cosa starai creando

Passando dal tutorial precedente, aggiungiamo un po 'di prosperità alla nostra build.

Icona di caricamento

Stiamo per approfondire le animazioni CSS3 e creare una semplice animazione rotante per la nostra icona di caricamento. Abbiamo già il markup di cui abbiamo bisogno sulla pagina, quindi passiamo direttamente al CSS.

div.loading color: darken ($ gray, 20%); posizione: assoluta; larghezza: 100 px; fondo: 15px; a sinistra: 50%; margin-left: -50px; img vertical-align: middle; & .rotate -webkit-animation-name: ruotare; -ms-nome-animazione: ruota; nome-animazione: ruota; -webkit-animation-duration: 1s; durata animazione: 1s; -webkit-animation-iteration-count: infinito; -ms-animation-iteration-count: infinito; animazione-iterazione-conteggio: infinito; -webkit-animation-timing-function: lineare; -ms-animation-timing-function: lineare; animazione-temporizzazione-funzione: lineare;

Inserisci questo codice subito dopo portafoglio-item bloccare nel nostro file Sass. Per cominciare, qui stiamo solo impostando alcuni stili per il div di caricamento stesso. Lo stiamo posizionando in modo assoluto e assicurandoci che sia centrato usando a margin-leftdi -50px, che è metà della larghezza dell'elemento. Questo è per compensare il fatto che gli elementi delle posizioni CSS dall'angolo in alto a sinistra.

La prossima sezione è molto più interessante. Come potresti aver visto nell'HTML, abbiamo assegnato una classe di ruotare al caricamento tag che useremo come hook per eseguire un'animazione CSS. Gli stili qui sono il set up per la nostra animazione.

Fondamentalmente stiamo dicendo al CSS come viene chiamata la nostra funzione di animazione (la creeremo in un attimo), quanto a lungo dovrebbe essere eseguita l'animazione, quante volte dovrebbe essere eseguita e la funzione di timing o di easing da usare. Per il nostro progetto vogliamo una piacevole rotazione a 360 gradi che non si ferma mai. Il codice sopra otterrà esattamente questo.

Nota: Dobbiamo includere dichiarazioni prefissate per il browser in modo che nessuno si dimentichi - e potremmo migliorarlo usando un mixin di Sass per fare il lavoro pesante per noi.

Diamo un'occhiata al browser.

OK, sembra davvero buono, ma manca una cosa. Non sta animando! Risolviamolo ora con il seguente codice:

@ -webkit-keyframes ruota 100% -webkit-transform: ruota (360 gradi); transform: ruotare (360 gradi); -webkit-transform-origin: center center; transform-origin: centro centro;  @keyframes ruota 100% -webkit-transform: ruota (360 gradi); -ms-transform: ruota (360 gradi); transform: ruotare (360 gradi); -webkit-transform-origin: center center; -ms-transform-origin: centro centro; transform-origin: centro centro;

Quindi ecco il ruotare funzione. Il modo in cui funziona è impostando i punti chiave dell'animazione per cambiare l'elemento. È possibile impostare qualcosa che accada a 0%, 25%, 50% e così via. La nostra animazione è molto semplice, quindi abbiamo solo bisogno di una dichiarazione al 100% che afferma che l'elemento deve essere ruotato di 360 gradi. Questo significa che il nostro elemento eseguirà un giro completo e finirà di nuovo dove è iniziato. La nostra configurazione precedente assicura che continuerà all'infinito. Il trasformare origine proprietà dice a CSS dove è il punto centrale per l'animazione. Potremmo impostarlo per ruotare con l'angolo in alto a sinistra come centro (che potrebbe sembrare interessante!) Ma vogliamo solo utilizzare il centro esatto del nostro elemento qui. Salva questo file e dai un'occhiata nel browser!

Dovrebbe sembrare simile a quanto sopra, ma molto più fluido e veloce.

Questo avvolge la nostra pagina del Portfolio Timeline, ma c'è una cosa che possiamo aggiungere a questo per gli scopi di questo tutorial.

Caricamento del contenuto

Ora, nel mondo reale questo tipo di layout / tema probabilmente conterrebbe una sorta di funzionalità di scorrimento infinito in cui più elementi appaiono mentre scorri la pagina, impedendoti di dover fare clic per passare attraverso le pagine.

Noi possiamo simulare questo comportamento qui con alcune righe di jQuery. Aprire app.js e inizia aggiungendo quanto segue, sopra dove abbiamo scritto il nostro gestore di click del titolo del menu.

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

Prima di tutto dobbiamo dichiarare due variabili che possiamo usare in seguito. Il secondo è puramente una dichiarazione e verrà assegnato un valore più tardi. Il primo, visibleHeight, afferra il finestra altezza e sottrae quella dal totale documento altezza. Questo ci lascerà con l'altezza dell'area che è attualmente visibile nel browser degli utenti.

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

Avanti, aggiungi lo snippet sopra. Vedrete alcune chiamate di funzione a funzioni che non esistono ancora, il che è OK poichè le creeremo in seguito.

function storeElements () items = $ ('. portfolio-item: lt (3)'). clone (); // Elimina la prima classe dalla selezione items.removeClass ('first');

Il storeElements la funzione serve come un modo per popolare la nostra elementivariabile con alcuni elementi DOM. Nel nostro caso vogliamo prendere i primi tre Portfolio-articoli. L'uso di jQuery lt () ci consente di selezionare selettivamente gli elementi che vogliamo. Una volta che avremo la selezione dovremmo clone()loro, quindi non stiamo usando gli elementi reali ma una copia. L'ultimo passo è rimuovere il primo classe se esiste, in quanto nessuno dei nostri nuovi elementi è il primo della lista.

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

Posiziona questa funzione sopra storeElements. Questa è probabilmente la funzione più semplice in quanto fa solo ciò che abbiamo fatto documento pronto. Il motivo per cui ho usato una funzione per farlo è di tenerlo riutilizzabile.

Ora arriviamo alla funzione che sta facendo il lavoro ...

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', function ( ) loadContent ();););, 500););

OK, passo dopo passo su quello che stiamo facendo qui:

Controlla se la posizione di scorrimento è maggiore di (scorreva passato) o uguale a (attualmente a) visibleHeight.
Se lo è, rimuovi il scorrere gestore di eventi dal finestra in modo che possiamo elaborare il contenuto.
nascondiglio carico-wrap per uso successivo.
dissolvenza carico-wrap in e una volta che la dissolvenza completa ...
... imposta un piccolo Tempo scaduto per simulare "caricare" il contenuto.
Allega il nostro clonato elementi prima di carico-wrap. Questo si inserirà bene tra l'icona di caricamento e quella corrente Portfolio-articoli.
Nascondere carico-wrap e una volta nascosto updateHeight, storeElementse ricollegare l'evento di scorrimento a finestra con le istruzioni per eseguire nuovamente questa funzione.

Accidenti! Sembra un po 'così, percorrilo di nuovo se ne hai bisogno. Una cosa che potresti notare, se sei con gli occhi a bocca aperta, è che stiamo svanendo nel carico-wrap che è già visibile nel nostro HTML. Risolvilo aggiungendo uno stile in linea a quell'elemento ...

Quindi, se ora salviamo i nostri file e visualizziamo il nostro lavoro nel browser, dovresti vedere un po 'più di contenuto "caricare" una volta che scorri fino alla fine della pagina. Oh aspetta, c'è un'altra cosa che dobbiamo aggiungere ...

$ ('. menus h3'). on ('click', function (e) $ (this) .next ('ul'). toggleClass ('open'); updateHeight (); e.preventDefault (); return falso;);

Dentro il h3 click handler che abbiamo creato proprio all'inizio dobbiamo aggiungere una chiamata aupdateHeight (), in questo modo quando facciamo clic per aprire un menu, le variabili vengono aggiornate per riflettere il cambiamento di altezza del documento. Senza questo, se si apre un menu su dispositivo mobile, la funzionalità di "caricamento" verrebbe interrotta come visibleHeight variabile sarebbe errata.

Conclusione

Siamo arrivati alla fine! Probabilmente potremmo riordinare il JavaScript che abbiamo appena scritto e, in una situazione del mondo reale, sarebbe probabilmente cambiato in una chiamata AJAX o qualcosa del genere.

Spero che tu abbia imparato alcune tecniche diverse seguendo questo tutorial. È stato divertente costruire e sono felice di condividere con voi il processo per dare vita a questo bellissimo design. Sono sicuro che ci sono molti modi per migliorarlo, quindi se hai qualche suggerimento per favore fammelo sapere nei commenti!

Web design