I siti a scorrimento lungo sono diventati una tendenza di web design molto comune. Uno dei sottotipi più interessanti di questo sono i siti a scorrimento parallasse, dove le immagini si muovono per emettere un effetto di parallasse. Mentre l'utente scorre la pagina verso il basso, le animazioni vengono disattivate e nel complesso dà un nuovo aspetto a qualsiasi sito Web se implementato correttamente.
Fare un sito di scrolling di parallasse è spesso noioso perché richiede una conoscenza approfondita di CSS, Javascript e un buon web design. Ecco una lista dei migliori plugin di scrolling parallasse che non solo rendono più facile la creazione di siti di scrolling parallasse, ma anche una libreria di effetti di parallasse ben strutturata in modo che diventi più facile e veloce sviluppare una pagina web di buona qualità .
NOTA BENE : Prima di iniziare, si noti che per utilizzare questi plugin è necessaria una certa conoscenza delle tecnologie web (HTML / CSS / Javascript). La maggior parte dei plugin elencati utilizza jquery, quindi potrebbe essere necessaria anche la conoscenza di Jquery.
Plugin di scorrimento parallasse
1. ScrollMagic
ScrollMagic è uno dei plugin jquery più popolari e ricchi di funzionalità. È una libreria javascript che ti consente di creare effetti di scorrimento apparentemente magici. Usando ScrollMagic puoi animare in base alla tua posizione di scorrimento. Ciò significa che puoi correggere, spostare o animare elementi HTML mentre scorri, per la durata che desideri, e anche aggiungere facilmente effetti di parallasse al tuo sito web. È altamente personalizzabile ed è anche leggero (6kb quando gzip). Tra gli altri plugin di scroll parallasse, Scroll Magic ha la migliore documentazione e risorse esterne. È perfettamente compatibile anche con il cellulare.
ScrollMagic ha molti esempi elencati. Controllali per l'ispirazione e la guida sull'utilizzo di questa libreria.
Di:
Homepage: //janpaepke.github.io/ScrollMagic/
Creato da: Jan Paepke
Installazione:
1. CDN:
2. Scarica da Github
2. skrollr
skrollr è una libreria Javascript e CSS pura e leggera, senza coinvolgere jQuery. È fondamentalmente il 'Scroll Magic semplificato per CSS'. Per usare skrollr, non è necessario conoscere Javascript o jQuery. Solo HTML e CSS sono sufficienti. skrollr usa gli attributi dei dati per animare qualsiasi elemento HTML che desideri. Uno degli svantaggi principali di skrollr è che le animazioni funzionano solo mentre si scorre la pagina. Altrimenti tutti gli effetti vengono messi in attesa. skrollr ti permette di animare tutte le proprietà CSS dei tuoi elementi HTML.
Di:
Homepage: //prinzhorn.github.io/skrollr/
Realizzato da: Prinzhorn
Installazione: download da Github
3. pagePiling.js 
Page Piling è un plugin jQuery che ti consente di creare il tuo sito web in diverse sezioni che si ammucchiano l'una sull'altra. Scorrendo, o accedendo all'URL, ogni sezione viene rivelata in un'animazione scorrevole. pagePiling.js è compatibile con tutte le piattaforme - desktop, tablet e dispositivi mobili - e funziona con la maggior parte dei browser. Si degrada dolcemente sui vecchi browser che non supportano le sue animazioni (come IE 7). Per usare il plugin, devi includere un file CSS e un file Javascript nel tuo codice HTML. pagePiling.js è inizializzato dalla funzione (document) .ready:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Per le inizializzazioni più avanzate, consultare il file README.md.
Di:
Homepage: //alvarotrigo.com/pagePiling/
Creato da: alvarotrigo
Installazione: download da Github
4. Alton
Alton è un plugin di jQuery "scroll-jacking to us". Scrolling significa che lo scroll nativo del tuo browser è disabilitato a favore dello scrolling mirato che, una volta avviato (dalla rotella del mouse o dal touchpad) ti porta al prossimo punto verticale sullo schermo, o in cima al prossimo contenitore.
Alton consente tre diversi tipi di funzionalità, chiamate "Hero", "Bookend" e "Standard". Lo standard consente di utilizzare lo scrolling a pagina intera, con ogni sezione del 100% di altezza. Una pergamena porta avanti la prossima sezione o la sezione precedente. Il Bookend ti consente di creare un'esperienza di tipo bookend mentre Hero ti permette di scorrere solo la sezione 'Hero', mentre il resto della pagina ha lo scroll nativo (riattivato).
Di:
Homepage: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Creato da: paper-leaf
Installazione: download da Github
5. Stellar.js
Stellar è un plugin jQuery attraverso il quale è possibile aggiungere facilmente effetti di scorrimento parallasse. Per eseguire, per prima cosa è necessario eseguire la funzione $ .stellar (). Le impostazioni di animazione per i singoli elementi possono essere configurate utilizzando gli attributi dei dati su quell'elemento.
Stellar ti consente anche di avere sfondi di parallasse, che sono sfondi che si riposizionano sullo scroll. Una delle funzioni più utili di Stellar.js è l'offset.
Tutti gli elementi torneranno al loro posizionamento originale quando il loro padre sfalsato incontra il bordo dello schermo, più o meno il proprio offset opzionale. Questo ti permette di creare complicati schemi di parallasse molto facilmente. (Documentazione stellare)
Di:
Homepage: //markdalgleish.com/projects/stellar.js/
Creato da: Mark Dalgeish
Installazione: download da Github
6. multiScroll.js
Questo plugin è creato dallo stesso sviluppatore (alvarotrigo) che ha creato il plugin pagePiling.js. Quello che in pratica è lo scorrimento multipla, ti consente di creare un effetto in cui ogni sezione della pagina viene caricata in due parti divise che scorrono in posizione mentre la pagina viene caricata. Controlla la homepage per vedere come appare sul tuo browser. multiScroll.js ti consente di impostare la velocità di scorrimento, l'easing, l'opzione di scorrimento della tastiera e molte altre proprietà in modo da poter personalizzare l'effetto esattamente come desideri.
Di:
Homepage: //alvarotrigo.com/multiScroll/
Creato da: alvarotrigo
Installazione: download da Github
7. ScrollMe
ScrollMe è un plugin per aggiungere semplici effetti di scroll di parallasse alla tua pagina. Può ridimensionare, ruotare, tradurre e modificare l'opacità degli elementi sulla pagina, mentre scorri verso il basso. ScrollMe non richiede Javascript e solo la conoscenza CSS è sufficiente. Aggiungendo la classe "animateme" e gli attributi dei dati richiesti, è possibile animare qualsiasi elemento HTML. ScrollMe è il modo migliore per aggiungere effetti CSS. È leggero e tutte le animazioni sono fluide, purché vengano utilizzate con moderazione.
Di:
Homepage: //scrollme.nckprsn.com/
Creato da: Nick Pearson
Installazione: download da Github
8. Scroll parallasse
Parallax Scroll è un plugin jQuery facile da usare che ti consente di creare l'effetto di scorrimento dell'immagine parallasse trovato su siti come Spotify. È abbastanza semplice da usare - basta specificare le classi CSS richieste per i possessori di immagini. Piuttosto che usare i tag, per usare questo plugin devi usare elementi che hanno un'immagine di sfondo specificata (usando la proprietà CSS `background-image`. Puoi rendere gli elementi reattivi usando le query @media CSS.
Di:
Homepage: //parallax-scroll.aenism.com/
Creato da: Aen
Installazione: download da Github
9. Jarallax
Jarallax è una libreria CSS e Javascript specializzata in effetti a scorrimento di parallasse. Jarallax è configurato usando Javascript (No jQuery, solo puro JS vaniglia). Supporta funzioni di scorrimento uniformi, attenuazione e animazione parallasse. Jarallax è supportato dalla maggior parte dei browser, attraverso piattaforme. Il sito web Jarallax ha un'ottima documentazione su come personalizzare Jarallax per le tue esigenze. Jarallax ha anche tutorial video che mostrano come configurare Jarallax per il tuo sito web e come iniziare.
Di:
Homepage: //www.jarallax.com/
Creato da: Jarallax
Installazione: download dal sito Web Jarallax
10. Superscrollorama
Superscrollorama è un plugin basato su jQuery che supporta le animazioni di scorrimento. È alimentato da TweenMax e Greensock Tweening Engine, che aumenta le prestazioni dell'animazione e la fluidità. Le animazioni di Superscrollorama sono chiamate tramite jQuery e puoi anche utilizzare la maggior parte delle funzioni di TweenMax.js. Sfortunatamente, queste animazioni non sono completamente supportate dai dispositivi mobili (perché i dispositivi touch screen gestiscono lo scrolling in modo diverso). Tuttavia, utilizzando il metodo setScrollContainerOffset, è possibile accedere agli effetti Superscrollorama sui dispositivi mobili.
Ecco il codice per fare questo:
.setScrollContainerOffset(x, y)
(x: l'x offset del scrollcontainer, y: l'x offset del scrollcontainer)
Di:
Homepage: //johnpolacek.github.io/superscrollorama/
Creato da: johnpolacek
Installazione: download da Github
VEDERE ANCHE: 10 migliori generatori di siti statici
