Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Come creare uno Slider Split-Screen con JavaScript

by
Difficulty:IntermediateLength:ShortLanguages:

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

Nel video tutorial di oggi abbiamo intenzione di mostrare come creare un elemento slider "split-screen" (o UI, come preferite) utilizzando JavaScript. L'ispirazione per realizzarlo proviene da una pagina del sito Corsair; vediamo come possiamo costruirne uno per i nostri progetti.

Cosa stiamo andando a realizzare

Diamo prima un'occhiata a una demo di quello che stiamo sviluppando. Guardate il progetto su CodePen, o prendete i file da GitHub.

Guardate lo Screencast

1. Costruite i Pannelli

Quindi come è fatto? Iniziate con la realizzazione di due pannelli separati nel markup HTML. Abbiamo usato due elementi div con una classe panel. Il primo ha una classe aggiuntiva bottom, l'altro una classe aggiuntiva top. Ognuno di essi contiene un altro div per racchiudere il contenuto.

Inserite qualsiasi contenuto vogliate (immagini, headings etc.) all'interno dei div content.

Fatto ciò, aggiungete un nuovo div, prima del tag di chiusura splitview, in modo che agisca come handler.

2. Aggiungete alcuni stili per disporre i Pannelli

I primi stili disporranno i due pannelli uno sopra l'altro, assicurandosi che siano anche fluidi.

Date stile ad ogni singolo pannello –top e bottom– diversamente, ad esempio dando loro un diverso background-color, e create lo stile dei contenuti all'interno di essi come più vi aggrada. Una cosa da notare è lo z-index di ciascuno, per essere sicuri che siano disposti nell'ordine corretto.

3. Applicate una semplice maschera

Abbiamo ora il nostro pannello superiore che copre completamente quello sottostante, quindi cerchiamo di sperimentare riducendo la larghezza:

Dovreste ora trovarvi qualcosa di simile a questo, con il pannello superiore che raggiunge la posizione del centro (50vw) della pagina:

4. Aggiungete JavaScript

Ora che le cose funzionano con il CSS, passiamo a JavaScript e vediamo se possiamo animare l'effetto di questa maschera scorrevole. Inizieremo chiedendo al browser di eseguire una funzione, ma solo una volta che il DOM è stato caricato:

Il resto del nostro codice andrà all'interno della funzione, tra le parentesi graffe.

Successivamente assegneremo alcune variabili selezionando l'elemento genitore, il pannello superiore (vale a dire l'unico che cambieremo) e l'handler.

5. Create l'handler

Prima di andare avanti, diamo stile all'handler.

È una barra gialla di 5px di larghezza, con altezza del container e posta al centro del viewport. Ha un z-index pari a 3 per essere sicuri che sia collocata in alto.

Facciamola muovere

Vogliamo prendere le coordinate x del cursore del mouse ogni volta che lo muoviamo all'interno del viewport. Spostiamo quindi l'handler e impostiamo la larghezza del pannello superiore secondo tali coordinate.

Iniziamo con un event listener sull'elemento padre e quindi impostiamo la proprietà dello stile left dell'handler in misura uguale al valore event.clientX.

La parte soprastante si occupa dell'handler che si muove, ridimensioniamo ora il pannello, rendendolo nuovamente uguale a event.clientX.

Finito!

Ben fatto, avete raggiunto la fine; con del semplice CSS e JavaScript abbiamo creato un brillante effetto maschera scorrevole a schermo diviso. Per procedere oltre, come vedete nel video, possiamo anche inclinare l'handler – controllate la demo su CodePen per vedere come è stato ottenuto questo effetto!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.