Ti piacciono gli articoli del nostro blog?
Scrivici
Home / Blog
Home / Blog / News / Effetto jParallax, per un sito web originale
29 agosto 2012

Effetto jParallax, per un sito web originale

Jparallax è un plugin realizzato con framework jQuery che dà la possibilità di creare l'effetto parallasse sul nostro sito.

Cosa è l'effetto parallasse?

E' quel fenomeno in cui un oggetto sembra spostarsi rispetto allo sfondo, se cambia il punto di osservazione che potrà essere il posizionamento o lo scroll del mouse oppure semplicemente indotto da pulsanti di scorrimento.

Quindi a seconda delle dimensioni dei livelli di oggetti, avremo un movimento in velocità diverse, caratteristico dell'effetto parallasse.

Come Utilizzarlo

  1. Si inizia con un semplice codice HTML a lista con un ID "parallax"assegnato al contenitore <ul> e all'interno dei <li> le varie immagini che diventeranno i nostri livelli.(Ovviamente l'effetto sarà migliore utilizzando delle immagini png con trasparenza).<ul id="parallax"><li><img src="sfondo_1-trans.png" alt="" style="width:1000px; height:220px;"></li>

    <li><img src="sfondo_2-trans.png" alt="" style="width:1000px; height:220px;"></li>

    <li><img src="sfondo_3-trans.png" alt="" style="width:1000px; height:220px;"></li>

    </ul>

  2. Per utilizzare l'effetto basterà poi scaricare il file jsda qui:stephband.info/jparallax/e includerlo nella pagina, assieme naturalmente al framework jquery:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="jquery.jparallax.js"></script>

  3. Utilizzare al meglio i CSSper personalizzare questo effetto e avere risultati ancora più originali.Le regole CSS fondamentali sono:- dare al #parallax position:relative o absolute e le dimensioni.

    - dare dimensioni anche ad ogni elemento che farà parte dell'effetto; questo determinerà la velocità di scorrimento.

    Più alto sarà il valore, più veloce sarà lo scorrimento.

  4. Infine si dovrà applicare lo script jparallaxal contenitore con id #parallax in questo modo:jQuery(document).ready(function(){ jQuery('#parallax').jparallax({}); });

L'effetto parallasse potrà essere poi di vari tipi: verticale, orizzontale o con scorrimenti irregolari.

In più come accennato in precedenza si potrà decidere se attivare il movimento con il mouse oppure con frecce e pulsanti.

Tutte queste opzioni si possono trovare sul sito ufficiale del plugin qui: stephband.info/jparallax/

Per concludere ecco qui alcuni esempi per rendere l'idea:

News | 29 agosto 2012

Boraso è la prima agenzia full service in Italia di Conversion Marketing specializzata in Conversion Optimization, UX Design, SEO, Media Advertising, eCommerce Magento, e sviluppo di siti web con obiettivi di conversione.

Condividi articolo su:

Ti piacciono gli articoli del nostro blog?

Resta in contatto con noi e ti informeremo anche sui nostri eventi e convegni.

Oppure chiama il Numero Verde 800.947.500