Come scoprire il punto di partenza e fine d'animazione con Scrollorama

Oggi vorrei approfondire le varie impostazioni di proprietà e loro valori nella scrollorama, per rendere più chiaro come funzionano varie effetti, e come gestirli e impostare sulla nostra pagina.

La prima cosa che si deve fare nel usare scrolloorama è scaricare e collegare la libreria jquery e rispetivi plugin di scrollorama jquery.scrollorama.js per effetti comuni come questo che vediamo qui sotto e jquery.lettering-0.6.1.min.js  per poter animare delle lettere in una parola. Che oggi non vediamo.  

Tutti i fail troverete nel archivo che potete scaricare qui sotto articolo

 La seconda cosa che faciamo creeremo un scatola  con aiuto del tag div con la classe scrollblock  e al inetrno di essa inseriremo un titolo h1  e atribuiendo ad esso  stili css come altezza e la sua posizione. Per distanziare nostri esempi uno dal altro 

<div class="scrollblock" >
          <h1 class="title2">Scrollorama </h1>
     </div>
<style>
.scrollblock {
    position: relative;
    margin: 10px;
    width: 80%;
    height: 300px;
}
</style>

E puoi gli stili css per il nostro titolo h1 come ombra, font-family soltando per rendere il nostro titolo piu rapersentativo

 h1{ font-family: Gadget,sans-serif; text-transform: uppercase; color: #FFB000; text-shadow: 0 2px 1px #000; line-height: 1; } 

Con aiuto di plugin  Firebug di firefox (di qui al corso Corso CSS pratica) e un rigello digitale vediamo lo spostamento del titolo durante  animazione per capire le impostazioni da gestire  del plugin scrollorama.

A questo punto posiamo procedere con creare animazioni creando uno script per questo titolo. Vediamo di realizzare un semplice spostamento del titolo,  spostarlo a destra per 400px durante 300 px dello scorrimento della pagina. Qui vorrei anche sottolineare che tutti gli effetti di scrollorama come si vede anche dal nome dello script  avvengono con lo scrolling della pagina e proprio questo che lo distingue q da altri tipi di animazione. La nostra animazione avvera solo con lo scrolling della pagina. 

 scrollorama.animate('.title3',{ duration: 300, property:'padding-left', end:400, pin:true}); 

come vediamo in questo esempio utilizeremo  proprieta css “padding- left” cio è alla fine del 300 px impostati come durata dello scorrimento della pagina la nostra scritta dovrebbe spostarsi a destra per  400px (dovrebbe ragiungere il pagging-left di 400px dalla posizione iniziale)

Vediamo screenshot che ho fatto io . Ho utilizzato righello digitale impostato su px per misurare lo spostamento e l'altezza di scorrimento della pagina.

 

 

Possizione iniziale del titolo h1 Scrollorama.

 

Posizione finale del titolo

 

Con questo sempli esempio ho mostrato come si comportera la vostra anoimazione con plugin scrollorama. Come parametro di animazione posiamo utilizzare qualsiasi proprieta numerica dei CSS. Come altezza del font, rotazione, padding come abbiamo visto nel esempio, transizione, trasformazione. Opacita del testo fino la sua spaizione o apparizione da nulla e cosi via    

 

Per quanto riguarda i stili  CSS consultate i nostri corsi "Sito web da 0" e "Corso CSS pratica" dove tra altro vediamo come si possa scoprire la posizione di varie elementi sulla pagina come misurarli e tanto altro.

I fail rellativi al articolo potette scaricare qua sotto.

Letto 1192 volte