JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Grazie al supporto sempre più capillare dei moduli CSS3 sui vari browser, è possibile realizzare interfacce complesse senza ricorrere a JavaScript.

Partendo da quest'idea, realizzaremo uno slider di immagini riducendo al minimo l'uso di JavaScript pur mantenendo un supporto di base anche ai browser meno avanzati. In alcuni casi dovremo limitarne la flessibilità, ma solo per semplificare gli script in questo contesto.

Requisiti funzionali

A livello di funzionalità dovremo sviluppare uno slider con le seguenti caratteristiche:

• scrolling orizzontale di una serie di immagini con uguali dimensioni (conoscendone numero e larghezza);
• navigazione fra le immagini tramite controlli di avanzamento o link alle immagini.

Requisiti tecnici

A livello tecnico adotteremo la tecnica del progressive enhancement per offrire la miglior esperienza utente in base alle funzionalità supportate dal browser. I nostri obiettivi sono:

• garantire la fruibilità dei contenuti con e senza JavaScript;
• ridurre al minimo l'uso di librerie in favore di soluzioni native;
• evitare l'uso di animazioni JavaScript in favore dei moduli CSS3;
• raggiungere il massimo delle performance nel caricamento e la miglior fluidità nelle animazioni.

A partire da questi requisiti svilupperemo il nostro slider secondo questo schema (tra parentesi alcune versione dei browser usati come riferimento):

• solo CSS2 e HTML: supporto di base con barra di scorrimento orizzontale nativa del browser e pulsanti per navigare fra le immagini;
• supporto a JavaScript (IE7+, FF3.6 e precedenti): navigazione senza barra di scorrimento, controlli di avanzamento, nessuna animazione;
• supporto alle transizioni CSS3 (FF4, Chrome8+, Safari 3.2+, Opera10.50+): scorrimento animato;
• supporto alle trasformazioni 3D (Chrome10+, Safari5+, Mobile Safari): immagini traslate con trasformazioni 3D per sfruttare l'accelerazione 3D della GPU ed ottimizzare la fluidità del movimento, soprattutto per i browser mobile.

HTML e CSS di base

Per iniziare, il markup del nostro slider non è dissimile da quello di tante altre gallerie JavaScript:

<div id="container">        
    <div id="wrapper">
        <ul class="slider">
            <li><img src="img/1.jpg" id="img1" alt="" /></li>
            <li><img src="img/2.jpg" id="img2" alt="" /></li>
            ...
        </ul>
    </div>
    <div class="navigation">
        <a href="#" class="nav_prev js-shown">Indietro</a>
        <a href="#img1" class="nav_btn">1</a>
          <a href="#img2" class="nav_btn">2</a>
          ...
        <a href="#" class="nav_next js-shown">Avanti</a>
    </div>
</div>

Da notare che alcuni elementi hanno una classe js-shown che ci servirà per mostrarli o meno in base al supporto JavaScript del browser.

Altri articoli

Altre guide

Altre newsletter