Joshua Davis
0 
2712
557
I siti a scorrimento lungo sono diventati una tendenza molto comune nel web design. Uno dei sottotipi più interessanti di questo sono i siti di scorrimento della parallasse, in cui le immagini si muovono per emettere un effetto di parallasse. Mentre l'utente scorre la pagina verso il basso, le animazioni vengono attivate e nel complesso dà un aspetto nuovo a qualsiasi sito Web se implementato correttamente.
Creare un sito a scorrimento parallasse è spesso noioso perché richiede una conoscenza approfondita di CSS, Javascript e un buon web design per riuscire. Ecco un elenco di I migliori plugin a scorrimento parallasse che non solo ti facilita la creazione di siti di scorrimento della parallasse, ma ha anche una libreria di effetti di parallasse ben dotata in modo che diventi più facile e veloce sviluppare una pagina web di bell'aspetto.
NEGAZIONE: Prima di iniziare, nota che per utilizzare questi plugin è richiesta una 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 a 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. Utilizzando ScrollMagic è possibile animare in base alla posizione di scorrimento. Ciò significa che puoi correggere, spostare o animare elementi HTML mentre scorri, per tutta la durata che desideri, e anche aggiungere facilmente effetti di parallasse al tuo sito web. È altamente personalizzabile ed è anche leggero (6kb quando compresso con zip). Tra gli altri plugin di scorrimento 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 le indicazioni sull'uso di questa libreria.
Di:
Homepage: http://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 jQuery. È fondamentalmente lo "Scroll Magic semplificato per CSS". Per utilizzare skrollr, non è necessario conoscere Javascript o jQuery. Sono sufficienti solo HTML e CSS. skrollr utilizza gli attributi dei dati per animare qualsiasi elemento HTML desiderato. Uno dei principali svantaggi di skrollr è che le animazioni funzionano solo durante lo scorrimento della pagina. Altrimenti tutti gli effetti vengono messi in attesa. skrollr ti consente di animare tutte le proprietà CSS dei tuoi elementi HTML.
Di:
Homepage: http://prinzhorn.github.io/skrollr/
Creato da: Prinzhorn
Installazione: Scarica da Github
3. pagePiling.js
Page Piling è un plug-in jQuery che ti consente di creare il tuo sito Web in diverse sezioni che si sovrappongono. Al momento dello scorrimento o accedendo all'URL, ogni sezione viene rivelata in un'animazione scorrevole ordinata. pagePiling.js è compatibile con tutte le piattaforme - desktop, tablet e mobile - e funziona con la maggior parte dei browser. Si degrada con grazia su browser meno recenti che non supportano le sue animazioni (come IE 7). Per utilizzare il plug-in, è necessario includere un CSS e un file Javascript nel codice HTML. pagePiling.js è inizializzato dalla funzione (document) .ready:
$ (document) .ready (function ()
$ ( '# Pagepiling') pagepiling ().;
);
Per inizializzazioni più avanzate, consultare README.md.
Di:
Homepage: http://alvarotrigo.com/pagePiling/
Creato da: alvarotrigo
Installazione: Scarica da Github
4. Alton
Alton è un plugin jQuery "scroll-jacking to us". Lo scroll jacking significa che lo scroll nativo del tuo browser è disabilitato a favore dello scrolling mirato che quando avviato (con la rotellina del mouse o il touchpad) ti porta al punto verticale successivo sullo schermo o all'inizio del contenitore successivo.
Alton consente tre diversi tipi di funzionalità, chiamate "Hero", "Bookend" e "Standard". Standard consente di utilizzare lo scorrimento a pagina intera, con ogni sezione del 100% di altezza. Una pergamena fa apparire la sezione successiva o la sezione precedente. Bookend ti consente di creare un'esperienza simile a quella di un bookend mentre Hero ti consente di scorrere solo nella sezione "Hero", con il resto della pagina con lo scorrimento nativo (riattivato).
Di:
Homepage: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Creato da: paper-leaf
Installazione: Scarica da Github
5. Stellar.js
Stellar è un plug-in jQuery attraverso il quale è possibile aggiungere facilmente effetti di scorrimento parallasse. Per eseguire, innanzitutto è 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 persino di avere sfondi di parallasse, che sono sfondi che si riposizionano su scroll. Una delle funzionalità più utili di Stellar.js è l'offset.
Tutti gli elementi torneranno al loro posizionamento originale quando il loro genitore offset incontra il bordo dello schermo più o meno il proprio offset opzionale. Ciò consente di creare facilmente complessi schemi di parallasse. (Documentazione stellare)
Di:
Homepage: http://markdalgleish.com/projects/stellar.js/
Creato da: Mark Dalgeish
Installazione: Scarica da Github
6. multiScroll.js
Questo plug-in è stato creato dallo stesso sviluppatore (alvarotrigo) che ha creato il plug-in pagePiling.js. Ciò che fondamentalmente fa il multi-scroll è che ti consente di creare un effetto in cui la sezione di ciascuna 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'allentamento, l'opzione di scorrimento della tastiera e molte altre proprietà in modo da poter personalizzare l'effetto esattamente come è necessario.
Di:
Homepage: http://alvarotrigo.com/multiScroll/
Creato da: alvarotrigo
Installazione: Scarica da Github
7. ScrollMe
ScrollMe è un plug-in per l'aggiunta di semplici effetti di scorrimento parallasse alla tua pagina. Può ridimensionare, ruotare, tradurre e modificare l'opacità degli elementi sulla pagina, mentre si scorre verso il basso. ScrollMe non richiede Javascript e solo la conoscenza CSS è sufficiente. Aggiungendo la classe "animateme" e gli attributi di dati richiesti, è possibile animare qualsiasi elemento HTML. ScrollMe è usato al meglio per aggiungere effetti CSS. È leggero e tutte le animazioni sono fluide, purché le usi con moderazione.
Di:
Homepage: http://scrollme.nckprsn.com/
Creato da: Nick Pearson
Installazione: Scarica da Github
8. Parallax Scroll
Parallax Scroll è un plug-in jQuery facile da usare che ti consente di creare l'effetto di scorrimento dell'immagine di parallasse trovato su siti come Spotify. È abbastanza semplice da usare: basta specificare le classi CSS richieste per i detentori di immagini. Invece di usare 
Jarallax è una libreria CSS e Javascript specializzata in effetti di scorrimento parallasse. Jarallax è configurato usando Javascript (No jQuery, solo JS vaniglia puro). Supporta funzioni di scorrimento, attenuazione e animazione di parallasse uniformi. Jarallax è supportato dalla maggior parte dei browser, su più piattaforme. Il sito web Jarallax ha un'eccellente documentazione su come personalizzare Jarallax per le tue esigenze. Jarallax ha anche tutorial video che mostrano come impostare Jarallax per il tuo sito Web e come iniziare.
Di:
Homepage: http://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 di animazione e la fluidità. Le animazioni di Superscrollorama sono chiamate tramite jQuery e puoi usare anche la maggior parte delle funzioni di TweenMax.js. Sfortunatamente, queste animazioni non sono completamente supportate dai dispositivi mobili (perché i dispositivi touchscreen gestiscono lo scorrimento in modo diverso). Tuttavia, utilizzando il metodo setScrollContainerOffset, è possibile accedere agli effetti Superscrollorama sui dispositivi mobili.
Ecco il codice per farlo:
.setScrollContainerOffset (x, y)
(x: l'offset x del contenitore di scorrimento, y: l'offset x del contenitore di scorrimento)
Di:
Homepage: http://johnpolacek.github.io/superscrollorama/
Creato da: johnpolacek
Installazione: Scarica da Github
VEDERE ANCHE: 10 migliori generatori di siti statici