no.hideout-lastation.com
Paradis For Designere Og Utviklere


Lag en automatisk skjult klistremerke med Headroom.js

Automatisk skjult hoder har vært stadig populært i webdesign for en stund. Mange blogger og elektroniske tidsskrifter bruker klistrede header for å holde brukerne engasjert og gi dem direkte tilgang til navigasjonen .

Medium har omdefinert denne funksjonen med et grunnleggende konsept som skjuler navigasjonen mens du ruller ned, men viser det mens du ruller opp . Dette konseptet har blitt en populær trend, og nå kan du enkelt kopiere den ved hjelp av Headroom.js .

Headroom.js er et gratis vanilj JavaScript-bibliotek uten avhengigheter eller overdreven API-funksjoner. Du legger bare til den i HTML-en din, målrettes på sidens overskrift, og la den løpe.

Hodetelefon legger ganske enkelt til og fjerner visse CSS-klasser som animerer for å vise / skjule toppteksten ved hjelp av JavaScript for å oppdage bevegelsen.

Du kan selv gjøre denne funksjonaliteten, men hvorfor bry deg? Hodetelefoner er testet og støtter alle de store nettleserne . Det spiller også fint med jQuery eller Zepto hvis du allerede har et JS-bibliotek installert på nettstedet ditt.

Du finner mange kodeeksempler i GitHub repo, men her er et enkelt eksempel som retter seg mot #header elementet:

 var myElement = document.querySelector ("# header"); // Opprett et hovedromobjekt som passerer inn i #header-elementet var topprommet = nytt topprommet (myElement); // initialiser biblioteket headroom.init (); 

init() -funksjonen har mange alternativer for å tilpasse . Du kan tilpasse de ulike elementklassene, sammen med forskjellige hendelsesutløser-tilbakeringinger hvor du kan legge inn dine egne funksjoner . For eksempel, hvis du vil at elementet skal falme etter at det er løset, vil du bruke onUnpin tilbakeringingen.

Disse alternativene er alle oppført på hovedinnstillingssiden, så sjekk den ut og se hva du synes. Hvis du vil se topprommet i aktion, ta en titt på pennen nedenfor som inneholder en full klon på hoveddemosiden .

6 LinkedIn alternativer for å vokse ditt profesjonelle nettverk

6 LinkedIn alternativer for å vokse ditt profesjonelle nettverk

Enten du er en velutdannet person med tilstrekkelig arbeidserfaring eller en nyutdannet uten erfaring, trenger du kanskje litt mer hjelp til å projisere deg selv til de riktige personene . Sosialt nettverk har blitt en så viktig del av vårt daglige liv, og det er veldig viktig for alle fagfolk å høste fordelene.Det

(Tekniske og design tips)

HTML5-drevne Web-applikasjoner: 19 Tidlige Adopters

HTML5-drevne Web-applikasjoner: 19 Tidlige Adopters

HTML5, ryktet som Flash killer, er en helt ny webteknologi som gir en revolusjon som ledes av Apple i webapplikasjonsutvikling. Den inneholder lerretselement for bilder og animasjonstegninger, støtter video og lydinnbinding, og inneholder lagringsdatabase for offline webapplikasjoner. Viktigst av alt, trenger du ikke et plugin for å få alle disse funksjonene, din nyeste nettleser støtter det.Hør

(Tekniske og design tips)