Inhalt
- Einstieg
- Erstellen der Basis des Plattentellers
- Die Füße schaffen
- Der Arm und der Kopf
- Farben und Texturen
- Rendern und Exportieren
- Fertigstellen des Logos
- Animieren Sie das Logo
Es gibt verschiedene Möglichkeiten, 3D-Animationen im Web zu erstellen. Die meisten davon erfordern gute Kenntnisse in JavaScript und WebGL oder die Verwendung eines Plug-Ins wie Flash. Dank CSS-3D-Transformationen ist es möglich, 3D nur mit HTML und CSS zu erstellen, dies ist jedoch nicht einfach. Tridiv, meine kostenlose Online-App, vereinfacht den Vorgang und bietet eine einfache und intuitive WYSIWYG-Oberfläche, mit der Benutzer 3D-Objekte erstellen können, ohne eine einzige Codezeile schreiben zu müssen.
In diesem Tutorial erstellen und animieren wir ein Logo für "Tridiv Records", ein fiktives Plattenlabel, das nur HTML und CSS verwendet. Das Hauptbild für das Logo wird mit Tridiv in 3D erstellt. Anschließend fügen wir die typografischen Elemente mit normalem HTML und CSS hinzu.
Sie können die endgültige Animation und den Code, der sie generiert, hier sehen.
Einstieg
Wir beginnen mit der Erstellung des Plattenspielers in 3D mit Tridiv. Gehen Sie zu tridiv.com und starten Sie die App. Sie müssen entweder Chrome, Safari oder Opera 15 (oder höher) verwenden.
Bevor Sie beginnen, ist es wichtig, die Tridiv-Oberfläche zu verstehen. Der Hauptbereich des Editors besteht aus vier Ansichten: Oben links befindet sich die 3D-Ansicht, die eine vollständige Ansicht der Szene bietet. Die anderen drei Ansichten zeigen es von oben, von der Seite und von vorne. Mit diesen drei Ansichten können Sie 3D-Formen erstellen, bearbeiten und verschieben.
Die horizontale Symbolleiste ist in zwei Teile unterteilt: Im linken Teil werden Informationen zu Ihrem Dokument angezeigt. Der rechte Teil enthält Werkzeuge zum Erstellen und Bearbeiten von Formen. Das Bewegung Auswahl und Bearbeiten Auswahltasten wechseln zwischen den verschiedenen Bearbeitungsmodi.
Im Eigenschaftenbereich (der Seitenleiste) werden Dokumenteinstellungen wie Zoomen und am Raster ausrichten sowie die Eigenschaften der ausgewählten Form (Größe, Position, Drehung, Farbe usw.) angezeigt. Die für Abmessungen und Position verwendete Einheit ist ems; Die Drehwinkel sind in Grad.
Um später im Tutorial Verwirrung zu vermeiden, verwenden wir die folgende Kurzform:
w = Breite h = Höhe d = Tiefe Durchmesser = Durchmesser x Grad = Drehung in der x-Achse y Grad = Drehung in der y-Achse z Grad = Drehung in der z-Achse
Erstellen der Basis des Plattentellers
Stellen Sie zunächst den Zoomwert auf 200 ein. Um das Zeichnen der Formen zu erleichtern, aktivieren Sie die Einstellung am Raster ausrichten in Dokumenteinstellungen Abschnitt der Seitenleiste. Setzen Sie den Fangwert auf 0.125.
Die Basis des Plattentellers besteht aus einem einfachen Quader. Klicken Sie also auf Quader hinzufügen Schaltfläche in der oberen Symbolleiste. Sie sollten den Quader in allen vier Ansichten im Editor sehen.
Benennen Sie die Form in um Base Verwenden Sie das Namensfeld des Eigenschaftenbereichs (unter Formmerkmale). Der Name der Form muss ein gültiger CSS-Klassenname sein, da er in dem vom Editor generierten Code verwendet wird. Wir werden diese Klassennamen später beim Animieren des Logos verwenden. Stellen Sie daher sicher, dass Sie jede neue Form, die Sie richtig erstellen, benennen.
Stellen Sie nach dem Benennen des Quaders sicher, dass er in der Draufsicht ausgewählt ist (er sollte blau hervorgehoben sein, mit einem kreisförmigen Ring von Werkzeugen) und klicken Sie dann auf Bearbeiten Klicken Sie oben im Ring auf die Schaltfläche, um die Bearbeitungsgriffe anzuzeigen. Ziehen Sie die Steuergriffe an den Seiten des Quaders, bis Breite und Tiefe erreicht sind w = 10 und d = 8 in dem Formmerkmale.
Klicken Sie auf die Form in der Seitenansicht. Dadurch werden die Bearbeitungsgriffe in dieser Ansicht angezeigt, sodass wir die Höhe ändern können. Passen Sie die Höhe an, bis sie erreicht ist h = 2. Sie können Werte auch direkt in den Eigenschaftenbereich eingeben. Um die Ecken des Quaders abzurunden, ändern Sie die Eckenwerte im Eigenschaftenfenster in 1.75Drücken Sie dann die Taste [Eingeben] Schlüssel, um die Änderungen zu übernehmen. Du wirst so etwas haben.
Die Füße schaffen
Für die Füße des Plattentellers werden Zylinder verwendet. Fügen Sie einen Zylinder hinzu und ändern Sie seinen Durchmesser auf Durchm. = 1,75 und seine Höhe zu h = 0,5. Klick auf das Bewegung Auswahlschaltfläche in der oberen Symbolleiste, um den ziehbaren Bereich auf der Form anzuzeigen. Bewegen Sie den Zylinder unter den Boden und platzieren Sie ihn in einer der Ecken. (Möglicherweise müssen Sie es in der Draufsicht, Seitenansicht und Vorderansicht verschieben.)
Duplizieren Sie den Zylinder (drücken Sie die Taste Duplikat Taste im kreisförmigen Ring der Werkzeuge oder drücken Sie die Taste D. Schlüssel) und um den neuen Zylinder in eine andere Ecke der Basis zu bewegen. Wiederholen Sie den Vorgang, bis alle vier Füße richtig positioniert sind. Vergessen Sie nicht, die Zylinder zu benennen (z. Füße links oben, Füße rechts oben, Füße-links-unten, Füße links oben). Wenn Sie dies getan haben, sollte das Ergebnis so aussehen.
Wir werden uns nun mit dem Erstellen des Plattentellers, der Scheibe, der Armachse und der Schaltfläche befassen. Der Prozess zum Erstellen der nächsten Formen ähnelt dem für die Füße. Hier sind die Abmessungen für die verschiedenen Zylinder:
Platte: Durchm = 7; h = 0,5 Scheibe: Durchmesser = 6,75; h = 0,25 Knopf: Durchmesser = 1,5; h = 0,25 Arm-Achsen-Basis: Durchm. = 2,25; h = 0,25 Armachse: Durchmesser = 1,375; h = 1
Um die Seiten der Zylinder zu verfeinern, können Sie die Anzahl der Flächen in jeder Seite erhöhen, indem Sie das Feld Seiten im Eigenschaftenfenster verwenden. Fügen Sie nicht zu viele Seiten hinzu, da dies die globale Leistung des Editors und die endgültige Animation negativ beeinflussen kann. In diesem Fall würde ich Ihnen raten, nicht mehr als 32 Seiten für den Plattenteller und die Disc zu verwenden. Du solltest so etwas haben.
Der Arm und der Kopf
Für den Arm und den Kopf des Plattentellers werden Quader verwendet. Erstellen Sie für den Arm einen Quader (w = 0,25; h = 0,25; d = 4), dann wenden Sie eine Drehung von -33° auf der y-Achse. Erstellen Sie für den Kopf einen Quader (w = 0,5; h = 0,5; d = 1), dann wenden Sie eine Drehung von -33° auf der y-Achse. Richten Sie beide Formen am Armachszylinder aus. Das Ergebnis sollte so aussehen.
Farben und Texturen
Wir sind fast fertig mit dem Plattenteller. Der letzte Schritt besteht darin, Farben zuzuweisen und eine Textur auf das Vinyl anzuwenden (ein Bild, das die Oberfläche der Schallplatte darstellt). Um Farben zuzuweisen, wählen Sie eine Form aus und klicken Sie auf Farben Feld im Eigenschaftenbereich. Mit Tridiv können Sie einzelne Farben für jede Fläche einer Form angeben. In diesem Beispiel müssen Sie jedoch das Feld all verwenden, um die Farbe aller Flächen zu ändern. Geben Sie dazu einfach einen hexadezimalen Farbcode in das Feld ein und bestätigen Sie durch Drücken von Eingeben.
Hier sind die in diesem Beispiel verwendeten Farben:
Basis: # 0099FF Füße, Knopf, Achse, Arm und Kopf: # F2EEE5 Scheibe: # fa7f7a
Für die Textur des Vinyls ähnelt der Vorgang dem Zuweisen von Farben. Wählen Sie den Scheibenzylinder aus und klicken Sie auf Bilder Feld im Eigenschaftenbereich. Fügen Sie die URL des Bildes, das Sie auf das Vinyl anwenden möchten, in das obere Feld ein und bestätigen Sie durch Drücken von Eingeben. Sie können ein eigenes Bild verwenden oder das in diesem Beispiel verwendete herunterladen.
Sie sollten jetzt etwas haben, das so aussieht.
Rendern und Exportieren
Nachdem der Plattenspieler fertig ist, werden wir vor dem Exportieren an der Art und Weise arbeiten, wie er gerendert wird. Drücke den Vorschau Schaltfläche oben im Eigenschaftenbereich. Stellen Sie den Zoomwert auf ein 200 um den Plattenteller größer anzuzeigen. Um die schwarzen Ränder der Formen zu entfernen, gehen Sie zu Grenzen Abschnitt des Fensters und stellen Sie die Deckkraft auf ein 0. Das Ergebnis sollte ungefähr so aussehen.
Wir möchten, dass der Plattenteller von oben beleuchtet wird. Drehen Sie dazu die Szene so, dass die Oberseite des Plattentellers zu Ihnen zeigt. Die Basis sollte perfekt rechteckig aussehen. Durch Ändern der Hell- und Dunkelwerte im Abschnitt tridiv.com/d/4k6 des Eigenschaftenfensters werden die Schatten innerhalb der Szene neu generiert. Ändern Sie den Lichtwert auf 0.
Der Plattenspieler kann jetzt exportiert werden!
Fertigstellen des Logos
Wir sind bereit, den Text zum Logo hinzuzufügen und die Logoanimation zu erstellen. Drücke den Bearbeiten auf der CodePen-Schaltfläche unten links auf der Vorschau Ansicht, um den Code in CodePen zu exportieren. Es ist wichtig zu beachten, dass der von Tridiv generierte CSS-Code keine Herstellerpräfixe verwendet. Daher müssen Sie Tools wie prefixr.com oder leaverou.github.io/prefixfree verwenden, damit der Code in jedem Browser funktioniert. Schließen Sie zunächst den JavaScript-Bereich, da wir ihn nicht verwenden werden. Entfernen Sie im HTML-Bereich das Stil-Tag, das auf das angewendet wird .Szene div.
Erweitern Sie den CSS-Bereich und fügen Sie am Ende den folgenden Code hinzu:
.scene {transform: translateY (-140px) rotateX (-55deg); }}
Hier die translateY (-140px) bewegt den Plattenteller um 140 Pixel nach oben und lässt Platz für den Text darunter. Dann ist die rotateX (-55 Grad) Legt die vertikale Neigung des Plattentellers fest.
Um den Text hinzuzufügen, müssen Sie a hinzufügen .Titel div direkt nach der Eröffnung #tridiv div im HTML-Bereich. Fügen Sie innen zwei hinzu überspannt> (Haupttitel und Untertitel), getrennt durch h />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Sie müssen dann die richtigen Schriftarten und Stile anwenden. Importieren Sie im CSS-Bereich die im Logo verwendete Open Sans-Schriftart und fügen Sie die grundlegenden Stile für die Textelemente hinzu.
@ import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Zentrierung des Textblocks + grundlegende Schriftstile * / title {Position: absolut; oben: 50%; links: 50%; Rand: 0 0 0 -165px; Breite: 330px; Höhe: 5em; Schriftfamilie: "Open Sans", serifenlos; Schriftgröße: 300; Schriftgröße: 24px; Textausrichtung: Mitte; Buchstabenabstand: 1,5 em; Farbe: # 0099FF; } title hr {border: 1px solid # fa7f7a; Rand: .75em 0; } title span {display: block; } .main-title {Schriftgröße: 2.15em; } Subtitel {Texteinzug: .25em; }}
Voilà! Ihr Logo ist vollständig. Es sollte ungefähr so aussehen wie das Bild unten. Sobald Ihr 3D-Modell fertig ist, können Sie die Leistung von CSS nutzen, um es noch besser zu machen, indem Sie Stile, Animationen oder Mausereignisse hinzufügen: Behandeln Sie das 3D-Modell einfach wie jedes andere HTML-Element.
Animieren Sie das Logo
Sehen Sie hier eine Animation mit dem Logo. Wenn die Teile des Plattentellers "hineinfallen", teilen sich alle die gleiche Keyframe-Animation mit unterschiedlichen Verzögerungen. Für die Formen ist das Attribut top festgelegt 50%. Um den fallenden Effekt zu erzeugen, animieren wir das oberste Attribut von -400px zu 50%:
@keyframes fallen {0% {top: -400px; } / * Wir starten die Animation und positionieren die Form auf eine Höhe von 400px * / 100% {top: 50%; } / * dann beenden wir es an seiner ursprünglichen Position * /}
Sie können diese Animation wie folgt zu allen Formen hinzufügen:
.shape {top: -400px; Animation: fallen 1s erleichtern 0s vorwärts; }}
Setzen Sie das oberste Attribut auf -400px und fügen Sie eine Verzögerung hinzu:
.platter {Animationsverzögerung: 1,05s; } .disc {Animationsverzögerung: 1,35 s; } .button {Animationsverzögerung: 1,5 s; } ...
Erstellen Sie den endgültigen "Bounce" -Effekt mit dem drehenX Attribut:
90% {transform: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transform: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transform: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }}
So haben wir diese spezielle Version erstellt, aber denken Sie daran: Es gibt keine Grenzen!
Wörter: Julian Garnier
Dieser Artikel erschien ursprünglich in der Ausgabe 248 des Nettomagazins.
