3D-Effekt mit HTML und JavaScript

Schwierigkeitsgrad: Fortgeschritten
Zeit: ca. 30 Min.

In diesem Tutorial zeigen wir dir, wie man in kürzester Zeit etwas Bewegung in ein statisches 2D Bild bekommt. Um einen 3D-Effekt mit HTML und JavaScript in dein Bild zu zaubern, benötigst du die kostenlose Library PixiJS und ein wenig Geschick im Umgang mit einem Bildbearbeitungsprogramm.

Erstelle zunächst einen neuen Projektordner mit folgender Dateistruktur: assets-Ordner für die Bilder, index.html, pixi.min.js, script.js und style.css.

In die index.html Datei schreibst du den rechts stehenden Basis-Code.

Damit sich das Bild später vollständig an die Breite und Höhe des Bildschirms anpassen kann, machst du folgende Angaben in der CSS-Datei.

Gehe nun auf https://github.com/pixijs/pixi.js/releases  und klicke  unter Production Build auf die neueste pixi.min.js Version. Markiere den gesamten Code mit Strg + A und füge ihn in deinem Projekt in die pixi.min.js Datei ein. In die index.html Datei eingebunden ist sie ja bereits.

Per JavaScript legen wir nun fest, auf welche Weise sich der 3D-Effekt auf unser Bild auswirken soll. Zunächst erstellen wir eine PixiJS Application. Die Auflösung passen wir mit der Zuweisung von window.innerWidth und window.innerHeight an die des Anzeigegerätes an. Dann fügen wir die Application der HTML-Seite hinzu, welche diese als neues Canvas Element erkennt. Von unserem Bild erzeugen wir nun ein Sprite und passen dieses an Höhe und Breite des Bildschirms an. Anschließend fügen wir es der Stage hinzu.

Nun müssen wir von unserem Bild eine Depth Map erstellen. Dafür brauchst du ein Bildbearbeitungsprogramm, wie z.B. das frei erhältliche Gimp. In unserem Beispiel wurde Adobe Photoshop dafür verwendet.

Nachdem du das Bild geladen hast, erstellst du eine neue Ebene und füllst diese komplett mit 100% schwarz aus. Setz die Opacity dieser Ebene auf 70%, damit du dein Bild darunter als Vorlage sehen kannst. Stell Weiß als Vordergrundfarbe ein, wähle als Werkzeug einen Pinsel mit weicher Spitze und setz die Opacity auf 20%. Beginne nun die Formen markanter Bildinhalte nachzuzeichnen. Es gilt, je weiter vorne sich etwas im Bild befindet, umso heller muss es sein. Gehe also ruhig mehrfach mit dem Pinsel über solche Bereiche, um sie heller zu bekommen. Hast du einmal über eine Stelle zu weit drüber gemalt, nimm´ einfach Schwarz als Vordergrundfarbe, stell die Opacity des Pinsels wieder auf 100% und besser die übermalten Teile des Bildes damit aus.

Da mit dieser Technik der Eindruck eines 3D-Effektes erzeugt werden soll, ist es besonders wichtig, dem Bild durch eine entsprechende Staffelung der Graustufen die nötige Tiefenwirkung zu verleihen (Vorder-, Mittel-, Hintergrund). Nicht jedes Bild ist für diesen Effekt gleichermaßen gut geeignet und es erfordert ggf. etwas Geschick und Experimentierfreude, bis sich die gewünschte Wirkung einstellt.

Hast du die Map fertiggestellt, muss das gesamte Bild mit einem leichten Blur-Effekt versehen werden. Wir haben uns für den Gaußschen Weichzeichner mit einem Radius von 10 Pixeln entschieden. Damit vermeidest du scharfe Kanten und die Übergänge zwischen den verschiedenen Ebenen werden weicher und sehen natürlicher aus.

Nun erstellen wir auch von der Depth Map ein Sprite, passen dieses an Höhe und Breite des Bildschirms an und fügen es der Stage hinzu. Danach  erzeugen wir einen Displacement-Filter von unserer Depth Map und übergeben diesen ebenfalls an die Stage. Noch ist kein 3D-Effekt zu sehen, da wir erst noch die Bewegung der Maus mit dem Bild verknüpfen müssen. Hierfür nutzen wir den Mousemove-Listener und skalieren den Displacement-Filter gemäß der Mausposition. Wir müssen die x- und y-Position der Maus um die Hälfte der Bildschirmgröße verringern, um den Nullpunkt der Maus von links oben in die Mitte des Bildschirms zu versetzen. So ist eine gleichmäßige Verschiebung des Bildes in alle Richtungen möglich und es entsteht die Illusion einer dreidimensionalen Bewegung. Das Ergebnis wird noch einmal dividiert. Mit diesem Wert (in unserem Beispiel steht er auf 40) stellst du sie Sensibilität der Maus ein.

Beachtet man beim Erstellen von Web-Applikationen ein paar einfache Gestaltungsregeln, so lassen sich in kürzester Zeit sehr ansprechende und moderne Designs erstellen. In unserem UI Design Tutorial kannst du dieses Basiswissen erlernen und auf deine eigenen Anwendungen übertragen.

Bevor man den Zeichenstift, oder in unserem Fall die Maus bzw. den Pen, in die Hand nimmt, sollte man sich ein paar grundsätzliche Fragen stellen: Welches Thema hat meine Seite? Welche Informationen soll der User bekommen? Wie gliedere ich die Inhalte? Wie gestalte ich den Informationsfluss hierarchisch sinnvoll.

Bei der Auswahl der Farben ist darauf zu achten, dass diese gut miteinander harmonieren und ein gewisser Kontrast zwischen ihnen besteht. Dies gilt sowohl für farbige Flächen, als auch für einzelne Elemente, wie Icons oder Logos, und insbesondere für die Schrift, da deren Lesbarkeit sehr stark davon abhängig ist.

Mindestens genauso wichtig wie der Inhalt einer Gestaltung sind die Abstände zwischen den einzelnen Elementen. Sind diese zu groß, wirkt das Design leer, unvollständig und langweilig. Gibt es zu wenig freien Raum, entsteht der Eindruck von Enge und das Auge ermüdet schnell, da es sich nicht entspannen kann und die Orientierung schwer fällt.

Gehen wir in unserem UI Design Tutorial nun weiter ins Detail: Dinge die wichtig sind, sollten einem auch direkt ins Auge springen. Daher sollte für die Headline, welche das Thema der Seite beschreibt, eine entsprechende Größe und evtl. ein fetter Schriftschnitt gewählt werden. Die Subheadline muss deutlich kleiner sein, der Abstand zur Headline sollte allerdings nicht zu groß sein, damit der Zusammenhang zwischen beiden nicht verloren geht.

Ein roter Button wirkt natürlich wichtiger und dominanter als ein hellgrauer Button. Buttons sollten im Verhältnis zur Headline nicht zu groß sein, sondern sich dieser unterordnen.

Befinden sich zu viele verschiedene Elemente auf engem Raum, sieht die Seite schnell überladen und unübersichtlich aus. Auch mit Effekten, wie Verläufen, Unschärfe oder Schlagschatten, sollte man möglichst sparsam umgehen. Ansonsten wirkt das Design billig und nicht besonders hochwertig. Weniger ist oftmals mehr!

Ein standardmäßiges Design sollte nicht mehr als drei verschiedene Schriftarten beinhalten. Oft reichen auch zwei, oder sogar nur eine Schriftart völlig aus. In diesem UI Design Tutorial wurde beispielsweise nur eine Schrift verwendet. Für Abwechslung sorgen verschiedene Größen und Schriftschnitte, wie fett oder kursiv. Außerdem erhöht sich mit jeder weiteren Schriftart die Ladezeit der Seite ein wenig.

Die Abstände sollten auf der gesamten Seite einheitlich sein, um eine gewisse Konsistenz zu erhalten. Hat man zwischen größeren Hauptelementen beispielsweise 100 Pixel Abstand gewählt, sollte man bei kleineren Abständen 50 oder 25 Pixel nehmen, damit diese in einem einheitlichen Größenverhältnis zueinander stehen.

• 12-spaltiges Grid zum Layouten benutzen
• Responsive Design für optimale Darstellung auf Smartphones und Tablets
• Navigation standardmäßig halten, damit der User gewohnte Funktionen sofort findet
• Styles für Farben und Schriften anlegen, um diese zentral für mehrere Elemente ändern zu können
• Flächen durch verschiedene Farben und Formen voneinander abgrenzen
• Footer als Abschluss der Seite

• Es muss sofort erkennbar sein, um welches Thema es sich handelt
• Navigationselemente müssen sofort zu finden und es muss klar sein, was sie bewirken
• Call To Action Element, z.B. Text und Button: Mehr erfahren, Probier es aus, Try your free trial now

SVG Animationen

Schwierigkeitsgrad: Fortgeschritten
Zeit: ca. 15 Min.

Dieser coole Effekt lässt sich nicht nur auf Texte, sondern Formen aller Art anwenden. Der Fantasie sind dabei keine Grenzen gesetzt.

Zunächst einmal benötigt man eine geeignete SVG-Datei. SVG steht für Scalable Vector Graphics. SVG-Dateien benötigen wenig Speicherplatz und sind unendlich hoch skalierbar, ohne dass es zu einem Qualitätsverlust, wie bei pixelbasierten Bildern, kommt.

Zum Erstellen einer SVG-Datei gibt es eine Vielzahl geeigneter Apps auf dem Markt. Wir empfehlen das für Privatanwender frei nutzbare Programm Figma¹, welches als Desktop-App oder direkt im Browser betrieben werden kann.

• Programm öffnen, neue Datei erstellen, Frame und Desktop 1440×1024 auswählen
• Etwas herauszoomen (Strg und Mausrad nach unten)
• Rectangle erstellen, so groß wie die Desktop-Fläche aufziehen und beliebig einfärben
• Textebene erzeugen und gewünschten Text eingeben (die Textebene muss sich über der Rectangle-Ebene befinden)
• Den gesamten Text markieren (Strg + A) und Schriftart sowie Größe einstellen
• Den Text mit den Positionierhilfen mittig an der Desktop-Fläche ausrichten
• Rechtsklick auf den Text und Outline Stroke wählen
• Stroke + anklicken, als Farbe Weiß (FFFFFF) und Strichstärke 5px auswählen
• Fill mit – löschen
• Stroke Outside auf Center stellen
• Advanced Stroke: Cap auf Square und Join auf Miter stellen
• Rechtsklick auf den Text, Copy/Paste, Copy as SVG, fertig!

Öffne den Code Editor deiner Wahl und lege ein neues Projekt (SVG Animationen) mit index.html, style.css und app.js an. Wir empfehlen den frei erhältlichen Quelltext-Editor Visual Studio Code®. In den Body-Tag der index.html fügst du nun den Inhalt der SVG-Datei ein. Erweitere den SVG-Tag noch mit id=“text“.

Nimm folgende Basiseinstellungen (SVG Animationen) in der style.css Datei vor und aktiviere anschließend mit Rechtsklick auf die index.html Datei Open with Live Server. Der Text sollte nun in der Mitte des neuen Browserfensters sichtbar sein.

In der SVG Animationen index.html Datei steht jeder einzelne Buchstabe des Textes in einem eigenen Path-Tag. Mit der Pseudoklasse nth-child() können diese mit CSS einzeln bearbeitet werden. Da in unserem Beispiel jeder Buchstabe animiert werden soll, brauchst du so viele Pseudoklassen, wie dein Text Buchstaben hat. Diese werden, beginnend bei eins, aufsteigend durchnummeriert. Mit stroke-dasharray werden, entsprechend der eingegebenen Pixelzahl, Lücken im Pfad erzeugt, mit stroke-dashoffset werden diese um einen bestimmten Wert verschoben. Experimentiere ruhig ein wenig mit den Werten der beiden Einstellungen, um ein Gefühl für deren Wirkung zu bekommen.

Da wir unsere Buchstaben so aussehen lassen wollen, als wenn sie aus dem Nichts auf den Bildschirm gezeichnet werden, benötigen wir die genaue Größe jedes einzelnen Pfades. Um diesen zu ermitteln, nutzen wir eine for-Schleife in JavaScript, welche uns die exakten Werte in der Konsole ausgibt. Gehe in die Browseransicht und drücke F12, um in den Entwicklermodus zu wechseln. Anschließend klickst du auf Console: Hier wird nun von jedem einzelnen Buchstaben die genaue Länge in Pixeln angezeigt.

Du musst diese Werte nun, auf ganze Zahlen aufgerundet, in die stroke-dasharray und stroke-dashoffset Felder der CSS-Datei übertragen. Danach sollte von den Buchstaben im Browser nichts mehr zu sehen sein.

Kommen wir jetzt zum eigentlichen Programmieren der SVG Animationen. Dafür erweitern wir die CSS-Datei mit folgendem Code.

Für jeden Buchstaben wird eine Verzögerung von 0.3 Sekunden eingestellt, so dass sich der Schriftzug nach und nach dynamisch aufbaut.

Mit der Füllung der Outline werden die SVG Animationen effektvoll beendet. Damit dies erst dann passiert, wenn alle Buchstaben fertig gezeichnet wurden, musst du den ease forwards Wert in der animation der text Klasse ggf. noch etwas anpassen.

Sollte es bei der Animation zu einer unvollständigen Darstellung des Textes kommen, achte darauf, dass beim Erstellen der SVG-Datei Cap auf Square und Join auf Miter steht. Einstellen kannst du dies unter Advanced Stroke, wenn du bei Stroke auf die drei kleinen Punkte klickst. Ggf. muss bei einigen Buchstaben Cap auf Round gesetzt werden. Dies machst du am besten direkt in der HTML-Datei.

¹ Figma ist kein Produkt der Triboot Technologies GmbH. Preismodelle für eine gewerbliche Nutzung entnehmen Sie bitte der Homepage des Herstellers.