C'è una tendenza ricorrente nell'utilizzo di elementi di pagina animati nel web design al momento - mentre scorri verso il basso nella pagina, gli oggetti si animeranno in modo naturale alla vista. Queste animazioni si verificano solo una volta e iniziano solo quando l'elemento si trova nella finestra del browser.
Ho esplorato questo concetto un po 'usando jQuery, insieme alle transizioni CSS3. In poche parole, questo script controlla le classi speciali nella pagina e usa jQuery per aggiungere una nuova classe per gli effetti di transizione. Gli elementi che sono già animati vengono quindi rimossi dal gestore eventi. E quando non ci sono più elementi da animare, il gestore eventi viene completamente rimosso fino a quando non aggiorni la pagina. Dai un'occhiata al mio esempio dimostrativo per vedere esattamente cosa stiamo creando e segui!
Demo dal vivo - Scarica il codice sorgente
Struttura della pagina di base
Per iniziare, ho creato un semplice layout HTML5 che includeva un foglio di stile esterno e una copia dell'ultima libreria jQuery. Tutti i miei JavaScript personalizzati verranno scritti in un altro file esterno chiamato scrollview.js.
Le informazioni di animazione possono essere memorizzate direttamente in HTML utilizzando classi e attributi dei dati. Diamo un'occhiata al primo elemento animato sulla mia pagina.
Questo contiene due div animati animati che galleggiano uno accanto all'altro all'interno di un contenitore. L'attributo Dati posizione ci dice da che parte verrà l'elemento. Utilizzano anche alcune classi per varie proprietà CSS.
Il .floatr e .floatl le classi rappresentano gli elementi flottanti rispettivamente a destra e a sinistra. .animBlock gli elementi sono nascosti per impostazione predefinita usando l'opacità zero, insieme alle proprietà di transizione per l'animazione.
Questo snippet di codice si trova nel mio foglio di stile. Ruota intorno al .notViewed e .viewed classi che ci dicono quando un elemento è (o non è) stato animato. Ogni blocco inizialmente esegue il rendering utilizzando .notViewed e jQuery controlla questi elementi animati per vedere quali sono stati visualizzati e quali no.
Dopo aver aggiunto il .viewed classe, questi elementi si muovono nel 20% dal lato destro / sinistro e anche dalla transizione da 0% di opacità fino al 100%. Le tecniche in CSS sono abbastanza semplici e funzionano correttamente in tutti i browser moderni. Gestire il passaggio tra le classi usando jQuery è quando le cose si complicano.
Associazione dell'evento di scorrimento
Voglio trasferirmi scrollview.js che è separato dal file indice principale. Ci sono due blocchi di codice con uno che è il gestore di eventi e l'altro è una funzione pre-costruita.
Le prime due variabili rappresentano copie memorizzate nella cache di oggetti jQuery. $ blocchi è un oggetto jQuery che rappresenta tutti i blocchi animati con .notViewed classi. Fondamentalmente dovrebbe contenere tutti i possibili elementi animati che ci permettono di scorrere semplicemente tutto. window $ viene chiamato ogni volta che l'utente scorre sulla pagina, quindi l'uso di una copia cache è più efficiente in termini di elaborazione e memoria.
Il metodo jQuery .each () può scorrere su oggetti e matrici. In questo caso abbiamo un oggetto che contiene molti altri oggetti sulla pagina. Su ogni evento di scorrimento questa funzione elabora ogni elemento nel $ blocchi oggetti uno per uno.
Il primo Se{} l'istruzione consente di risparmiare tempo quando un elemento ha completato l'animazione. Poiché la variabile $ blocks è un oggetto memorizzato nella cache, non verrà aggiornata automaticamente una volta che alcune classi sono state modificate. Quindi, invece, dobbiamo verificare se ogni elemento è già stato aggiornato per utilizzare la classe .viewede in tal caso, interrompere l'operazione corrente per passare a quella successiva.
Altrimenti sappiamo che l'elemento non è ancora stato animato. Questo è dove la funzione più dettagliata isScrolledIntoView () verrà eseguito controllando un numero di proprietà specifiche. Il mio codice è effettivamente modificato da questo post su Stack Overflow che fornisce un eccellente modello iniziale.
Elementi animati
Interromperò questa funzione in segmenti per una più facile comprensione. All'inizio è piuttosto semplice, impostando le variabili che sono univoche per l'evento scroll e ogni elemento passato attraverso $ block.
Le prime due variabili docViewTop e docViewBottom cambierà ad ogni scroll. Ho anche pensato che a volte potremmo voler animare gli elementi prima che siano completamente nella finestra. Questo è il motivo per cui ho creato un compensare variabile che può essere applicata direttamente in HTML. Noterai che sto verificando un singolo Dati-offset proprietà - che è facoltativa - e sovrascrive il valore predefinito di 0. Questo verrà applicato al mio secondo elemento animato lungo la pagina:
Il prossimo pezzo di codice JS controlla dove l'elemento corrente si trova sulla pagina. Ricorda che questo passerà attraverso tutto, quindi questi valori cambiano in base alla finestra corrente e quale elemento viene attualmente passato attraverso la funzione. Due variabili elemTop e elemBottom dacci valori numerici che fanno riferimento alla piena altezza dell'oggetto corrente.
Usando l'offset 0 non è necessario modificare alcun codice, ci animiamo solo quando l'elemento è a piena vista. Ma quando c'è un offset, dobbiamo verificare se l'utente sta scorrendo verso il basso dalla parte superiore della pagina o verso l'alto dal basso. L'ho fatto sottraendo il valore attuale della vista superiore dalla posizione in alto dell'elemento reale.
Se l'elemento si trova più in alto nella pagina rispetto al viewport dell'utente, sarà un numero più piccolo (più vicino a 0). Sottraendo il valore superiore dell'elemento (più piccolo) dal valore superiore della vista (più grande) sarà sempre un numero positivo o molto vicino allo zero. Quindi l'utente deve essere più basso sulla pagina e quindi scorrere verso l'alto. L'aggiunta dell'offset al valore superiore dell'elemento ne fa un numero più elevato e quindi? Inferiore? sulla pagina, anche se in realtà non si sposta da nessuna parte. Questa è la logica figurativa per determinare quando deve iniziare l'animazione offset.
Altrimenti l'utente dovrebbe scendere dall'alto e sottrarre questo valore di offset dal fondo dell'elemento (ora avvicinando il fondo). Questo concetto è un po 'confuso all'inizio. Prova a pensare a questi valori alto / basso come i numeri di pixel. La parte superiore della finestra rappresenta 0 e la parte inferiore della finestra è il valore più alto possibile che possiamo ottenere.
Passare alle classi CSS
Il pezzo finale di questa funzione crea l'effetto di animazione una volta che l'elemento è nella vista. In genere, l'istruzione logica viene eseguita solo quando l'elemento si trova all'interno della finestra completa. Tuttavia, il valore di offset può consentire agli elementi di avviare il processo di animazione prima possibile.
In termini più semplici, la logica si legge in questo modo: quando la posizione in basso dell'elemento si trova nella vista o appena sotto la vista e la posizione superiore è perfettamente allineata o appena all'interno della vista, animare l'elemento. Entrambe le condizioni deve essere vero prima che JavaScript esegua qualsiasi codice.
Dovrebbe essere in qualche modo ovvio che l'unico requisito è rimuovere .notViewed e quindi aggiungi la nostra classe di animazione .viewed. Questo accade una volta per ogni pageload, quindi una volta che un elemento è stato messo in vista, ora attiva il comando di ritorno dal mio primo blocco di codice. Rimane ancora dentro il $ blocco oggetto ma stiamo risparmiando tempo non eseguendolo nuovamente attraverso questa funzione.
Quindi cosa succede quando tutti gli elementi sono visibili? Non vogliamo mantenere questo evento di scorrimento allegato oltre la necessità. $ ( 'AnimBlock.notViewed'). Length restituirà un numero di elementi totali corrispondenti al selettore jQuery. Una volta che ogni elemento è cambiato in .animBlock.viewed questo valore restituirà 0.
Una volta che questo raggiunge 0, abbiamo appena finito di animare l'ultimo elemento della pagina. Quindi, quando questo accade finalmente, iniziamo .off () collegato all'evento di scorrimento della finestra. Ora il gestore di eventi a scorrimento non verrà attivato a meno che l'utente non aggiorni nuovamente la pagina. Ha senso mantenere questo metodo all'interno del controllo logico finale perché viene eseguito tante volte quante sono gli elementi da animare (nella mia demo è 5 in totale).
Demo dal vivo - Scarica il codice sorgente
Chiusura
Questa tecnica è orientata verso siti Web avanzati che non soddisfano necessariamente i vecchi browser legacy. La maggior parte degli utenti di Internet è passata alle versioni più recenti di IE, Firefox, Chrome, Opera, ecc. Tuttavia, è sempre possibile verificare le versioni del browser in JavaScript per forzare la visualizzazione di questi elementi quando le transizioni CSS3 non sono possibili. Sentiti libero di scaricare una copia del mio codice sorgente e vedere cos'altro puoi costruire usando questo effetto.