it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


Crea un'intestazione appiccicosa auto-nascondere con Headroom.js

Le intestazioni di nascondiglio automatico sono state costantemente popolari nel web design per un po 'di tempo. Molti blog e riviste online utilizzano l'intestazione appiccicosa per mantenere gli utenti impegnati e dare loro l'accesso diretto alla navigazione .

Medium ha ridefinito questa funzione con un concetto di base che nasconde la navigazione durante lo scorrimento verso il basso, ma lo mostra durante lo scorrimento verso l'alto . Questo concetto è diventato una tendenza molto popolare e ora puoi facilmente replicarlo utilizzando Headroom.js .

Headroom.js è una libreria JavaScript vanilla gratuita senza dipendenze o funzioni API eccessive. Basta aggiungerlo al codice HTML, indirizzare l'intestazione della pagina e lasciarla funzionare.

Headroom aggiunge e rimuove alcune classi CSS che animano per mostrare / nascondere l'intestazione usando JavaScript per rilevare il movimento.

Potresti fare da solo questa funzionalità ma perché preoccuparti? Headroom è testato e supporta tutti i principali browser . Funziona anche con jQuery o Zepto se hai già una libreria JS installata sul tuo sito.

Troverai un sacco di esempi di codice nel repository GitHub, ma ecco un semplice esempio che si rivolge all'elemento #header :

 var myElement = document.querySelector ("# header"); // crea un oggetto Headroom che passa nell'elemento #header var headroom = new Headroom (myElement); // inizializza la libreria headroom.init (); 

La funzione init() ha molte opzioni da personalizzare . È possibile personalizzare le diverse classi di elementi, insieme a diversi callback di trigger di eventi in cui è possibile incorporare le proprie funzioni . Ad esempio, se vuoi che l'elemento si dissolva dopo che è stato sbloccato, useresti il ​​callback onUnpin .

Queste opzioni sono tutte elencate nella pagina principale del plugin, quindi dai un'occhiata e vedi cosa ne pensi. Se vuoi vedere Headroom in azione dai un'occhiata alla penna qui sotto che contiene un clone completo della pagina demo principale .

Interfaccia utente intuitiva e come può aiutare a migliorare UX

Interfaccia utente intuitiva e come può aiutare a migliorare UX

Se vedete due designer di esperienza utente che parlano tra loro, l'argomento della discussione probabilmente ruoterà attorno a "un'interfaccia utente intuitiva" . In questi giorni, per qualsiasi progetto di design, i criteri più importanti sono probabilmente su come renderlo intuitivo .

(Consigli tecnici e di design)

Seguire le ultime tendenze del design è facile con Be Theme

Seguire le ultime tendenze del design è facile con Be Theme

(Nota del redattore: questo post è offerto da Be Theme )Le tendenze del design vanno e vengono. Alcuni sono solo mode, alcuni restano a lungo, e alcuni diventano sempreverdi. Qualunque sia il caso, i web designer devono stare al passo con queste tendenze. Altrimenti, correranno il rischio di perdere la concorrenza.

(Consigli tecnici e di design)