La condivisione è parte integrante dell'esperienza web e i designer sono sempre alla ricerca di nuovi e interessanti modi per evidenziare o mostrare la parte di condivisione delle loro pagine.
Oggi costruiremo un semplice menu di condivisione che integra un font di icone e alcune animazioni. Il prodotto finale è ispirato a Disqus, ma ha una sua peculiarità. Facciamo un salto e vediamo come funziona.
Guarda la demo finale: Clicca qui
Disqus Share Menu
L'idea per il tutorial di oggi viene dal menu dei commenti di Disqus che vedi in fondo a questo e ad ogni altro articolo di Design Shack. Quando qualcuno lascia un commento, puoi condividere quel commento tramite un piccolo menu di condivisione. Per impostazione predefinita, è semplicemente la parola "condivisione", ma quando si passa il mouse su di esso, tre icone sociali volano fuori e diventano visibili. È un effetto accattivante che è davvero semplice da costruire, quindi ho pensato che sarebbe stato divertente attraversarlo.
Passo 1. Il carattere dell'icona
Per questo menu, avremo bisogno di almeno tre icone di condivisione sociale. Per evitare i problemi di ridimensionamento che vedi nell'esempio con Disqus sopra, vorrei che fossero basati su vettori. Per tirarlo fuori potremmo andare in due modi diversi. Il primo è usare la grafica SVG, che è abbastanza facile. Forse un percorso ancora più semplice è semplicemente utilizzare un font di icone.
Dopo alcune ricerche, ho trovato Socialico da FontFabric, che è gratuito, ha tonnellate di icone ed è concesso in licenza per l'incorporamento sui siti web.
Ora, per assicurarci di avere la massima compatibilità per l'incorporamento di questo carattere nella nostra pagina, passiamo a FontSquirrel. Questo sito ci permetterà di caricare un singolo file di font e di scaricare un kit @ font-face ben confezionato completo di tutti i diversi tipi di file e codice che abbiamo bisogno di incorporare il font con i CSS.
Dopo aver scaricato il kit @ font-face, prendi tutti i file di font inclusi e gettali nella directory del sito principale per questo progetto. Se apriamo il file CSS che è stato generato, troviamo il seguente codice, che possiamo copiare e incollare nel nostro CSS.
Fin qui tutto bene! Ora abbiamo a disposizione un fantastico font che incorporerà icone sociali infinitamente scalabili nella nostra pagina. Devi apprezzare quel tipo di convenienza.
Passo 1. L'HTML
Ora è il momento di contrassegnare questo pollone. Fare questo è estremamente facile. Per prima cosa, crea un paragrafo con un nome di classe di "share", quindi digita "share"? come il testo pure.
Quindi, aggiungere tre collegamenti dopo la condivisione? testo. Userò le lettere maiuscole F, L e S, che si traducono in Facebook, Twitter e StumbleUpon nel nostro carattere di icona social.
Questo è tutto! Tutto ciò di cui abbiamo bisogno è questo semplice markup, ci rivolgeremo ai CSS per tutte le cose fantasiose.
Passo 2. CSS di paragrafo
La prima cosa che avremo bisogno di stile è il paragrafo stesso. Ci sono alcune cose fondamentali da ottenere qui. Innanzitutto, dobbiamo impostare la posizione su parente. Questo è così dopo, quando usiamo il posizionamento assoluto sulle icone, rimarranno nei limiti del paragrafo.
Successivamente, aggiungiamo margine, riempimento, dimensioni, colore e imposta il carattere. Nota che ho realizzato tutto super-dimensionato per gli scopi della demo. Sentiti libero di ridimensionare tutto questo!
Con questo pezzo di codice, ecco come dovrebbe apparire la tua pagina. Si noti che, a questo punto, le icone sono solo lettere, questo perché non abbiamo ancora impostato il carattere per i collegamenti. Prendiamoci cura di quello dopo.
Passaggio 3. CSS di paragrafo
Ora è il momento di codificare quei tag di ancoraggio. Qui useremo il posizionamento assoluto, che, di nuovo, ripristina la posizione di quei collegamenti entro i limiti del nostro paragrafo relativamente posizionato. Con il posizionamento assoluto, possiamo mettere in ordine gli articoli con il superiore e sinistra proprietà.
Quindi, prendiamo cura dell'aspetto dei collegamenti. Vogliamo impostare il colore, la decorazione del testo e il carattere. Per il carattere, assicurati di utilizzare il kit di caratteri Socialico che abbiamo creato nel primo passaggio.
Questo codice trasforma le nostre lettere nelle icone social che stiamo cercando. Il problema, naturalmente, è che sono tutti ammassati sul lato sinistro.
In realtà però, questo non è affatto un problema, è esattamente quello che vogliamo. Solo al passaggio del mouse vogliamo che questi si diffondano in un bel modo animato. Per ora però, abbiamo bisogno di rendere queste icone invisibili e aggiungere una transizione in modo che eventuali cambiamenti che si verificano in seguito saranno graduali.
Passaggio 4. Aleggiamenti di base
Abbiamo praticamente ottenuto il punto di partenza del nostro menu tutto in codice. Ora dobbiamo solo lavorare su un intero pasticcio di stati nascosti per far funzionare tutto questo. Iniziamo con alcuni effetti di base.
Il primo hover cambia il cursore sul puntatore anche se la parola? Share? non è tecnicamente un link. Il secondo riporta l'opacità per le nostre icone nascoste. Il terzo cambia il colore di un'icona quando l'utente vi passa sopra.Perché le nostre icone sono in realtà scritte, questo è veramente facile! Ciò avrebbe richiesto lo spostamento di uno sprite o la modifica dell'immagine di sfondo se avessimo utilizzato un approccio basato sull'immagine.
Passaggio 5. Muovi le icone
La prossima cosa che dobbiamo fare è spostare le icone in posizione quando l'utente si posiziona su "share". Per fare ciò, usiamo semplicemente il sinistra proprietà per spingerli verso di loro.
Il vero trucco è capire come selezionare e posizionare ogni link singolarmente. Fortunatamente, CSS3 ha un fantastico selettore che funziona perfettamente qui: nth-of-type.
Sono dei selettori complicati, quindi scomporli. Il primo blocco indica al browser che stiamo attivando un evento di hover per la condivisione? classe. Quindi, usa nth-of-type per indirizzare la prima, la seconda e la terza ancore, che afferra efficacemente ciascuna delle nostre icone.
Avviso di compatibilità
Una cosa da tenere a mente, nth-of-type è un selettore di livello tre, il che significa che sei sfortunato per IE8 e precedenti. Possiamo fare una delle due cose per risolvere questo problema. Se non ti dispiace un po 'di JavaScript, puoi usare Selectivizr per aggiungere questa funzionalità a IE6.
Se non vuoi seguire il percorso JavaScript, l'unica opzione è aggiungere un extra markup. In questo scenario, ogni ancora ha una sua classe unica.
Ora nel tuo CSS, hai un gancio unico che ti porta facilmente ad ogni singola icona. Questa soluzione è decisamente molto più ingombrante della rotta Selectivizr, ma la mancanza di JavaScript è un bonus.
Passaggio 6. Aggiungi altri effetti
Per impostazione predefinita, le nostre icone scorreranno verso destra e scompariranno. Se vogliamo rendere questo effetto un po 'più eccitante, possiamo passare alle trasformazioni CSS e ottenere una varietà di risultati diversi. Ecco alcune opzioni da prendere in considerazione, che verranno mostrate nella demo finale.
Guardalo in azione!
Con quello, siamo tutti finiti! Segui il link sottostante per visualizzare la pagina demo, quindi passa il mouse sui vari menu per vedere i frutti del nostro lavoro.
demo: Clicca qui
Conclusione
Ora hai un ottimo menu di condivisione animato che puoi usare per attirare l'attenzione sul tuo prossimo progetto. Lascia un commento qui sotto e fammi sapere cosa ne pensi e come potresti migliorarlo!