Oggi finiremo il nostro tutorial cu3er in due parti.
Per chi non lo sapesse, Cu3er è un fantastico dispositivo di scorrimento 3D che è gratuito e facile da configurare.
Questa sezione esaminerà come modificare la presentazione utilizzando alcune delle numerose opzioni di personalizzazione di Cu3er. Per lo più modificheremo una pagina XML, ma non preoccuparti che diventerà troppo techie. Anche se non sai cosa sia XML, è tutto abbastanza semplice e facile da capire.
Precedentemente su Design Shack
Nella parte 1 del tutorial di Cu3er, abbiamo scaricato Cu3er e modificato la pagina di esempio per vedere quanto è facile incorporare la presentazione nei tuoi progetti.
Prima di iniziare, potresti voler controllare la demo e scaricare i file sorgente.
Il file di configurazione
Se hai seguito l'ultima volta il tuo file config.xml non dovrebbe essere toccato dal file originale che abbiamo scaricato dal sito web cu3er.
La demo e i file associati sopra sono stati leggermente modificati per includere una funzione di avvio automatico, ma oggi inizieremo a tornare al file predefinito solo per avere una lavagna pulita.
Prepara il tuo esempio e apri il file di configurazione e inizieremo! Ci dovrebbero essere solo due sezioni in questo file: impostazioni e diapositive. Per impostazione predefinita, la sezione delle impostazioni contiene solo il codice per i pulsanti precedente e successivo per navigare nella presentazione. Sentiti libero di giocare o eliminare queste impostazioni da solo, ma le lasceremo così com'è perché mi piace avere la possibilità di navigare manualmente nella presentazione.
Avvio automatico
Per impostazione predefinita, la presentazione di Cu3er è statica e non cambierà le immagini finché non si fa clic sul pulsante successivo. Tuttavia, ci sono molti casi in cui si potrebbe desiderare che la presentazione venga eseguita automaticamente al caricamento della pagina.
Per fare ciò, copiare e incollare il seguente codice dalla documentazione di Cu3er nella sezione delle impostazioni del file XML.
La prima parte di questo codice controlla per quanto tempo il timer è su ogni diapositiva e come appare. Hai due opzioni qui: lineare o circolare. L'opzione circolare è un grafico a torta che si riempie gradualmente e l'opzione lineare è un rettangolo con uno sweep orizzontale. Il tempo è il numero di secondi in cui la diapositiva verrà mostrata prima di proseguire.
La parte interpolata è un principio di animazione e ha a che fare con la linearità della velocità dell'animazione nel tempo. I valori più importanti qui sono le coordinate x, y, che ti permettono di impostare la posizione del timer, l'altezza e la larghezza, che ti permettono di impostare le dimensioni del timer, e la tinta, che ti dà il controllo sul colore del timer.
Quindi, se volessimo un timer circolare, una durata di due secondi, con una dimensione di 50 px e un colore di blu, utilizzeremmo il seguente codice:
Personalizzazione di diapositive
L'aggiunta di diapositive extra è semplicissima. Vai alla sezione delle diapositive e copia e incolla una parte della porzione di codice tra i tag delle diapositive e modifica il nome dell'immagine con il nome del tuo jpg.
Se si desidera inserire un'immagine chiamata sunrise.jpg, il codice sarà simile a questo:
Aggiunta di collegamenti a diapositive
Utilizza il seguente snippet per aggiungere un collegamento in modo che quando un utente fa clic su una diapositiva, il collegamento venga aperto (sostituisci il link con il tuo).
Aggiunta di descrizioni alle diapositive
Cu3er ti dà la possibilità di aggiungere sia un'intestazione sia un paragrafo per ogni diapositiva. Questa descrizione può facoltativamente avere un collegamento associato diverso dal collegamento allegato alla diapositiva.
Lo snippet di codice per realizzare questo viene subito dopo l'URL della diapositiva.
Questo produrrà un risultato simile a quello qui sotto.
Personalizzazione della casella Descrizione
Per personalizzare le impostazioni della descrizione, inserisci il seguente codice nell'area delle impostazioni e modificalo secondo le tue preferenze.
Qui puoi assegnare caratteri, dimensioni del testo, colore del testo e margine del testo sia per l'intestazione che per il paragrafo. Le informazioni di interpolazione consentono di posizionare la casella che contiene il testo e di determinarne l'altezza, il colore e le proprietà di animazione. Poiché le mie diapositive sono larghe 600 px, imposto il mio valore x e la mia larghezza in modo che x volte due più larghezza sia uguale a 600 (150 * 2 + 300) per centrare la descrizione orizzontalmente sulla diapositiva.
Queste impostazioni mi danno i seguenti risultati:
Definire la transizione 3D
L'attributo personalizzabile finale che esamineremo è il più divertente: le transizioni 3D. Cu3er ti dà il controllo completo sulla natura di queste transizioni. Per illustrare, diamo un'occhiata al seguente codice:
Come puoi vedere, qui abbiamo inserito alcuni attributi di transizione tra due diapositive. Per prima cosa diciamo a Cu3er quante fette vogliamo nella transizione. Questo può essere qualsiasi numero tu desideri, ma tieni a mente che l'animazione inizia a diventare incerta intorno ai 30. Puoi anche decidere se tagliare l'immagine verticalmente o orizzontalmente. Se verticalmente, si sceglie se si desidera che la direzione sia in alto o in basso. Se orizzontalmente, scegli una direzione sinistra o destra.
Anche mostrato sopra è lo shader. Le opzioni qui sono none, flat e phong, l'ultima di queste è una sorta di vignetta.
È inoltre possibile impostare il colore del cubo (0x333333), la durata (in secondi) e il ritardo (in secondi) per ciascuna transizione. Ricorda solo di posizionare sempre le proprietà di transizione tra due diapositive e non all'interno di una diapositiva.
Conclusione
Si spera che ora sia possibile lanciare facilmente uno slideshow Cu3er in una pagina Web e personalizzare la maggior parte delle sue impostazioni. Per ulteriori informazioni sul tweaking della presentazione, assicurati di fermarti alla pagina della documentazione.
Cu3er è piuttosto l'elemento caldo e viene utilizzato in un numero di temi più venduti su ThemeForest.Lavorarlo nel tuo portafoglio di offerte è un modo semplice e semplice per stupire i potenziali clienti.
Facci sapere se ci sono altri plugin o giocattoli web lucenti che vorresti vederci andare. Siamo sempre alla ricerca di nuove tecnologie interessanti da apprendere e condividere!