Philter.js - Kostenlose Bildänderungsbibliothek mit CSS-Filtern
Instagram ist weithin bekannt als das beliebteste Fotonetzwerk. Es verarbeitet täglich über 52 Millionen Fotos und viele davon Filter einschließen das ändern Bilder im Fluge.
Dies ist auch mit CSS-Filtern möglich bewerben Sie sich direkt im Browser. Diese benutzerdefinierten Filtereigenschaften werden von vielen Browsern unterstützt und sehen großartig aus.
Mit dem Philter JavaScript-Plugin, Sie können diesen Prozess skalieren, um Zeit zu sparen und Ihren Code in HTML zu verschieben dynamische Filtereffekte.
Durch die Verwendung dieses Plugins gewinnen Sie viel mehr Kontrolle über Ihre Bilder. Auf diese Weise können Sie auswählen, welche Filter Sie auf einzelne Bilder anwenden möchten, und ob bestimmte Filter basierend auf dem Benutzerverhalten, z. B. Schwebeflug, geändert werden sollen.
CSS unterstützt animierte Übergänge und Philter macht diesen Prozess sehr einfach. Laden Sie Philter einfach von der Homepage oder vom GitHub-Repo herunter. Sobald es zu Ihrer Webseite hinzugefügt wird, müssen Sie nur noch Fügen Sie den Initialisierungscode hinzu und lass es gehen.
Hier ist ein Beispielausschnitt aus dem GitHub-Repo:
Standardmäßig können Sie Übergänge und zusätzliche Datenattribute einrichten dass Sie in HTML anhängen können. Das url Parameter definiert den Pfad, in dem Philter nach benutzerdefinierten SVG-Dateien suchen soll, die im Filterprozess verwendet werden.
Diese zusätzlichen Filter sind mit der Bibliothek verpackt, Sie müssen sie also gar nicht bearbeiten. Sie können sie jedoch verschieben oder in eine andere Verzeichnisstruktur als Ihre aktuelle Datei einfügen, so diese Einstellung Möglicherweise muss geändert werden.
Jetzt können Sie einfach benutzerdefinierte Filter hinzufügen Recht auf Ihre HTML
Hier ist ein einfaches Beispiel:
Sie können ein finden vollständige Liste aller Filter auf GitHub, zusammen mit einem Vollständige Installationsanleitung und viele andere Codebeispiele.
Philter ist eines der coolsten kostenlosen Plugins, das an die Grenzen des modernen CSS stößt. Du kannst sogar Entwerfen Sie Ihre eigenen Filter Wenn Sie bereit sind, sich in die Codebasis einzuarbeiten und herumzubasteln.
Besuchen Sie für einen einfachen Einstieg die Philter-Homepage und laden Sie eine Kopie herunter. Sie können es in kürzester Zeit einrichten und ausführen.
