Oggi sto lavorando ad un altro fantastico download gratuito per PixelsDaily. Qui sarai in grado di vedere i miei processi mentali, gli obiettivi e il codice, e in seguito sarai in grado di scaricare l'intero progetto da utilizzare nel tuo lavoro.
Fondamentalmente, il nostro obiettivo qui è creare un effetto semplice in modo che quando l'utente si posiziona sopra un'immagine, viene visualizzata una etichetta di testo nascosta. Questo è ovviamente estremamente facile da fare, quindi faremo un ulteriore passo avanti costruendo un sacco di opzioni tra cui lo sviluppatore può scegliere. Ciò ti fornirà alcune buone pratiche su come creare effetti flessibili che possono essere applicati in modi diversi senza troppa ripetizione del codice.
Sbirciata
Se sei ansioso di vedere il risultato prima di passare attraverso il codice, controlla la demo qui sotto e passa il mouse sopra ogni immagine per vedere come è diversa.
demo: Clicca qui per il lancio.
Il programma
Ecco cosa vogliamo: una semplice etichetta di testo con uno sfondo nero da far apparire sull'immagine quando l'utente si libra. Ora, dal momento che sarà animato, ho trovato un totale di dieci diverse varianti che equivalgono a circa lo stesso elemento utilizzato in diversi modi:
Abbiamo due parametri principali da impostare qui. Il primo è dove l'etichetta si ferma (in alto, al centro o in basso) e il secondo è da dove verrà (in alto, a destra, in basso, a sinistra). Quello che vorremmo fare è fornire una struttura HTML ripetibile di base da utilizzare per gli sviluppatori durante l'aggiunta di un'immagine, quindi assegnare loro alcune classi che possono essere applicate per controllare tutto ciò che riguarda il comportamento dell'etichetta. Con questo in mente, possiamo procedere al primo passo.
L'HTML
Aggiornamento di stato
Come puoi vedere nell'immagine qui sotto, tutte le nostre etichette stanno funzionando ora e sembrano perfette. Nota che sono tutti posizionati in alto per impostazione predefinita, tienilo a mente mentre andiamo avanti e li spingiamo in giro.
Posiziona ogni etichetta
Da qui, abbiamo molto stile da fare. Abbiamo davvero un po 'di stile da fare, ma dobbiamo farlo dieci volte diverse perché ogni etichetta è unica. Per ogni etichetta, dobbiamo posizionare l'elemento del paragrafo fuori dai limiti dell'immagine, quindi riportarlo su hover.
Per iniziare, vogliamo un'etichetta che inizi appena sopra un'immagine che volerà verso il basso sul passaggio del mouse e si fermerà in alto. Per fare ciò, impostiamo il valore massimo su -50%, che poi passa allo 0% al passaggio del mouse. Allo stesso modo, per lo stesso effetto dal basso, iniziamo con un valore inferiore di -50% e lo cambiamo allo 0%.
Il mio metodo qui è molto specifico quindi prendi nota. La parte più difficile di questa idea è capire come farlo funzionare su una vasta gamma di dimensioni dell'immagine. Non vogliamo che lo sviluppatore debba inserire manualmente una dimensione ogni volta, dovrebbe funzionare solo quando qualcuno schiaffeggia sulle classi richieste.
Utilizzando le proprietà superiore e inferiore nel modo in cui siamo, ci assicuriamo che nulla sia specifico per la dimensione delle immagini. Verrà il valore dello 0% nella proprietà bottom sempre spingere la nostra etichetta fino in fondo all'immagine a cui la applichiamo, non importa quanto lontano possa essere.
Quindi, dobbiamo modellare le nostre etichette che oscillano dai lati. Possiamo oscillare da in alto a sinistra, in alto a destra, in basso a sinistra e in basso a destra. Ecco i valori per questi. Il metodo è semplice e proprio come i due siamo appena passati. Ogni volta che impostiamo la posizione di riposo su un lato, quindi riportarlo in vista con l'hover. Per questi, le proprietà sinistra e destra entrano in gioco in aggiunta alle proprietà superiore e inferiore.
Per finire, dobbiamo codificare le nostre etichette centrate. Questi sono i più difficili da capire. Al passaggio del mouse, si desidera posizionare il cinquanta per cento del modo verso il basso o verso l'alto, meno la metà dell'altezza dell'etichetta. Quindi, quando vogliamo fare il salto dall'alto, impostiamo il valore massimo al 50% e applichiamo un margine negativo di 20px (metà dell'altezza delle nostre etichette). Sfortunatamente, ciò presuppone una singola riga di testo e la specifica dimensione del carattere che abbiamo impostato. Se uno cambia, l'altezza sarà diversa e l'oggetto non sarà centrato. L'unico modo che conosco è usare un qualche tipo di display: tabella impostare.
Opzionale: andare oltre
Ora, se sei pazzo per la ripetizione, puoi andare ancora oltre assicurandoti che il tuo codice sia il più breve possibile. Abbiamo separato ciascuna etichetta sopra per motivi di leggibilità, ma il risultato è un sacco di valori che si ripetono per tutto. Potremmo entrare e combinare manualmente selettori o usare Sass @extend e ottenere un risultato molto più conciso. Il compromesso qui, naturalmente, è che stai ripetendo i tuoi selezionatori perché alcuni appaiono in più posti.
Guardalo in azione
Abbiamo finito! Assicurati di controllare la demo dal vivo qui sotto e passa il mouse sopra ogni immagine per vedere il diverso effetto.
demo: Clicca qui per il lancio.
Conclusione
Questo progetto ci ha costretti a pensare molto bene. Abbiamo dovuto considerare più volte come mantenere il nostro codice breve e privo di ripetizioni. Abbiamo anche chiesto con coerenza cosa fosse meglio dare che desideriamo che gli altri siano in grado di scaricare e modificare il nostro codice con pochissimi problemi. A volte, quando abbiamo visto un modo per rendere il nostro codice più conciso, è venuto al prezzo della leggibilità e della facilità d'uso, che non è il metodo migliore per un download gratuito.
Sentiti libero di prendere questo codice e usarlo come preferisci. Tieni d'occhio il download anche nelle prossime settimane su PixelsDaily.