Gadgetshowto
I siti a scorrimento lungo sono diventati una tendenza di web design molto comune. Uno dei sottotipi più interessanti di questo sono i siti di 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 attivate e nel complesso dà un aspetto fresco a qualsiasi sito web se implementato correttamente.
Realizzare un sito a scorrimento parallasse è spesso noioso perché richiede una conoscenza approfondita di CSS, Javascript e un buon web design per funzionare. Ecco un elenco dei file I migliori plugin di scorrimento parallasse che non solo ti rendono più facile creare siti a scorrimento parallasse, ma hanno anche una libreria di effetti parallasse ben dotata in modo che diventi più facile e veloce per te sviluppare una bella pagina web.
ESCLUSIONE DI RESPONSABILITÀ: Prima di iniziare, tieni presente che per utilizzare questi plugin è richiesta 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à disponibili. È 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 gli elementi HTML mentre scorri, per qualsiasi durata desideri, e anche aggiungere facilmente effetti di parallasse al tuo sito web. È altamente personalizzabile ed è anche leggero (6kb se compresso con gzip). 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. Dai un'occhiata a loro per ispirazione e guida 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 coinvolta. È fondamentalmente lo "Scroll Magic semplificato per CSS". Per utilizzare skrollr, non è necessario conoscere Javascript o jQuery. Sono sufficienti solo HTML e CSS. skrollr utilizza attributi di 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 sospesi. 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 accumulano l'una sull'altra. Al momento dello scorrimento o accedendo all'URL, ogni sezione viene rivelata in un'animazione scorrevole pulita. pagePiling.js è compatibile con tutte le piattaforme - desktop, tablet e dispositivi mobili - e funziona con la maggior parte dei browser. Si degrada con grazia sui browser più vecchi che non supportano le sue animazioni (come IE 7). Per utilizzare il plugin, devi includere un file CSS e Javascript nel tuo HTML. pagePiling.js è inizializzato dalla funzione (document) .ready:
$ (documento) .ready (function ()
$ ('# pagepiling'). pagepiling ();
);
Per inizializzazioni più avanzate, passare attraverso README.md.
Di:
Homepage: http://alvarotrigo.com/pagePiling/
Creato da: alvarotrigo
Installazione: scarica da Github
4. Alton
Alton è un plug-in jQuery 'scroll-jacking to us'. Il jack di scorrimento significa che lo scorrimento nativo del tuo browser è disabilitato a favore dello scorrimento mirato che, quando avviato (dalla rotellina del mouse o dal touchpad), ti porta al punto verticale successivo sullo schermo o alla parte superiore del contenitore successivo.
Alton consente tre diversi tipi di funzionalità, chiamate "Hero", "Bookend" e "Standard". Standard consente di utilizzare lo scorrimento della pagina intera, con ogni sezione del 100% di altezza. Uno scorrimento porta avanti la sezione successiva o la sezione precedente. Bookend ti consente di creare un'esperienza simile a quella di un fermalibri mentre Hero ti consente di scorrere solo la sezione 'Hero', con il resto della pagina che ha 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 plugin jQuery attraverso il quale puoi facilmente aggiungere effetti di scorrimento parallasse. Per eseguire, prima devi 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 parallasse, che sono sfondi che si riposizionano durante lo scorrimento. Una delle funzionalità più utili di Stellar.js sono gli offset.
Tutti gli elementi torneranno al loro posizionamento originale quando il loro offset genitore incontra il bordo dello schermo più o meno il tuo offset opzionale. Ciò consente di creare facilmente intricati 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 plugin è stato creato dallo stesso sviluppatore (alvarotrigo) che ha creato il plugin pagePiling.js. Ciò che fondamentalmente fa il multi scroll è che ti consente di creare un effetto in cui la sezione di ogni 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'andamento, l'opzione di scorrimento della tastiera e molte altre proprietà in modo da poter personalizzare l'effetto esattamente come ti serve.
Di:
Homepage: http://alvarotrigo.com/multiScroll/
Creato da: alvarotrigo
Installazione: scarica da Github
7. ScrollMe
ScrollMe è un plugin per aggiungere semplici effetti di scorrimento 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 di dati richiesti, è possibile animare qualsiasi elemento HTML. ScrollMe è utilizzato al meglio per aggiungere effetti CSS. È leggero e tutte le animazioni sono fluide, purché le utilizzi 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 contenitori di immagini. Piuttosto che usare 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 CSS @media.
Di:
Homepage: http://parallax-scroll.aenism.com/
Creato da: Aen
Installazione: scarica da Github
9. Jarallax
Jarallax è una libreria CSS e Javascript specializzata in effetti di scorrimento parallasse. Jarallax è configurato utilizzando Javascript (No jQuery, solo puro JS vanigliato). Supporta funzionalità di scorrimento uniforme, andamento e animazione parallasse. Jarallax è supportato dalla maggior parte dei browser, su tutte le 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 configurare Jarallax per il tuo sito web e come iniziare.
Di:
Homepage: http://www.jarallax.com/
Creato da: Jarallax
Installazione: scarica 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 Superscrollorama vengono chiamate tramite jQuery e puoi utilizzare anche 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 scorrimento in un 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
