Il plugin per jQuery Midnight.js scambia al volo gli header di una pagina durante lo scroll

Midnight.js è un plugin per jQuery che permette di cambiare l’header di una pagina web durante il suo scorrimento. Tipicamente, l’header (oppure il nav) contiene il logo dell’azienda, il nome dell’organizzazione o il titolo del sito. Inserendo questo script, man mano che l’utente scende verso il basso della pagina l’header può trasformare il suo stile.

L’effetto consiste nel fatto che il nav rimane immobile sullo schermo ma si rimodella in base al contenuto mostrato dietro di sé. Per ottenere questo risultato, occorre strutturare la pagine in sezioni, ad esempio con uno sfondo di colore diverso, e precisare per ognuna di esse quali caratteristiche di stile deve adottare l’header corrispondente.

L’effetto richiede dunque che il nav riceva l’attributo CSS position:fixed, che fissa l’elemento in una posizione statica sulla finestra del browser, indipendentemente dallo scroll. Se l’header si trova in apparenza al bordo di due sezioni adiacenti, il plugin combina la porzione superiore di un header con quella inferiore del successivo, permettendo attraverso questa transizione di creare contrasti cromatici e nello stile dei font usati.


articoli... che potrebbero interessarti

creare un sito web... articoli consigliati

Azioni Photoshop, la raccolta definitiva

La collezione di azioni photoshop che vi presentiamo sono un set di azioni che accorrono in aiuto degli utenti per realizzare progetti rapidi e ben fatti.

Web design & Video background

Presentare la propria homepage in modo efficace con video background e comunicare contenuti e temi con video che esprimono il cuore del tuo sito web!

Tipped: i tooltip più belli senza il minimo sforzo

Si chiama Tipped e rivoluzionerà lo user interface design del vostro sito. L'applicativo offre un'ampia gamma di tooltip, belli e fruibili su tutti i dispositivi.

Dropdown menu css. Un componente responsive e facile da personalizzare

Organizza la navigazione del tuo sito con un responsive mobile menu. MegaDropdown è ideale per gli ecommerce e i portali di grandi dimensioni.

Template WordPress Responsive Free – Minimaluu

Minimaluu è la soluzione ideale per il tuo portfolio su WordPress se cerchi una grafica minimale, pulita e compatta ma anche fluida ed efficiente.

Sei un Webmaster? Il tuo sito web ha bisogno di Best 4 Webdesign!

Best4WebDesign archivia i principali e i migliori strumenti per Webmaster e Web Designer.