Esempio qui.. per un esempio super completo (crea dinamicamente un intera pagina web) cliccate qui

Compatibilità:   -    - 

In collaborazione con Paolo Andreatta aka "pandreat"

Questo plug-in crea un effetto di scrittura del testo come se fosse digitato a macchina da scrivere; la caratteristica sostanziale è la TOTALE gestione del codice xhtml.

Specifiche di progetto:

• Prima di includere il plugin, va inclusa la libreria Jquery, scaricabile qui.
  Prima di tutte va inclusa la libreria e poi il plugin, invertendo la chiamata ai due '.js', non funziona il tutto
• E' consigliabile utilizzare il plugin su un elemento "div"

Parametri passabiti al Plugin:

• speed ( Velocità di stampa di ogni singola lettere --> 'Slow'/'Medium'/'Fast' )
• wait_time (tempo di attesa prima che parta lo script --> numero intero)
• html_text (testo html;nel caso in cui non sia settato , il testo utilizzato sarà quello contenuto all'interno dell'elemento)

NB: il codice XHTML deve essere del codice XHTML VALIDO

ESEMPIO DI CODICE HTML:

<div id ='generale'>
</div>

ESEMPIO DI CHIAMATA:

$(document).ready(function(){

$("#generale").TypeHtml({
          speed : 'fast',
          wait_time : 2000,
          html_text: 'Nicola <b> Ferrari < /b>' /* se non settato prende tutto l'html
                                                                                   contenuto nel div "generale"*/
         });
});

Ecco i link per scaricare il plugin in forma ridotta:
Versione 1.0

• Forma ridotta

ferro

0 Comments

Esempio   qui

Compatibilità:   -    - 

Anzichè "lavorare" sull'html, questo plugin andrà a creare l'html.
A differenza di molti Fade che si trovano per il web, che caricano tutto l'html ( e quindi deve 'scaricare' tutte le immagini all'avvio della pagina), il mio plugin le scaricherà una alla volta, quando cioè è il turno di effettuare il fade su quell'immagine.
In tal modo quando il fade verrà effettuato per molte immagini, le prestazioni miglioreranno notevolmente

Specifiche di progetto:

• Prima di includere il plugin, va inclusa la libreria Jquery, scaricabile qui.
    Prima di tutte va inclusa la libreria e poi il plugin, invertendo la chiamata ai due '.js', non funziona il tutto
• Il codice HTML è molto semplice: deve essere un semplice div nel quale verranno sucessivamente inserite le immagini..
  E' preferibile indicare la dimensione di tale div.

Parametri passabiti al Plugin:

• array_image ( array contenente le immagini che dovranno effettuare il fade)
  Le immagini dovranno includere il percorso completo
• width (indica la lunghezza dell'immagine; è obbligatoria per il corretto funzionamento; numero intero)
• height(indica l' altezza dell'immagine; è obbligatoria per il corretto funzionamento; numero intero)
• fade_intervall(indica il tempo di attesa tra l'incremento e il decremento dell'opacità dell'immagine; slow/medium/fast )
• fade_step (indica di quanto deve essere incrementata o decrementata l'opacità di ogni immagine ; slow/medium/fast )
• pause_change ( indica il tempo di attesa tra il fade di un immagine e quella sucessiva; slow/medium/fast )

ESEMPIO DI CODICE HTML:

<div id ='generale' style='margin-left:30px; height:200px'>
</div>

ESEMPIO DI CHIAMATA:

$(document).ready(function(){

var array_immagini = new Array();

array_immagini[0]="image/1.jpg";
array_immagini[1]="image/2.jpg";
array_immagini[2]="image/3.jpg";
array_immagini[3]="image/4.jpg";

$("#fade_uno").OptimalFadeImage({
          array_image : array_immagini,
          width : 150,
          height : 124,
          fade_intervall : 'medium',
          fade_step : 'fast',
          pause_change : 'slow'

});

});

Ecco i link per scaricare il plugin in forma ridotta:
Versione 1.0

• Forma ridotta

• Forma Estesa

ferro

0 Comments

Esempio qui

Compatibilità:   -    - 

Script utilizzato per far "ruotare" dei testi; spesso usato a lato pagina per far "ruotare" delle news.  

Specifiche di progetto:

• Prima di includere il plugin, va inclusa la libreria Jquery, scaricabile qui.
  Prima di tutte va inclusa la libreria e poi il plugin, invertendo la chiamata ai due '.js', non funziona il tutto
• Il codice dovrà essere organizzato come segue:
  • DIV padre
  • N DIV figli
• E' sconsigliato apportare dei padding sui div figli o padre; è preferibile inserire eventuali stile su un altro elemento esterno

Parametri passabiti al Plugin:

• size (numero di pixel esplicitando la parola 'px' --> '300px' )
• timeout(tempo di attesa tra lo scroll di un figlio e l'altro; numero intero)
• speed (velocità di spostamento delle news -->'fast'/'medium'/'slow')
• direction (direzione spostamento --> 'up'/'down')
• onmouseover (stop in caso di onmouseover --> 'stop' /'continue')

ESEMPIO DI CODICE HTML:

<div id ='generale'>
    <div id ='figlio_uno'> CODICE HTML </div>
    <div id ='figlio_due'> CODICE HTML </div>
    <div id ='figlio_tre'> CODICE HTML </div>
</div>

E' necessario che ci sia il tag padre(generale) e che i figli siano degli elementi 'div'.
Nel caso in cui vogliate scrollare solo delle immagini, le immagini dovranno avere stessa altezza altrimenti la parte in eccesso verrà resa invisibile.

ESEMPIO DI CHIAMATA:

$(document).ready(function(){

$("#generale").ScrollNews({
          inizialize : 'true',
          size : '130px',
          timeout : 2500,
          speed : 'fast',
          direction : 'down',
          onmouseover : 'stop'
});

});

Ecco i link per scaricare il plugin sia in forma estesa che in forma ridotta:
Versione 1.0

• Forma estesa
• Forma ridotta

ferro

1 Comments