Apple oltre a imporre la moda sulla tecnologia, lancia anche tendenze sul web design. L’ultima invenzione è la cosidetta “One Page Scroll” che possiamo vedere andando nella sezione del nuovo iPhone 5s sul sito di Apple.
Si tratta di uno scroll verticale della pagina con la particolarità che un singolo colpo di rotellina fa scrollare l’intera paginata. Assomiglia un po’ ai classici slideshow di immagini ma in questo caso girato in verticale. La genialità è anche questo, vedere in modo inconsueto la realtà cercando di reinventarla.
Il risultato è una sequenza di slides che permettono di isolare singoli concetti e presentarli singolarmente all’utente, esattamente come in una presentazione commerciale.
Come implementare il “One Page Scroll”
Il mondo dei front-end developer si è mosso per ricreare lo stesso effetto. Al momento sono già disponibili due progetti open source facilmente applicabili all’interno dei nostri progetti web.
One Page Scroll by Pete R.
E’ un plugin jQuery che prende esplicitamente ispirazione da Apple e nella demo troverete le somiglianze. Le pagine da scrollare sono delimitate dal markup section che comunque è personalizzabile.
<body>
...
<div class="main">
<section>...</section>
<section>...</section>
...
</div>
...
</body>
Mentre l’esecuzione dello script jQuery prevede anche alcune opzioni:
$(".main").onepage_scroll({
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false
});
One Page Scroll è davvero semplice da usare e funziona anche sugli schermi touch degli smartphone e dei tablet.
FullPage.js by Alvaro Trigo
FullPage.js è un altro plugin jQuery che implementa il “One Page Scroll” e che in questi giorni è nella top ten dei progetti GitHub. Questo script sembra molto più articolato rispetto al precedente.
L’implementazione HTML è praticamente uguale:
<div class="section">WHATEVER</div> <div class="section">WHATEVER</div> <div class="section">WHATEVER</div> <div class="section">WHATEVER</div>
Ma ora, e qui notiamo la prima e più grossa differenza, possiamo implementare anche uno slide orizzontale dalla pagina.
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>
Inoltre FullPage.js è corredato da un bel set di API e Callback che lo rendono più personalizzabile e di cui trovate la documentazione sulla pagine ufficiale del progetto. Provate la demo per credere.
Le Animazioni di Petr Tichy
Petr Tichy ha letto questo post e mi ha scritto segnalandomi un suo articolo in cui espone il suo lavoro di reverse engineering della pagina di Apple su iPhone 5s.
L’articolo ci guida ottimamente attraverso le tecniche usate da Apple per creare le animazioni inserite nell’One Page Scroll.
Potete osservare infine la demo che ha creato apprezzandone la perfetta realizzazione. Grande!