Oggi vedremo alcune tecniche che possiamo usare per mostrare i progressi di scorrimento per gli utenti che stanno leggendo una pagina. Questa tecnica viene utilizzata su un numero crescente di siti e per una buona ragione; fornisce una comprensione contestuale degli investimenti necessari per consumare una determinata pagina. Mentre l'utente scorre, viene presentato il senso del progresso corrente in diversi formati.
Come visto su ia.net
Oggi illustreremo due tecniche specifiche che è possibile utilizzare per mostrare i progressi di scorrimento e ti lasceremo con un set di strumenti per crearne uno tuo. Iniziamo!
Impostazione del documento
Per prima cosa, imposteremo un documento simulato che fungerà da nostra pagina postale. Useremo normalize.css e jQuery, così come un carattere di Google. Il tuo file HTML vuoto dovrebbe assomigliare a questo:
Avanzamento Indicatore di animazione
Successivamente, aggiungeremo i nostri contenuti di post falsi:
Come dovremmo mostrare i progressi durante lo scorrimento di un post?
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Abitante di Pellentes morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Ulteriormente la vita mia estis Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Fermenta di Aenean, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Dapibus pregato, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Questo ci dà abbastanza contenuti per testare i nostri comportamenti di scorrimento.
Stile di base
Useremo alcuni stili di base per rendere il nostro post un po 'più attraente.
Per calcolare la nostra posizione di scorrimento, dobbiamo capire concettualmente cosa stiamo seguendo. Poiché JavaScript può tracciare solo il valore di scorrimento superiore, dovremo tracciare il nostro valore di scorrimento da 0 (in alto, non in scorrimento) a qualsiasi valore di scorrimento finale. Il valore di scorrimento finale sarà uguale alla lunghezza totale del documento meno l'altezza della finestra stessa (poiché il documento scorrerà fino a che la parte inferiore del documento raggiunge la parte inferiore della finestra).
Utilizzeremo il seguente codice JavaScript per calcolare questa posizione di scorrimento.
(function () var $ w = $ (finestra); var wh = $ w.height (); var h = $ ('body'). height (); var sHeight = h - wh; $ w.on ( 'scroll', function () var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight));); ());
Il codice precedente imposta l'altezza della finestra e l'altezza del corpo e, quando l'utente scorre, usa quei valori per impostare a perc variabile (abbreviazione per percentuale). Utilizziamo anche Math.min e Math.max per limitare i valori all'intervallo 0-100.
Con questo calcolo percentuale, possiamo guidare l'indicatore di progresso.
Indicatore di cerchio
Il primo indicatore che creeremo è un cerchio SVG. Utilizzeremo l'SVG ictus dasharray eictus dashoffset proprietà per mostrare progressi. Innanzitutto, aggiungiamo l'indicatore di avanzamento al documento.
Questo markup ci dà due cerchi in un SVG, oltre a un div di contenimento per mostrare il nostro conteggio percentuale. Abbiamo bisogno di aggiungere uno stile anche a questi elementi, e poi spiegheremo come questi cerchi sono posizionati e animati.
.indicatore di avanzamento posizione: fissa; superiore: 30 px; a destra: 30 px; larghezza: 100 px; altezza: 100 px; .progress-count position: absolute; inizio: 0; a sinistra: 0; larghezza: 100%; altezza: 100%; allineamento del testo: centro; altezza della linea: 100 px; colore: # 0082FF; svg position: absolute; circle fill: rgba (255,255,255,0,9); svg .animated-circle fill: transparent; larghezza del tratto: 40px; tratto: # 0A74DA; stroke-dasharray: 126; stroke-dashoffset: 126;
Questi stili ci hanno impostato per animare il nostro elemento del cerchio. I nostri progressi dovrebbero essere sempre visibili, quindi impostiamo la posizione su fisso .progressi indicatore classe, con regole di posizionamento e dimensionamento. Impostiamo anche il conteggio dei progressi per essere centrati sia verticalmente che orizzontalmente all'interno di questo div.
I cerchi sono posizionati al centro usando la trasformazione sugli stessi elementi SVG. Iniziamo il centro delle nostre cerchie usando la trasformazione. Usiamo qui una tecnica che ci permette di applicare una rotazione dal centro dei nostri cerchi per avviare l'animazione nella parte superiore del cerchio (anziché sul lato destro del cerchio). In SVG, le trasformazioni vengono applicate dalla parte superiore sinistra di un elemento. Questo è il motivo per cui dobbiamo centrare i nostri circoli 0, 0, e sposta il centro del cerchio al centro dello stesso SVG usando tradurre (50, 50).
Utilizzo di stroke-dasharray e stroke-dashoffset
Le proprietà ictus dasharray eictus dashoffset permettici di animare il tratto di un SVG. ictus dasharray definisce i pezzi visibili di un tratto. ictus dashoffset sposta l'inizio del tratto. Questi attributi combinati ci permettono di creare un processo "keyframing" di ictus.
Aggiornamento di stroke-dasharray su Scroll
Successivamente, aggiungeremo una funzione per aggiornare il tratto-dasharray sullo scroll, usando il nostro progresso percentuale mostrato in precedenza.
(function () var $ w = $ (finestra); var $ circ = $ ('. animato-circle'); var $ progCount = $ ('. progress-count'); var wh = $ w.height ( ) var h = $ ('body'). height (); var sHeight = h - wh; $ w.on ('scroll', function () var perc = Math.max (0, Math.min (1) $ w.scrollTop () / sHeight)) updateProgress (perc);); function updateProgress (perc) var circle_offset = 126 * perc; $ circ.css ("stroke-dashoffset": 126 - circle_offset) ; $ progCount.html (Math.round (perc * 100) + "%"); ());
L'offset che corrisponde alla nostra cerchia è di circa 126. È importante notare che questo non funzionerà per tutti i cerchi, poiché 126 riguarda la circonferenza di un cerchio con un raggio di 20. Per calcolare il tratto-dashoffset per un dato cerchio, mutiply il raggio di 2PI. Nel nostro caso, l'offset esatto sarebbe 20 * 2PI = 125,66370614359172.
Variazione del progresso orizzontale
Per il nostro prossimo esempio, creeremo una semplice barra orizzontale fissa nella parte superiore della finestra. Per fare ciò, useremo un indicatore di progresso vuoto div.
Nota: abbiamo aggiunto il "-2" per permetterci di includere questo esempio nello stesso file CSS.
Successivamente, aggiungeremo il nostro stile per questo elemento.
.indicatore di avanzamento-2 posizione: fissa; inizio: 0; a sinistra: 0; altezza: 3px; background-color: # 0A74DA;
Infine, imposteremo la larghezza della barra di avanzamento sullo scroll.
var $ prog2 = $ ('. progress-indicator-2'); function updateProgress (perc) $ prog2.css (width: perc * 100 + '%');
Tutti insieme, il nostro JavaScript finale dovrebbe assomigliare a questo:
(function () var $ w = $ (window); var $ circ = $ ('. animated-circle'); var $ progCount = $ ('. progress-count'); var $ prog2 = $ ('. progress-indicator-2 '); var wh = $ w.height (); var h = $ (' body '). height (); var sHeight = h - wh; $ w.on (' scroll ', funzione ( ) var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight)) updateProgress (perc);); function updateProgress (perc) var circle_offset = 126 * perc; $ circ.css ("stroke-dashoffset": 126 - circle_offset); $ progCount.html (Math.round (perc * 100) + "%"); $ prog2.css (width: perc * 100 + '% '); ());
Altre idee per le barre di progresso
Questo articolo ha lo scopo di darti gli strumenti e l'ispirazione per progettare le tue soluzioni per lo scroll. Altre idee per le barre di avanzamento potrebbero includere l'utilizzo di termini più descrittivi o umanizzati per l'indicazione del progresso stesso, come "a metà strada" o "appena iniziato". Alcune implementazioni (come l'esempio di ia.net mostrato in precedenza) utilizzano la stima del tempo di lettura di un articolo. Questo potrebbe essere stimato utilizzando un codice simile al seguente:
var wordsPerMin = 300; // basato su questo articolo: http://www.forbes.com/sites/brettnelson/2012/06/04/do-you-read-fast-enough-to-be-successful/ var wordsArray = $ (". articolo-contenuto "). text (). split (" "); var wordCount = wordsArray.length; var minCount = Math.round (wordCount / wordsPerMin);
Dovresti quindi usare il MINCOUNT in collaborazione con il perc variabile che stiamo aggiornando su scroll per mostrare al lettore il tempo rimanente per leggere l'articolo. Ecco una implementazione di base di questo concetto.
function updateProgress (perc) var minutesCompleted = Math.round (perc * minCount); var rimanente = minCount - minutesCompleted; se (rimanente) $ (". indicatore di avanzamento"). show (). html (rimanente + "minuti rimanenti"); else $ (". indicatore di avanzamento"). hide ();
Un pezzo finale: ridimensionamento adattivo dello schermo
Per garantire che il nostro indicatore di avanzamento funzioni come dovrebbe, dovremmo assicurarci che la nostra matematica stia calcolando le cose giuste al momento giusto. Affinché ciò accada, dobbiamo assicurarci di ricalcolare le altezze e aggiornare l'indicatore di avanzamento quando l'utente ridimensiona la finestra. Ecco un adattamento del JavaScript per farlo accadere:
(function () var $ w = $ (window); var $ circ = $ ('. animated-circle'); var $ progCount = $ ('. progress-count'); var $ prog2 = $ ('. progress-indicator-2 '); var wh, h, sHeight; function setSizes () wh = $ w.height (); h = $ (' body '). height (); sHeight = h - wh; setSizes (); $ w.on ('scroll', function () var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight)) updateProgress (perc);). on ('resize', function () setSizes (); $ w.trigger ('scroll');); function updateProgress (perc) var circle_offset = 126 * perc; $ circ.css ("stroke-dashoffset ": 126 - circle_offset); $ progCount.html (Math.round (perc * 100) +"% "); $ prog2.css (width: perc * 100 + '%'); ()) ;
Questo codice dichiara una funzione che imposta le variabili di cui abbiamo bisogno per calcolare il progresso in qualsiasi dimensione dello schermo e chiama tale funzione al ridimensionamento. Abbiamo anche re-trigger scroll sulla finestra di ridimensionamento in modo che il nostro UpdateProgress la funzione è eseguita.
Hai raggiunto la fine!
Dopo aver posto le basi per un numero qualsiasi di varianti, che cosa puoi inventare? Quali indicatori di progresso hai visto funzionare? Che ne dici di indicatori che fanno male all'usabilità? Condividi le tue esperienze con noi nei commenti!
Accentsconagua
Share
Come visto su ia.net
