JavaScript

Übersicht über von mir erstellte Hilfsfunktionen und Plugins

Auf dieser Seite werde ich nach und nach diverse von mir erstellte JavaScript-Plugins und nützliche Funktionen hinzufügen, inklusive Beschreibung, Nutzungsanleitung und Download-Links.

Projekt­beschreibung

Dieses Plugin wurde von mir speziell erstellt, um mit der exzellenten CCS-Libray "Animate.css" von Daniel Eden zusammenzuarbeiten, aber darüber hinaus werden auch eigene Animationen unterstützt, vorausgesetzt man hält sich bei deren Erstellung an den von "Animate.css" vorgegebenen Code-Stil.

Dieses Plugin übernimmt das korrekte Zuweisen der Animationen mit den entsprechenden Zusatzeinstellungen wie Animationsdauer, Anzahl der Wiederholungen und Verzögerung der Auslösezeit. Dabei achtet es darauf, eventuell vorhandene Inline-Styles vor der Zuweisung zu sichern und am Ende der Animation wiederherzustellen. Darüber hinaus bietet es noch die Möglichkeit, eine Callback-Funktion zu übergeben, die dann am Ende der Animation aufgerufen wird.

Eingesetzte Technologien:

JavaScript, CSS3, jQuery, Animate.css

Benötigt:

  • Animate.css

    Selbst wenn man ausschließlich eigene Animationen nutzen möchte, verlässt sich das Plugin auf das Vorhandensein der Grundlagen welche durch "Animate.css" geschaffen werden. Eigene Erweiterungen müssen daher auf dessen Basis erfolgen.

Projekt­beschreibung

Eine Scroll-Blockade ist ein unerwünschtes Verhalten das vor allem mobile Ansichten von Websites betrifft, aber im Prinzip immer dort auftreten kann wo scrollbare Unterelemente im Spiel sind.
Das flüssige Scrollen der Seite wird in dem Moment wo der Cursor über einem solchen Element landet, oder wenn der User eine darin beginnende Wischgeste ausführt, unterbrochen, da der User nun (in den meisten Fällen ungewollt) mit der Unterkomponete interagiert. Nimmt diese dann auch noch die gesamte Seitenbreite ein, wird der User so lange ausgebremst bis er die Subkomponente ganz nach unten gescrollt hat. Und manchmal reicht auch das nicht aus, zum Beispiel wenn man sich über einem Element mit mittels JavaScript erstellten, gestylten Scrollbalken befindet, denn diese fangen das Scroll-Event in der Regel komplett ab. Ein anderes Beispiel sind Karten, bei denen durch Scrollen dann gerne mal gezoomt wird. Selbst Platzhirsch GoogleMaps litt bis Mitte 2017 unter diesem Problem (was der Hauptgrund für die Entwicklung dieses Plugins war) und erst in der zweiten Jahreshälfte wurde das heute gängige Verhalten vollständig implementiert, dass die Map selbst ein Overlay erzeugt, welches Nutzer darauf hinweist, dass man entweder mit zwei Fingern zoomen oder beim Scrollen die Strg-Taste gedrückt halten muss.
Das beschriebene, unerwünschte Verhalten führt, wenn die ganze Seitenbreite in Anspruch genommen wird, auf Desktoprechnern dazu, dass man alle Bereiche einer Seite die sich unterhalb dem sämtliche Scrollgesten aborbierenden Element befinden, nur noch erreicht, indem man manuell den Haupt-Scrollbalken bewegt, was sehr umständlich ist. Und Mobilgeräte haben diese Option noch nicht einmal, so dass es passieren kann, dass dort ganze Teile einer Seite unerreichbar werden.

Um all dies zu verhindern, wird dieses Plugin aktiv: Es versteckt die betroffenen Unterbereiche hinter einer transparenten "Schutzschicht", die dafür sorgt dass Scrollgesten weiterhin die Seite selbst betreffen. Diese Schicht kann man ein- und ausblenden, entweder über ein klickbares Kontrollelement, oder zeitgesteuert nach wenigen Sekunden in denen der Mauscursor über dem Element verweilt.

Eingesetzte Technologien:

JavaScript, CSS3, jQuery

Benötigt: