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 .

Questa pagina GitHub elenca le alternative non JS per le caratteristiche dell'interfaccia utente comuni

Questa pagina GitHub elenca le alternative non JS per le caratteristiche dell'interfaccia utente comuni

Quante volte hai voluto creare una rapida presentazione di CSS o una finestra modale ? Questi sono alcuni degli elementi dell'interfaccia utente più comuni sul Web e al giorno d'oggi è possibile crearli senza JavaScript.Certo, è possibile colpire Google alla ricerca di soluzioni. Ma perché non scegliere da una lista curata di risorse fantastiche?È q

(Consigli tecnici e di design)

20+ alternativa Bookmarklet alle tue estensioni preferite

20+ alternativa Bookmarklet alle tue estensioni preferite

Se il tuo browser è diventato lento e lento, puoi provare a risolvere il problema disabilitando o rimuovendo estensioni non necessarie (su componenti aggiuntivi a seconda del browser che stai utilizzando). Se non riesci a sopportare il pensiero di perdere una delle tue preziose estensioni, probabilmente c'è un bookmarklet che può fare la stessa cosa che fa la tua estensione .La

(Consigli tecnici e di design)