de.hideout-lastation.com
Geben Sie Dominant Color von Bild zu Hintergrund mit AdaptiveBackgrounds.js ein
Wenn man etwas im Web präsentiert, fällt es manchen Entwicklern oft schwer zu entscheiden, welche Hintergründe am besten geeignet sind. Eine gute Kombination des Hintergrunds mit dem richtigen Inhalt kann die Benutzererfahrung wesentlich beeinflussen. Für einige Designer bevorzugen sie es, einige der dominierenden Farben im Inhalt selbst zu verwenden - AdaptiveBackgrounds.js kann das automatisch für Sie erledigen.
AdaptiveBackgrounds.js ist ein kostenloses jQuery-Plugin, das Ihnen hilft, die dominierendste Farbe in Ihren Inhalten als Teil des Hintergrunds anzupassen. Es wurde auf RGBaster vom selben Entwickler gebaut.
Grundsätzlich ist es ein Plugin, um die Farbpalette eines Bildes zu extrahieren, um zur dominanten Farbe zu gelangen . Wenn die Seite das erste Mal geladen wird, extrahiert das Plugin die Farbe aus dem Bild. Die extrahierte Farbe wird dann auf das Bildelternteil angewendet. Sie können sehen, wie es in diesem gif funktioniert.
(Bildquelle: AdaptiveBackgrounds.js)
Anfangen
AdaptiveBackgrounds.js benötigt die jQuery-Bibliothek. Obwohl es auf RGBaster basiert, müssen Sie es nicht mehr hinzufügen. Sie können die Plugin-Datei von ihrer GitHub-Seite abrufen.
Fügen Sie dann alle erforderlichen Dateien wie folgt in Ihr Projekt ein:
Anpassung der dominierenden Farbe
Wir werden dieses Werkzeug ausprobieren und es verwenden, um die dominante Farbe aus diesem Bild Double Arch Foto von Kartik Ramanathan zu extrahieren, dann wenden Sie es auf das Elternelement an.
Damit die dominante Farbe in ein Element übernommen wird, sollten Sie das Bild als Kind davon verwenden. Geben Sie innerhalb des Tags " img das Attribut " data-adaptive-background, damit das Skript die Farbe erhalten kann:
Weitere Beispiele und zusätzliche Einstellungen finden Sie auf der Dokumentationsseite von AdaptiveBackgrounds.js .
Letzter Gedanke
Mit AdaptiveBackgrounds.js erhalten Sie nur eine statische Farbe. Sie können versuchen, Ihren Hintergrund ein wenig mehr Farbe für ein aufmerksamkeitsstarkes Ergebnis zu geben. Wenn Sie dies tun, finden Sie auf der AdaptiveBackgrounds.js-Demo-Seite weitere Ideen.
Erstellen Sie 3D Web Apps & Graphics mit Whitestorm.js
Webspiele haben dank WebGL und verwandter HTML5-APIs einen langen Weg zurückgelegt. Die bekannteste Open-Source-Bibliothek für 3D ist Three.js .Während Three.js mächtig ist, ist es auch komplex, von Grund auf neu zu lernen . Stattdessen können Sie Whitestorm.js, ein Open-Source-Framework für 3D-Webgrafiken, herunterladen. Es v
5 Aberglaube im Design, an die Kunden glauben
Menschen sind erstaunlich selbstbetrügerisch. Wir erlauben uns, viele Dinge zu glauben, die nicht wahr sind, einfach weil sie uns ein besseres Gefühl geben oder ein Bedürfnis erfüllen, das wir haben. Und viele andere Menschen lieben es, diese Tatsache zu nutzen. Von Werbetreibenden über Arbeitgeber bis hin zu Politikern gibt es einen nie endenden Strom von Menschen, die uns genau sagen, was wir hören wollen .Dies
