I 10 migliori plugin per lo scorrimento della parallasse

I siti a scorrimento lungo sono diventati una tendenza del web design molto comune. Uno dei sottotipi più interessanti di questo sono i siti di scorrimento 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 conferisce un aspetto nuovo 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. Ecco un elenco dei migliori plug-in di scorrimento della parallasse che non solo semplificano la creazione di siti di scorrimento della parallasse, ma hanno anche una libreria di effetti di parallasse ben dotata in modo che diventi più facile e veloce per te sviluppare una pagina web di bell’aspetto .

Se volete continuare a leggere questo post su "I 10 migliori plugin per lo scorrimento della parallasse" cliccate sul pulsante "Mostra tutti" e potrete leggere il resto del contenuto gratuitamente. ebstomasborba.pt è un sito specializzato in Tecnologia, Notizie, Giochi e molti altri argomenti che potrebbero interessarvi. Se desiderate leggere altre informazioni simili a I 10 migliori plugin per lo scorrimento della parallasse, continuate a navigare sul web e iscrivetevi alle notifiche del blog per non perdere le ultime novità.

Seguir leyendo


DISCLAIMER : Prima di iniziare, tieni presente 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. ScorriMagia

ScrollMagic è uno dei plugin jquery più popolari e ricchi di funzionalità in circolazione. È una libreria javascript che ti consente di creare effetti di scorrimento apparentemente magici. Usando ScrollMagic puoi animare in base alla posizione di scorrimento. Ciò significa che puoi correggere, spostare o animare gli 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 se gzippato). 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 per ispirazione e guida sull’utilizzo di questa libreria.

Di:

Pagina iniziale: http://janpaepke.github.io/ScrollMagic/

Creato da: Jan Paepke

Installazione:

1. CDN:

 
 

2. [vc_button title=”Scarica da Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/janpaepke/ScrollMagic”]

2. skrollr

skrollr è una libreria Javascript e CSS leggera e pura, senza jQuery coinvolto. È fondamentalmente lo “Scroll Magic semplificato per CSS”. Per utilizzare skrollr, non è necessario conoscere Javascript o jQuery. Bastano 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 sospesi. skrollr ti consente di animare tutte le proprietà CSS dei tuoi elementi HTML.

Di:

Pagina iniziale: http://prinzhorn.github.io/skrollr/

Creato da: Prinzhorn

Installazione: [vc_button title=”Scarica da Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/Prinzhorn/skrollr”]

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. Durante lo scorrimento o accedendo all’URL, ogni sezione viene rivelata in un’animazione scorrevole ordinata. 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 plug-in, è necessario includere un file CSS e Javascript all’interno del codice HTML. pagePiling.js è inizializzato dalla funzione (document).ready:

$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});

Per inizializzazioni più avanzate, passare attraverso README.md.

Di:

Homepage: http://alvarotrigo.com/pagePiling/

Creato da: alvarotrigo

Installazione: [vc_button title=”Scarica da Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/alvarotrigo/pagePiling.js”]

4. Alton

Alton è un plug-in jQuery “scroll-jacking to us”. Scroll jacking significa che lo scorrimento nativo del tuo browser è disabilitato a favore di uno scorrimento mirato che, una volta 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 a pagina intera, con ogni sezione del 100% di altezza. Un rotolo fa emergere la sezione successiva o la sezione precedente. Bookend ti consente di creare un’esperienza simile a un fermalibri mentre Hero ti consente di scorrere solo la sezione “Hero”, mentre il resto della pagina ha (riattivato) lo scorrimento nativo.

Di:

Pagina iniziale: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/

Creato da: foglio di carta

Installazione: [vc_button title=”Scarica da Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/paper-leaf/alton/”]

5. Stellar.js

Stellar è un plugin jQuery attraverso il quale puoi facilmente aggiungere effetti di scorrimento parallasse. Per eseguire, devi prima 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 sullo scorrimento. Una delle funzionalità più utili di Stellar.js sono gli offset.

Tutti gli elementi torneranno al loro posizionamento originale quando il loro genitore offset incontra il bordo dello schermo, più o meno il tuo offset opzionale. Ciò consente di creare intricati schemi di parallasse molto facilmente. (Documentazione stellare)

Di:

Pagina iniziale: http://markdalgleish.com/projects/stellar.js/

Creato da: Mark Dalgeish

Installazione: [vc_button title=”Scarica da Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/markdalgleish/stellar.js”]

6. multiScroll.js

Questo plugin è stato creato dallo stesso sviluppatore (alvarotrigo) che ha realizzato il plugin pagePiling.js. Ciò che fa fondamentalmente il multi scroll è che 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 home page 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 ti serve.

Di:

Pagina iniziale: http://alvarotrigo.com/multiScroll/

Creato da: alvarotrigo

Installazione: [vc_button title=”Scarica da Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/alvarotrigo/multiscroll.js”]

7. Scorrimi

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 dei CSS è sufficiente. Aggiungendo la classe “animateme” e gli attributi di dati richiesti, puoi animare qualsiasi elemento HTML. ScrollMe è utilizzato al meglio per aggiungere effetti CSS. È leggero e tutte le animazioni sono fluide, purché le usi con moderazione.

Di:

Pagina iniziale: http://scrollme.nckprsn.com/

Creato da: Nick Pearson

Installazione: [vc_button title=”Scarica da Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/nckprsn/scrollme”]

8. Pergamena parallasse

Parallax Scroll è un plug-in 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 titolari 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 CSS @media query.

Di:

Pagina iniziale: http://parallax-scroll.aenism.com/

Creato da: Aen

Installazione: [vc_button title=”Scarica da Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/aentan/Parallax-Scroll”]

9. Jarallax

Jarallax è una libreria CSS e Javascript specializzata in effetti di scorrimento parallasse. Jarallax è configurato utilizzando Javascript (No jQuery, solo puro vanilla JS). Supporta funzioni di scorrimento uniformi, easing e animazione parallasse. Jarallax è supportato dalla maggior parte dei browser, su tutte le piattaforme. Il sito web di 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:

Pagina iniziale: http://www.jarallax.com/

Creato da: Jarallax

Installazione: [vc_button title=”Scarica dal sito Jarallax” target=”_blank” color=”default” size=”size_small” href=”http://www.jarallax.com/?page=download”]

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 Superscrollorama vengono chiamate tramite jQuery e puoi utilizzare anche la maggior parte delle funzioni TweenMax.js. Sfortunatamente, queste animazioni non sono completamente supportate dai dispositivi mobili (perché i dispositivi touch screen 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 dello scrollcontainer, y: l’offset x dello scrollcontainer)

Di:

Pagina iniziale: http://johnpolacek.github.io/superscrollorama/

Creato da: johnpolacek

Installazione: [vc_button title=”Scarica da Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/johnpolacek/superscrollorama”]

GUARDA ANCHE: I 10 migliori generatori di siti statici

Torna in alto