Inhoud
- Beginnen
- De basis van de draaitafel creëren
- De voeten maken
- De arm en het hoofd
- Kleuren en texturen
- Renderen en exporteren
- Het logo afmaken
- Animeer het logo
Er zijn verschillende manieren om 3D-animaties op internet te maken, de meeste vereisen een goede kennis van JavaScript en WebGL, of het gebruik van een plug-in zoals Flash. Dankzij CSS 3D-transformaties is het mogelijk om 3D te maken met alleen HTML en CSS, maar dat is niet eenvoudig. Tridiv, mijn gratis online app, vereenvoudigt het proces en biedt een eenvoudige en intuïtieve WYSIWYG-interface waarmee gebruikers 3D-objecten kunnen maken zonder een enkele regel code te schrijven.
In deze tutorial gaan we een logo maken en animeren voor ’Tridiv Records’, een fictief platenlabel, dat alleen HTML en CSS gebruikt. De belangrijkste visual voor het logo wordt in 3D gemaakt met Tridiv. Vervolgens voegen we de typografische elementen toe met gewone HTML en CSS.
Je kunt de uiteindelijke animatie en de code die deze genereert hier bekijken.
Beginnen
We beginnen met het maken van de draaitafel in 3D met Tridiv. Ga naar tridiv.com en start de app. U moet Chrome, Safari of Opera 15 (of hoger) gebruiken.
Voordat u begint, is het belangrijk om de Tridiv-interface te begrijpen. Het hoofdgedeelte van de editor bestaat uit vier weergaven: linksboven bevindt zich de 3D-weergave, die een volledig beeld van de scène biedt. De andere drie weergaven tonen het van boven, zijkant en voorkant. Met deze drie weergaven kunt u 3D-vormen maken, bewerken en verplaatsen.
De horizontale werkbalk is verdeeld in twee delen: het linkerdeel geeft informatie weer die betrekking heeft op uw document; het rechterdeel bevat gereedschappen voor het maken en bewerken van vormen. De Actie selectie en Bewerk selectieknoppen schakelen tussen de verschillende bewerkingsmodi.
In het eigenschappenvenster (de zijbalk) worden documentinstellingen weergegeven, zoals zoomen en uitlijnen op raster, en de eigenschappen van de geselecteerde vorm (grootte, positie, rotatie, kleur, enzovoort). De eenheid die wordt gebruikt voor afmetingen en positie is ems; de draaihoeken zijn in graden.
Om verwarring later in de tutorial te voorkomen, gebruiken we de volgende afkorting:
w = breedte h = hoogte d = diepte diam = diameter x deg = rotatie in de x-as y deg = rotatie in de y-as z deg = rotatie in de z-as
De basis van de draaitafel creëren
Begin met het instellen van de zoomwaarde op 200. Om te helpen bij het tekenen van de vormen, activeert u de instelling Uitlijnen op raster in het Documentinstellingen sectie van de zijbalk. Stel de snapwaarde in op 0.125.
De basis van de draaitafel bestaat uit een eenvoudige balk, dus klik op de Voeg kubusvormig toe knop in de bovenste werkbalk. U zou de balk in alle vier de weergaven in de editor moeten zien verschijnen.
Hernoem de vorm naar baseren met behulp van het naamveld van het eigenschappenvenster (onder Vormeigenschappen). De naam van de vorm moet een geldige CSS-klassenaam zijn, omdat deze wordt gebruikt in de code die door de editor wordt gegenereerd. We zullen deze klassenamen later gebruiken bij het animeren van het logo, dus zorg ervoor dat je elke nieuwe vorm die je maakt de juiste naam geeft.
Zodra het blokje een naam heeft gekregen, zorg er dan voor dat het is geselecteerd in het bovenaanzicht (het moet blauw worden gemarkeerd, met een cirkelvormige ring met gereedschappen eromheen), en klik vervolgens op de knop Bewerk knop aan de bovenkant van de ring om de bewerkingshandvatten weer te geven. Versleep de bedieningshendels aan de zijkanten van de balk totdat de breedte en diepte zijn bereikt w = 10 en d = 8 in de Vormeigenschappen.
Klik op de vorm in het zijaanzicht. Dit toont de bewerkingshandvatten in deze weergave, waardoor we de hoogte kunnen wijzigen. Pas de hoogte aan totdat deze bereikt h = 2. U kunt waarden ook rechtstreeks in het eigenschappenvenster typen. Om de hoeken van de balk af te ronden, wijzigt u de hoekwaarden in het eigenschappenvenster in 1.75en druk vervolgens op [Enter] toets om de wijzigingen toe te passen. Je krijgt zoiets als dit.
De voeten maken
Voor de voeten van de draaitafel gaan we cilinders gebruiken. Voeg een cilinder toe en verander de diameter in diam = 1,75 en zijn hoogte tot h = 0,5. Klik op de Actie selectieknop in de bovenste werkbalk om het versleepbare gebied op de vorm weer te geven. Verplaats de cilinder onder de basis en plaats deze in een van de hoeken. (Mogelijk moet u het in de boven-, zij- en vooraanzichten verplaatsen.)
Dupliceer de cilinder (druk op de Duplicaat knop in de ronde ring met gereedschappen, of druk op de D sleutel) en om de nieuwe cilinder naar een andere hoek van de basis te verplaatsen. Herhaal het proces totdat alle vier de voetjes correct zijn geplaatst. Vergeet niet de cilinders een naam te geven (bijvoorbeeld voeten-links-boven, voeten-rechts-boven, voeten-links-onder, voeten-links-boven). Als u dat heeft gedaan, zou het resultaat er als volgt uit moeten zien.
We gaan nu kijken naar het maken van de schotel, schijf, arm-as en knop. Het proces voor het maken van de volgende vormen is vergelijkbaar met dat voor de voeten. Hier zijn de afmetingen die worden gebruikt voor de verschillende cilinders:
schotel: diam = 7; h = 0,5 schijf: diam = 6,75; h = 0,25 knop: diam = 1,5; h = 0,25 arm-as-basis: diam = 2,25; h = 0,25 arm-as: diam = 1.375; h = 1
Om de zijkanten van de cilinders te verfijnen, kunt u het aantal gezichten in elke cilinder vergroten door het veld zijden in het eigenschappenvenster te gebruiken. Voeg niet te veel kanten toe, aangezien dit een negatieve invloed kan hebben op de algemene prestaties van de editor en de uiteindelijke animatie. In dit geval raad ik je aan om niet meer dan 32 kanten te gebruiken voor het plateau en de schijf. Je zou zoiets moeten hebben.
De arm en het hoofd
Voor de arm en de kop van de draaitafel gaan we balken gebruiken. Maak voor de arm een balk (w = 0,25; h = 0,25; d = 4), en pas vervolgens een rotatie toe van -33° op de y-as. Maak voor het hoofd een balk (w = 0,5; h = 0,5; d = 1), en pas vervolgens een rotatie toe van -33° op de y-as. Lijn beide vormen uit met de arm-ascilinder. Het resultaat zou er als volgt uit moeten zien.
Kleuren en texturen
We zijn bijna klaar met de draaitafel. De laatste stap is om kleuren toe te wijzen en een textuur op het vinyl aan te brengen (een afbeelding die het oppervlak van de plaat voorstelt). Om kleuren toe te wijzen, selecteert u een vorm en klikt u op kleuren veld in het eigenschappenvenster. Met Tridiv kunt u individuele kleuren voor elk vlak van een vorm specificeren, maar in dit voorbeeld moeten we het veld alles gebruiken om de kleur van alle vlakken te wijzigen. Om dit te doen, voert u gewoon een hexadecimale kleurcode in het veld in en bevestigt u door op te drukken Enter.
Dit zijn de kleuren die in dit voorbeeld worden gebruikt:
basis: # 0099FF voeten, knop, as, arm en hoofd: # F2EEE5 schijf: # fa7f7a
Voor de textuur van het vinyl is het proces vergelijkbaar met het toewijzen van kleuren. Selecteer de schijfcilinder en klik op de afbeeldingen veld in het eigenschappenvenster. Plak de URL van de afbeelding die u op het vinyl wilt toepassen in het bovenste veld en bevestig door op te drukken Enter. U kunt een eigen afbeelding gebruiken of de afbeelding downloaden die in dit voorbeeld wordt gebruikt.
U zou nu iets moeten hebben dat er zo uitziet.
Renderen en exporteren
Nu de draaitafel klaar is, gaan we aan de slag met de manier waarop deze wordt weergegeven voordat we deze exporteren. Klik op de Voorbeeld knop bovenaan het eigenschappenvenster. Stel de zoomwaarde in op 200 om de draaitafel groter weer te geven. Om de zwarte randen van de vormen te verwijderen, gaat u naar het Grenzen sectie van het paneel en stel de dekking in op 0. Het resultaat zou er ongeveer zo uit moeten zien.
We willen dat de draaitafel van bovenaf wordt verlicht. Om dit te doen, draait u de scène zodanig dat de bovenkant van de draaitafel naar u toe is gericht. De basis moet er perfect rechthoekig uitzien. Door de lichte en donkere waarden in de sectie tridiv.com/d/4k6 van het eigenschappenvenster te wijzigen, worden de schaduwen in de scène opnieuw gegenereerd. Verander de lichtwaarde in 0.
De draaitafel is nu klaar om te exporteren!
Het logo afmaken
We zijn klaar om de tekst aan het logo toe te voegen en de logo-animatie te maken. Klik op de Bewerk op CodePen-knop aan de onderkant links van de Voorbeeld weergave om de code naar CodePen te exporteren. Het is belangrijk op te merken dat de CSS-code die door Tridiv wordt gegenereerd, geen leveranciersvoorvoegsels gebruikt, dus u moet tools zoals prefixr.com of leaverou.github.io/prefixfree gebruiken om de code in elke browser functioneel te maken. Begin met het sluiten van het JavaScript-paneel, aangezien we het niet gaan gebruiken. Verwijder in het HTML-deelvenster de stijltag die is toegepast op het .tafereel div.
Vouw het CSS-paneel uit en voeg aan het einde de volgende code toe:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Hier de translateY (-140px) verplaatst de draaitafel 140px omhoog, waardoor er ruimte overblijft voor de tekst eronder. Dan de rotateX (-55deg) stelt de verticale helling van de draaitafel in.
Om de tekst toe te voegen, moet u een .titel div direct na de opening #tridiv div in het HTML-paneel. Voeg er binnen twee aan toe overspanningen> (.hoofdtitel en .subtitel), gescheiden door uur />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
U moet dan de juiste lettertypen en stijlen toepassen. Importeer in het CSS-paneel het Open Sans-lettertype dat in het logo wordt gebruikt en voeg de basisstijlen voor de tekstelementen toe.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centreren van tekstblokken + basislettertypestijlen * / titel {positie: absoluut; boven: 50%; links: 50%; marge: 0 0 0 -165px; breedte: 330px; hoogte: 5em; font-family: ’Open Sans’, sans-serif; lettertype-gewicht: 300; lettergrootte: 24px; text-align: center; letterafstand: 1.5em; kleur: # 0099FF; } title hr {border: 1px solid # fa7f7a; marge: .75em 0; } title span {display: block; } .main-title {font-size: 2.15em; } .sub-title {text-indent: .25em; }
Voila! Uw logo is compleet. Het zou er ongeveer zo uit moeten zien als de afbeelding hieronder. Zodra uw 3D-model klaar is, kunt u de kracht van CSS gebruiken om het nog beter te maken door stijlen, animaties of muisgebeurtenissen toe te voegen: behandel het 3D-model gewoon als elk ander HTML-element.
Animeer het logo
Bekijk hier een animatie met het logo. Terwijl de delen van de draaitafel ’vallen’, delen ze allemaal dezelfde keyframe-animatie met verschillende vertragingen. Voor de vormen is het bovenste kenmerk ingesteld op 50%. Om het vallende effect te creëren, animeren we het bovenste attribuut van -400 px naar 50%:
@keyframes vallen {0% {top: -400px; } / * We starten de animatie met het positioneren van de vorm op een hoogte van 400px * / 100% {top: 50%; } / * dan eindigen we het op de oorspronkelijke positie * /}
U kunt deze animatie als volgt aan alle vormen toevoegen:
.shape {top: -400px; animatie: val 1s gemak 0s vooruit; }
Stel het bovenste kenmerk in op -400 px en voeg een vertraging toe:
.platter {animatie-vertraging: 1.05s; } .disc {animatie-vertraging: 1.35s; } .button {animatie-vertraging: 1.5s; } ...
Creëer het uiteindelijke 'bounce'-effect met de rotateX attribuut:
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); }
Dat is hoe we deze specifieke versie hebben gemaakt, maar onthoud: er zijn geen limieten!
Woorden: Julian Garnier
Dit artikel is oorspronkelijk verschenen in netmagazine 248.
