Come creare animazione con lo scrolling della pagina Scrollorama in pratica.

Realizzare animazione sulla tua pagina web non è  mai stato cosi semplice con utilizzo del plugin Scrollorama. Potrai realizzare tanti effetti d’animazione che spuntano allo scrolling  della pagina . Scrollorama è un plug-in che funziona in base della libreria  jQuery creato da John Polacek. Possiede  tantissimi effetti che posiamo inserire piu che altro su  una landing page o la pagina di destinazione  al mio parere  o  qualche d’una di animazioni  posiamo realizzare anche  un sito web comune

Introduzione a Scrollorama

www.ioeweb.it

www.ioeweb.it

rocket

Ho intenzione di creare gli effetti da zero, farvi vedere come funzionano ed includerli in un nuovo progetto. Potete sempre scaricare la pagina finale. Quindi vediamo i momenti base della configurazione. Prima di tutto vedremo di creare una semplice pagina Html.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/js/jquery.lettering-0.6.1.min.js"></script>/*questo fail puoi scaricare qui sotto */
<script src="/js/jquery.scrollorama.js"></script>/*questo fail puoi scaricare qui sotto */

Libreria jQuery e script di Scrollorama sono gli unici file necessari per questo tipo di lavoro. Dovremo agiungere anche un foglio di stile CSS per rendere la nostra pagina piu atraente e per inserie in esso classe scrollblock. Passiamo alla creazione dei ellementi principali.

Inizializzazione plug-in scrollorama

Prima di tutto dobiamo indicare nel scrivere codice jQuery che il lavoro del nostro plugin dovrebbe iniziare dopo che la paggina vera complettamente caricata sul browser del utente. Non entrando tanto nell linguaggio jQuery, posso solo dire che questa riga del codice verifica che la pagina e stata completamente caricata sul browser

 $ (document) .ready (function ()
,

e quindi si possa procedere con lavorare con vari ellementi testuali al interno dei blocci con classe .scrollblock

var scrollorama = $.scrollorama({ blocks:'.scrollblock' });{codecitation}
Vedimo il nostro script jQuery completto 
{codecitation }
<script>
$(document).ready(function() {        
var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
});
</script>

Quindi, dopo  che la pagina sara completamete caricata tutti gli elementi al interno della scatola con la classe .scrollblock, possono essere trasformati secondo l'effeto aplicato.

Come funzionano gli effeti d-animazione del plugin Scrollorama

Prima di tutto vediamo di creare dei blocchi per dopo inserire in esso i nostri elelmenti per animarli allo scrolling della pagina.  Vedimo anche di creare dei sitili per questi blocchi  .

Vediamo il codice CSS dei nostri blocchi :

.scrollblock {
margin: 0;
width: 100%;
height: 600px;
}

Abbiamo definito larghezza e altezza delle nostre scatole. Oviamente che potete aggiungere anche altri stili come lo sfondo o il bordo. Quindi vedimo di creare una semplice animazione allo scorrimento della pagina utilizzando il nostro plugin.

Semplice esempio d'animazione con scrollorama

Dopo aver collegato i plugin necesarie e avendo scritto lo script di inizalizzazione di animazione posimo procedere con la creazione fisica atraverso linguggio html dei nostri blocchi /scatole per animazioni

<div class="scrollblock" >
<h3 id="title1">Block 1</h3>
</div>
<div class="scrollblock" >
<h3 id="title2">Block 2</h3>
</div>
<div class="scrollblock" >
<h3 id="title3">Block 3</h3>
</div>

Come si può vedere ogni blocco ha la classe .scrollblock e un id diverso per ogni elemento in esso contenuto che sara proprio l'ogetto della animazione,  nel nostro caso sara un titolo h3. ID è importante per poter distiunguere ellementi uno dal altro. Creiamo alcuni effetti per i 3 elemnti nei  blocchi creati.

scrollorama.animate('#title1',{ delay: 200, duration: 300, property:'zoom', end: 8 });
scrollorama.animate('#title2',{ duration: 600, property:'rotate', start:90,end:270 });
scrollorama.animate('#title3',{ duration: 600, property:'left', start:-800,end: 0 });

Vediamo di capire cosa abbiamo scritto

Scrollorama ha un metodo chiamato animate per generare effetti. Ed è qui che avviene la magia. Ho assegnato  diversi effetti per i 3 blocchi. Pima di tutto indico l'ID dell'elemento che si desidera utilizzare per animmazione. Questo può essere qualsiasi elemento all'interno dei blocchi. Ho assegnato delle animazioni per il titolo rachiso nel tag h3 con il proprio ID. Qui sotto riporto la lista dei parametri che posiamo utilizare per animazione d'ellementi e le relative descrizioni d'effetti del plugin scrollorama.

duration numero di pixel di scorrimento della pagina per la quale durera l'animazione

delay numero di pixel di scorrimento prima dell'inizio d'animazione (quando il nostro blocco superera il bordo della finestra visiva del browser sotto, si comincia il conto alla rovescia dei pixel prima di cominciare animazione )

property proprietà CSS alla quale si aplica animmazione (deve essere numerica)

start lo stato d'elemento decritto in CSS all'inizio d'animazione (se non assegnato, si utilizera  valore corrente della proprietà dell'elemento, per esempio font-size:16px. questo sara lo stato iniziale del elemento  )

end valore della proprietà CSS alla fine d'animazione (se non assegnato,  ritorna allo stato iniziale come valore CSS )

pin impostatare su true se si desidera che il blocco venisse bloccato durante tutta la lungezza dello scorimento indicato in px dello scermo  (nota: vedremo tutta la animazione, il blocco non sparira finche non si scorrera i pixel indicati per la durata , ma vverano blocati anche tutti altri ellementi in esso contenuti, non sparirano in su   fino alla fine della animazione)
easing -  salta baby salta! Vediamo come funziona in un altra lezione.

<!DOCTYPE HTML>
<html>
<head>
<title>scrollorama su ioeweb.it</title>
<link rel="stylesheet" href="/css/normalize.css" type="text/css">
<link rel="stylesheet" href="/css/style.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/js/jquery.lettering-0.6.1.min.js"></script>
<script src="/js/jquery.scrollorama.js"></script>
<script>
$(document).ready(function() {
var scrollorama = $.scrollorama({ blocks:'.scrollblock' });    
scrollorama.animate('#title1',{ delay: 200, duration: 600, property:'zoom', end: 4 });
scrollorama.animate('#title2',{ duration: 600, property:'rotate', start:30,end:270 });
scrollorama.animate('#title3',{ duration: 600, property:'left', start:-800,end: 0 });
})
</script>
</head>
<body>
<div class="scrollblock" >
<h1 id="title6">introduzione</h1>
</div>
<div class="scrollblock" >
<h1 id="title1">Block 1</h1>
</div>
<div class="scrollblock" >
<h1 id="title2">Block 2</h1>
</div>
<div class="scrollblock" >
<h1 id="title3">Block 3</h1>
</div>
</body>
</html>

Sarebbe oportuno di creare rispetive cartelle sia per fail dijs sia per  stili css, come potete notare ho creato 2 cartelle "js" e "css" per rispetivi fail.
Ora create un fail index.html nel semplice blocnote o nel programma php desigener con il codice sopra e rispettive cartelle css js con i nostri script e fogli di stile al interno.

Vedrete 3 diversi tipi di effetti. Mi spiego come usare correttamente i parametri per fare alcuni effetti.

Effetti d'animazioni con Scrollorama

Sarete in grado di utilizzare la maggior parte delle proprietà CSS che hanno valori numerici, in animazioni prodotti dallo script di  Scrollorama. Cominciamo con le proprietà CSS di uso comune.

Zoom è possibile creare effetto zoom-in o zoom-out aplicando questa proprieta .

scrollorama.animate('#title',{ duration: 300, property:'zoom', end: 8 })

Secondo il codice sopra l'animazione durerà per 300px di scorrimento della pagina e avrà inizio con le dimensioni predefinite e finira con la grandezza del elemento schelto per animazione 8 volte più grande rispetto al  originale. È possibile utilizzare valori negativi per il parametro end, e realizzare l'effetto zoom-out

Se non si desidera avviare immediatamente gli effetti, utilizzare la proprietà delay. Annimazione sara  ritardata  fino a quando il contenitore con il  nostro elemento animato  non uscira da sotto del browser per  il numero di pixel che avete definito nella proprieta delay

Rotare è possibile utilizzare la proprietà di rotazione per ruotare gli elementi da un angolo iniziale indicato (nel esempio possizione iniziale 30 gradi).

 scrollorama.animate('#title',{ duration: 300, property:’ rotate’, start:30,end: 270 });

Secondo il codice sopra  rotazione proseguira per 300px di altezza dello scrorimento dell pagina , l'elemnto sara inizialmente inclinato a 30 gradi  e si fermera a 270 gradi alla fine della animazione .
Spostamento di testo È possibile spostare il testo  utilizzando proprietà top, left, right, bottom 

scrollorama.animate('#title',{ duration: 300, property:'right’, start:-10000,end: 0 });

Eelemento nel codice qui sopra  sarà inizialmente -1000px dalla sua posizione come nel codice html cio e nella strutura DOM  e si sposta da sinistra a destra  e si fermera a 0px  ritornera nella sua posizione, li dove avrebbe dovuto esserci.
Modificare altezza: È possibile modificare l'altezza dell'elemento durante animazione usando l'attributo height di CSS.

scrollorama.animate('#title',{ duration: 300, property:’height’, start: ‘100’,end: ‘500’ });

Ogni proprietà CSS che ha un valore numerico può essere utilizzata nel' animazione per creare effetti animati. Ho spiegato effetti comunemente usati e ora tocera a voi di capire  altre proprietà CSS provare di realizzare con esso animazioni.

P.S. importante di non esagerare con animazioni a meno che il tuo sito non rapresenta un cartone animato! Ho inserito anche qualche animazione diretamente nel articolo per far ti mostrare che è possibile realizzare animazioni con Scrollorama anche al interno di un semplice articolo

E vediamo anche la pagina completta con vari effetti d'animazione di Scrollorama perexod

Letto 1481 volte