de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Erstellen Sie eine automatisch ausgeblendete Sticky-Kopfzeile mit Headroom.js

Automatisch verborgene Header sind im Webdesign schon seit einiger Zeit sehr beliebt. Viele Blogs und Online-Magazine verwenden den Sticky-Header, um die Nutzer in Kontakt zu halten und ihnen direkten Zugriff auf die Navigation zu geben .

Medium hat diese Funktion mit einem Grundkonzept neu definiert, das die Navigation beim Scrollen nach unten, aber beim Scrollen nach oben ausblendet . Dieses Konzept ist zu einem beliebten Trend geworden und kann nun einfach mit Headroom.js repliziert werden.

Headroom.js ist eine kostenlose JavaScript-Bibliothek ohne Abhängigkeiten oder übermäßige API-Funktionen. Sie fügen es einfach zu Ihrem HTML hinzu, zielen auf den Seitenkopf und lassen es laufen.

Headroom fügt einfach bestimmte CSS-Klassen hinzu und entfernt sie, die animiert werden, um die Kopfzeile mithilfe von JavaScript zur Erkennung der Bewegung anzuzeigen / auszublenden .

Du könntest diese Funktionalität selbst machen, aber warum? Headroom wurde getestet und unterstützt alle gängigen Browser . Es spielt sogar gut mit jQuery oder Zepto, wenn Sie bereits eine JS-Bibliothek auf Ihrer Site installiert haben.

Im GitHub-Repo finden Sie viele Codebeispiele, aber hier ist ein einfaches Beispiel, das auf das #header Element #header :

 var myElement = document.querySelector ("# header"); // Erzeuge ein Headroom-Objekt, das im #header-Element übergeben wird var Headroom = new Headroom (myElement); // initialisiere die Bibliothek headroom.init (); 

Die init() -Funktion hat viele Optionen zum Anpassen . Sie können die verschiedenen Elementklassen zusammen mit verschiedenen Ereignisauslöserrückrufen anpassen, in die Sie Ihre eigenen Funktionen einbetten können . Wenn das Element beispielsweise onUnpin nachdem es entfernt wurde, verwenden Sie den Rückruf onUnpin .

Diese Optionen sind alle auf der Haupt-Plug-in-Seite aufgeführt, also schaut es euch an und seht, was ihr denkt. Wenn Sie Headroom in Aktion sehen möchten, werfen Sie einen Blick auf den Stift, der einen vollständigen Klon der Hauptdemoseite enthält.

20 schrullige monospaced Schriften für den persönlichen und kommerziellen Gebrauch

20 schrullige monospaced Schriften für den persönlichen und kommerziellen Gebrauch

Im Gegensatz zu proportionalen Schriftarten besteht die Schriftart mit einem Zeichenabstand aus Zeichen, die alle die gleiche Breite haben . Diese einzigartige Eigenschaft von monospaced Fonts macht es einfach, die Anzahl der Zeichen, die es in einer Zeile gibt, schnell zu erkennen, was übrigens einer der Vorteile ist, die monospaced Schriftarten über proportionale Schriftarten haben .

(Tech- und Design-Tipps)

20 Fotos, die dich wieder verlieben werden

20 Fotos, die dich wieder verlieben werden

Es gibt einen Grund, warum Hochzeitsfotografie so beliebt ist. Wenn es richtig gemacht wird, fängt es die Liebe ein, die zwischen zwei Seelen geteilt wird, die perfekte Romanze in der Luft, die Art, wie ein Bräutigam seine Braut in ihrem Hochzeitskleid anstarrt und den verliebten Blick, den sie hat, wenn sie ihren Ehering anzieht.W

(Tech- und Design-Tipps)