One Page Scroll

on eNews, Web Design

Apple lancia la moda del “One Page Scroll”: ecco 2 script per implementarlo

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.

One Page Scroll

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.

Fullpage.js

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!

scrivi un commento

Commento

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

  1. Copio il commento che ho ricevuto sul gruppo facebook dei Web Designer Italiani, riguardo a questi due script, perchè potrebbe esservi utile:

    Il primo plugin può dare seri problemi con testi non responsivi rispetto alla risoluzione del browser (traduco: quando la parte di documento tra un anchor e il successivo ha un’altezza superiore rispetto allasezione visualizzata nel browser). Il migliore dei due è quindi fullPage.js