Share
Cosa starai creandoLa pagina di destinazione di Crowdpilot mostra quanto SVG sia semplice e fantastico in combinazione con le animazioni JavaScript e CSS. In questo tutorial imparerai come ricreare il rotatore e la tenda diagonale di Crowdpilot, inoltre parleremo un po 'del design "piatto" e di cosa significa progettare elementi nativi digitali.
Prendi un respiro.Crowdpilot è un'app che ti consente di portare con te le orecchie (e le opinioni) dei tuoi amici ovunque. Creeremo alcune delle funzionalità del sito Web di Crowdpilot, ma per brevità questo tutorial ignorerà le discussioni sulla privacy e sulla privacy che altrimenti l'app richiederebbe.
Forse hai sentito parlare della tendenza piatta. Si sta facendo strada velocemente - se sei un web designer, probabilmente abbraccerai questo cambiamento in qualche modo.
Ma al fine di elevare la nostra discussione sul design, "piatta" non rende giustizia al cambiamento. Per una prospettiva più completa sui fattori trainanti della "tendenza piatta", dai un'occhiata a questo fantastico pezzo di Frank Chimero, "What Screens Want", da novembre 2013. Nel pezzo, Chimero sostiene che il nostro cervello si sta adattando al panorama digitale, e ciò che una volta era necessario per noi per capire, ad esempio, una cartella "cancellata" su un computer, era una rappresentazione della spazzatura che identifichiamo con la nostra rappresentazione tangibile degli scarti; un bidone della spazzatura dall'aspetto tridimensionale. Ma mentre i nostri cervelli si adattano a più rappresentazioni native della cancellazione digitale, non avremo più bisogno di queste metafore - ciò che Chimero chiama "imbottitura" (in riferimento al rivestimento extra di una pillola di aspirina oltre l'ingrediente attivo che lo rende facile da afferrare).
Dal pezzo:
Così, mentre le dimensioni di una pillola di aspirina sono limitate dalle tue piccole dita tozze, il tuo cervello può normalizzare i modelli di un'interfaccia e lasciare spazio a astrazioni più sfumate.
Detto questo, diamo un'occhiata a un buon esempio di un elemento di design nativo digitale impiegato da Crowdpilot.
La pagina relativamente semplice ha un grande pulsante di riproduzione, e lo schermo è diviso orizzontalmente da due triangoli colorati. Facendo clic sul pulsante di riproduzione viene visualizzato un video a schermo intero dietro i triangoli.
Stiamo per ricreare questo effetto.
La salsa segreta di Crowdpilot è composta da due SVG molto semplici. Abbiamo preso il codice sorgente di uno di questi SVG direttamente dal loro codice:
Possiamo guardare questo pezzo alla volta.
Accentsconagua
enable-background = "nuovo 0 0 100 100"Questa proprietà è in gran parte non supportata e fa riferimento alla composizione dello sfondo, che in realtà non è rilevante per questo caso d'uso, quindi lo ometteremo dal nostro esempio.
altezza larghezzaInoltre ignoreremo gli attributi width e height di SVG, dato che possiamo usare le proprietà CSS per ottenere l'effetto visto nell'esempio.
preserveAspectRatio = "none", viewBox = "0 0 100 100"Ciò consente al nostro SVG di adattarsi a qualsiasi rapporto. I nostri valori viewBox impostano una tela per il nostro SVG e sono principalmente utilizzati in riferimento all'elemento poligono secondario. La tela SVG (da non confondere con il tela elemento) in questo caso è 100x100 unità arbitrarie. (Una buona ipotesi: chiunque abbia creato la splash page di Crowdpilot voleva usare un viewBox 100x100 per alludere al "100 percento".)
punti poligono = "100,0 0,100 0,0"Questo crea un poligono nelle posizioni elencate come coordinate x / y, che produce: x = 100, y = 0 (in alto a destra) x = 0 y = 100 (in basso a sinistra) x = 0, y = 0 (in alto a sinistra)
Questa combinazione di poligoni con il nostro viewBox quadrato nel svg il tag principale è ciò che crea il nostro triangolo.
Una versione semplificata del nostro SVG sarà simile a questa:
Per quanto possa sembrare strano, possiamo collocarlo direttamente all'interno del nostro tag del corpo.
Per il nostro esempio, posizioneremo un logo al centro e mostreremo un'immagine di sfondo quando clicchiamo sul logo, quindi chiudiamo la tenda facendo nuovamente clic sul logo. Per fare ciò, aggiungeremo un tag di ancoraggio e lo posizioneremo assolutamente al centro dello schermo.
.envato-logo larghezza: 120px; altezza: 120 px; posizione: assoluta; superiore: 50%; a sinistra: 50%; background-image: url (envato-logo.png); dimensione di sfondo: copertina; margin-left: -60px; margin-top: -60px;
Per la nostra animazione di rivelazione, possiamo usare un po 'di JavaScript per ascoltare un clic sull'elemento di ancoraggio e attivare una classe sul corpo.
$ (". envato-logo"). on ("click", function (e) e.preventDefault (); $ ("body"). toggleClass ("curtain-open");); Vogliamo quindi assicurarci che i nostri poligoni abbiano una trasformazione CSS e una transizione applicata. Poiché sappiamo che vogliamo anche animare il colore in un secondo momento, usiamo il tutti valore per la proprietà da animare.
.poligono a tendina: first-child transform: translate3d (0, -100%, 0); . polygon aperto-aperto: last-child transform: translate3d (0, 100%, 0); poligono posizione: relativa; transizione: tutti 0.4s;
Nota che queste regole dovranno anche essere precedute dal prefisso del browser.
Suggerimento: prova qualcosa come Prefix Free per risolvere i tuoi problemi di prefisso.
Una cosa importante da capire qui è che tutto il nostro potere di animazione è realizzato con i CSS. Questo rende il nostro JavaScript molto leggero e la nostra presentazione flessibile.
Per scorrere diversi colori per il triangolo in alto a sinistra, imposteremo un intervallo per scorrere una serie di informazioni. Nell'esempio di Crowdpilot, vediamo un colore di sfondo rotante del triangolo superiore e un testo rotante in alto a sinistra. Ecco una rapida spiegazione di come realizzare questo.
Per prima cosa, imposteremo una serie di oggetti ciascuno con un colore e un testo di sfondo.
// message data var cycle_array = [color: "# c479b7", text: "Ecco un po 'di testo e quant'altro." , color: "# c4a179", testo: "SVG è incredibilmente potente." , color: "# 222", testo: "Le diagonali sono in". ]
Quindi, imposteremo un intervallo per scorrere i colori e i messaggi ogni due secondi.
var i = 0, messageHolder = $ (". message"), poly = $ ("svg polygon"). first (); var interval = setInterval (function () i = i% cycle_array.length; var nextObj = ciclo_array [i]; $ ("svg polygon"). first (). css (fill: nextObj.color); $ ( ".message"). html (nextObj.text); i ++;, 2000); Usiamo un trucco intelligente nella seconda riga del setInterval funzione. Abbiamo istituito io per iterare fino all'ultimo elemento, e lo riportiamo a 0 usando l'operatore modulo %, che restituisce il resto di una divisione. In altre parole, sulla terza iterazione, io sarà uguale a 3; 3/3 non ha un resto, quindi io sarà impostato su 0.
Il resto di questo codice è relativamente semplice; supponiamo che esista un elemento con la classe di Messaggio. Potresti anche aver notato che stiamo impostando la proprietà CSS (e non usando la funzione jQuery animate); questo perché abbiamo già impostato le transizioni nel nostro CSS.
Certo, probabilmente vuoi colori su cui il tuo testo sembra buono. Ma se vuoi un colore casuale, usiamo un trucco interessante trovato sul blog di Paul Irish per generare un esagono casuale. Lo JavaScript usato in precedenza cambierebbe in questo:
var i = 0, messageHolder = $ (". message"), poly = $ ("svg polygon"). first (); var interval = setInterval (function () i = i% cycle_array.length; var nextObj = ciclo_array [i]; $ ("svg polygon"). first (). css (fill: '#' + Math.floor ( Math.random () * 16777215) .toString (16)); $ (". Message"). Html (nextObj.text); i ++;, 2000); Se non hai bisogno di supportare tutti i browser e vuoi perdere peso andando su jQuery-less, puoi farlo con questo codice.
// jQuery-less version (function () // logo click, poligono move var envatoLogo = document.querySelector (". envato-logo"); envatoLogo.onclick = function () document.querySelector ("body"). classList.toggle ("curtain-open"); // dati del messaggio var cycle_array = [color: "# c479b7", testo: "Ecco alcuni testi e quant'altro.", color: "# c4a179", testo: "SVG è incredibilmente potente.", Color: "# 222", testo: "Le diagonali sono in."] // intervalli di messaggi var i = 0, messageHolder = document.querySelector (". Message"), poly = document.querySelector ("polygon"); var interval = setInterval (function () i = i% cycle_array.length; var nextObj = ciclo_array [i]; poly.style.fill = nextObj.color; document.querySelector (". messaggio "). innerHTML = nextObj.text; i ++;, 3000); ()); Abbiamo sostituito molte delle chiamate basate su jQuery con JavaScript semplice, grazie alla selezione nativa e alle API di manipolazione DOM in continua evoluzione.
La semplicità delle interfacce nativamente digitali combinate con la flessibilità e la potenza delle animazioni SVG e CSS3 ci dà il potere di costruire esperienze, come quella vista su Crowdpilot, con il minimo sforzo.
È importante essere informati in qualche modo sulle API e sulle tecnologie in evoluzione; per ottenere lo stesso effetto di quello che abbiamo creato in circa 100 linee di codice, avremmo dovuto fare affidamento su modi molto più difficili e inefficienti per creare forme relativamente semplici. Con l'evolversi del web, anche gli strumenti che utilizziamo per costruirlo; questo esempio mostra quanto siano potenti questi strumenti.
