Scrollmagic: web design divertente

Nel web design una tendenza è come lo stile che è stato adottato per la realizzazione dei siti che è fortemente accettato dagli utenti, di solito in periodi temporanei. Parte delle tendenze finora nel 2016 e, a quanto pare, continuerà a dare il tono nel 2017, sono le animazioni e le lunghe sezioni con molto scorrimento.

Non è un segreto che questo stile sia abbastanza attraente e divertente per l'utente, con le animazioni che possiamo rendere la navigazione del sito intuitiva e divertente purché siano ben utilizzate. Per questo motivo abbiamo creato un tutorial per includere gli scroll animati sul tuo sito Web, utilizzando il plug-in jQuery ScrollMagic.

ScrollMagic: Web design divertente

ScrollMagic è una libreria creata in javascript per ottenere interazioni durante lo spostamento di siti Web. È una riscrittura completa del suo predecessore Superscrollorama e la sua architettura si basa su plugin che offrono una facile personalizzazione ed estensibilità.

È l'ideale se vogliamo implementare alcune delle seguenti cose:

• Animazione basata sulla posizione o sullo spostamento del sito. Attiva l'animazione o sincronizzala con il movimento dello scorrimento. Aggiungi effetto di parallasse senza troppi sforzi. Crea una pagina con scorrimento infinito, gestendo il caricamento del contenuto con ajax.

Funzioni ScrollMagic

• Prestazioni ottimizzate, è leggero, flessibile e consente l'estensibilità. Gestione degli eventi e programmazione orientata agli oggetti. Supporta la progettazione web adattiva. Supporta i movimenti in entrambe le direzioni (orizzontale e verticale) Supporta i movimenti all'interno dei container (div), anche multipli su una pagina. Funziona perfettamente con i browser: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. Nel suo repository GitHub, ha una documentazione dettagliata e molti esempi di applicazioni.

Ottieni ScrollMagic

È disponibile per ottenerlo in vari modi.

1: GitHub

git clone git: //github.com/janpaepke/ScrollMagic.git

2: Bower

bower installa scrollmagic

3: gestore pacchetti nodo

npm installa scrollmagic

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

Puoi anche leggere Come personalizzare il design di un'e-mail in Outlook

Installazione e utilizzo

L'installazione è abbastanza semplice, includiamo solo il file del kernel nei file html dove vogliamo usarlo.

;

Per l'uso, il plug-in fornisce un modello di progettazione orientato al controller, a cui vengono aggiunte una o più scene. Queste scene vengono utilizzate per definire cosa succede nei contenitori quando si spostano in un punto specifico.

Questo sarebbe un esempio di base:

// init controller var controller = new ScrollMagic.Controller (); // crea una nuova scena ScrollMagic.Scene ({durata: 100, // la scena dovrebbe durare per una distanza di scorrimento di offset 100px: 50 // avvia questa scena dopo aver fatto scorrere per 50px}).setPin ("# my-sticky- element ") // blocca l'elemento per la durata della scena.addTo (controller); // assegna la scena al controller

Un esempio più avanzato sarebbe, ottenere più offset, il suo codice sorgente sarebbe:

$ (function () {// wait for document ready // init controller var controller = new ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0, 5, {scale: 3, facilità: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", durata: 400, offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // aggiungi gli indicatori (richiede plugin).addTo (controller); // init controller orizzontale var controller_h = new ScrollMagic.Controller ({vertical: false}); // build tween horizontal var tween_h = TweenMax.to ("# animate", 0.5, {rotazione: 360, facilità: Linear.easeNone}); // build scene var scene_h = new ScrollMagic.Scene ({durata: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // aggiungi indicatori (richiede plugin).addTo (controller_h);});

Puoi trovare molti altri esempi con il loro codice sorgente nella documentazione del plugin.

Ti consigliamo come eseguire un'installazione pulita di Windows 10 utilizzando una chiavetta USB