Group94 scrolling menu

10 anni fa,  quando Flash e Action Script erano l’unico strumento possibile per garantire uno certo standard qualitativo nel Web Design, i maestri erano loro: la web agency Group94, oggi Mortierbrigade digital manufacture. Semplicemente erano i migliori, avevano capito come sfruttare al meglio la tecnologia che avevano a disposizione. Non c’erano ancora smartphone, le connessioni erano molto più lente e gli schermiavevano risoluzioni molto basse. In questo particolare contesto, i siti progettati da Group94, erano  leggeri, innovativi, ed elegantissimi. Facevano ampio uso di pixel font e inventavano modalità di interazione originali, ma sempre usabili. Uno dei loro lavori migliori era sicuramente il sito personale del fotografo Carl de Keyzer, premiato nel 2004 come FWA of the month. L’immagine del sito, longeva come poche, ha resistito per anni senza cambiare mai. Solo il tramonto della tecnologia Flash ne ha decretato la fine, altrimenti, per quanto mi riguarda, sarebbe ancora oggi efficacissimo (ovviamente mi riferisco alla navigazione desktop). Lo metto, senza esitazioni, ai primissimi posti della mia personale lista dei migliori siti web di sempre. Purtroppo oggi non è più disponibile on line la vecchia versione e chi non lo conosce difficilmente avrà modo di confermare o respingere questo mio giudizio!

Quando ho iniziato a studiare i primissimi rudimenti di web design, prima ancora di sapere come fare a creare un pulsante, ho scoperto i loro lavori, e non avendo la più pallida idea di come fare a riprodurli, avevo già chiaro che sarebbero stati il mio riferimento. A costo di copiarli, avrei voluto raggiungere quel livello di sofisticatezza. In particolare, in questo studio e omaggio, ho voluto approfondire il particolare sistema di scorrimento di menu a lista. Non ho idea di quale sia la logica con cui Group94 abbia sviluppato il codice per gestire la meccanica di scorrimento, così mi sono divertito a elaborare una mia soluzione sviluppata interamente in javascript e css.

[sc name=”Square button” url=”https://www.matteoprati.com/demo/group94-menu/” label=”Demo” ]

[sc name=”Square button” url=”https://www.matteoprati.com/download/group94-menu/group94-menu.zip” label=”Download” ]

La struttura di base

La struttura HTML di base è composta da una semplicissima lista <ul>:

<ul class="g94-menu mmc-item">
    <li class="item">
        <a href="#">
        <span class="date">09.04.1974</span>
        <span class="item-title">Queen II</span>
        </a>
    </li>
    <li class="item">
        <a href="#">
        <span class="date">12.11.1974</span>
        <span class="item-title">Sheer Heart Attack</span>
        </a>
    </li>
    <li class="item">
        <a href="#">
        <span class="date">21.11.1975</span>
        <span class="item-title">A Night at the Opera</span>
        </a>
    </li>
    <li class="item">
        <a href="#">
        <span class="date">18.12.1976</span>
        <span class="item-title">A Day at the Races</span>
        </a>
    </li>
    <li>...</li>
</ul>

 
Su cui sono applicati gli stili CSS per ottenere la resa come nell’immagine seguente:

In particolare per ottenere l’animazione dello sfondo dell singolo elemento al passaggio del mouse ho sfruttato la classe CSS3 2D Transforms scale(Y) applicata ad uno pseudo elemento :before:

.g94-menu .item a:before {
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
    background-color:#3d4644;
    
    transform:scaleY(0);
    
    -webkit-transition: all 0.8s;
       -moz-transition: all 0.8s;
            transition: all 0.8s;
}

.g94-menu .item a:hover:before {
   transform:scaleY(1);
    
    -webkit-transition: all 0.15s;
       -moz-transition: all 0.15s;
            transition: all 0.15s;
}

La gestione degli eventi

Gli eventi sono gestiti via Javascript. L’idea alla base è quella di assegnare gli elementi della lista alternativamente a tre array:

var prevItems = new Array();
var currItems = new Array();
var follItems = new Array();

Gli array saranno popolati in sequenza: dagli elementi nascosti al di sopra della lista; gli elementi visibili della lista; gli elementi nascosti al di sotto della lista. Per ogni click sui pulsanti di scroll, sarà gestito il passaggio da un array all’altro. Per la manipolazione degli array ho utilizzato i metodi javascript shift() e pop(), che rispettivamente rimuovono il primo e l’ultimo elemento di un array, restituendone il valore. Invece metodi unshift() e push() sono necessari per aggiungere elementi all’inizio e alla fine di un array:

$("#next").click(function(){
  if (follItems.length > 0) {
     prevItems.push(currItems.shift()); 
     prevItems.push(currItems.shift());     
  }
});
 
$("#prev").click(function(){
  if (prevItems.length > 0) {          
     currItems.unshift(prevItems.pop()); 
     follItems.unshift(currItems.pop());
  }
}); 

Questa è sommariamente la logica di base, che poi è completata con le animazioni e la gestione delle trasformazioni. Naturalmente lo scroller può essere ulteriormente implementato, gestendo ad esempio gli eventi associati alla rotella del mouse, oppure curando la compatibilità con i vari browser (è stato testato con Chrome). Si tratta di uno studio, che per essere utilizzato per un lavoro necessita di ulteriori aggiustamenti. Qui è mostrata la logica di base.

[sc name=”Square button” url=”https://www.matteoprati.com/demo/group94-menu/” label=”Demo” ]

[sc name=”Square button” url=”https://www.matteoprati.com/download/group94-menu/group94-menu.zip” label=”Download” ]