Innehåll
- Komma igång
- Skapa basen på skivspelaren
- Skapa fötterna
- Armen och huvudet
- Färger och texturer
- Rendering och export
- Avsluta logotypen
- Animera logotypen
Det finns flera sätt att skapa 3D-animering på webben, de flesta av dem kräver god kunskap om JavaScript och WebGL, eller användning av ett plugin-program som Flash. Tack vare CSS 3D-omvandlingar är det möjligt att skapa 3D med endast HTML och CSS, men det är inte lätt att göra det. Tridiv, min gratis onlineapp, förenklar processen och erbjuder ett enkelt och intuitivt WYSIWYG-gränssnitt som gör det möjligt för användare att skapa 3D-objekt utan att skriva en enda kodrad.
I den här handledningen ska vi skapa och animera en logotyp för 'Tridiv Records', ett fiktivt skivbolag, som endast använder HTML och CSS. Huvudbilden för logotypen kommer att skapas i 3D med Tridiv. Sedan lägger vi till de typografiska elementen med vanlig HTML och CSS.
Du kan se den slutgiltiga animationen och koden som genererar den här.
Komma igång
Vi ska börja med att skapa skivspelaren i 3D med Tridiv. Gå till tridiv.com och starta appen. Du måste använda antingen Chrome, Safari eller Opera 15 (eller senare).
Innan du börjar är det viktigt att förstå Tridiv-gränssnittet. Redaktörens huvudsektion består av fyra vyer: längst upp till vänster är 3D-vyn, som ger en fullständig bild av scenen. De andra tre vyerna visar det från toppen, sidan och framsidan. Med dessa tre vyer kan du skapa, redigera och flytta 3D-former.
Det horisontella verktygsfältet är uppdelat i två delar: den vänstra delen visar information om ditt dokument; den högra delen innehåller verktyg för att skapa och redigera former. De Flytta urval och Redigera valknapparna växlar mellan de olika redigeringslägena.
Egenskapsfönstret (sidofältet) visar dokumentinställningar som zoom och snäpp till rutnät och egenskaperna för den valda formen (storlek, position, rotation, färg och så vidare). Enheten som används för mått och position är ems; rotationsvinklarna är i grader.
För att undvika förvirring senare i självstudien ska vi använda följande stenografi:
w = bredd h = höjd d = djup diam = diameter x deg = rotation i x-axeln y deg = rotation i y-axeln z deg = rotation i z-axeln
Skapa basen på skivspelaren
Börja med att ställa in zoomvärdet till 200. För att rita figurerna aktiverar du snap to grid-inställningen i Dokumentinställningar i sidofältet. Ställ snäppvärdet till 0.125.
Skivspelarens bas består av en enkel kuboid, så klicka på Tillsätt kuboid -knappen i det övre verktygsfältet. Du bör se kuboid visas i alla fyra vyer i redigeraren.
Byt namn på formen till bas med namnfältet i egenskapsfönstret (under Formegenskaper). Formens namn måste vara ett giltigt CSS-klassnamn eftersom det kommer att användas i koden som genereras av redigeraren. Vi kommer att använda dessa klassnamn senare när vi animerar logotypen, så se till att du namnge varje ny form som du skapar ordentligt.
När kuboid har fått namnet, se till att den är markerad i toppvyn (den ska vara markerad i blått, med en cirkulär verktygsring) och klicka sedan på Redigera knappen längst upp på ringen för att visa redigeringshandtagen. Dra kontrollhandtagen vid kuboidens sidor tills bredden och djupet når w = 10 och d = 8 i Formegenskaper.
Klicka på formen i sidovyn. Detta visar redigeringshandtagen i den här vyn, så att vi kan ändra höjden. Justera höjden tills den når h = 2. Du kan också skriva värden direkt i egenskapsfönstret. För att avrunda hörnen på den kuboida, ändra hörnvärdena i egenskapspanelen till 1.75och tryck sedan på [Stiga på] för att tillämpa ändringarna. Du får något liknande.
Skapa fötterna
För skivspelarens fötter kommer vi att använda cylindrar. Lägg till en cylinder och ändra dess diameter till diam = 1,75 och dess höjd till h = 0,5. Klicka på Flytta markeringsknapp i det översta verktygsfältet för att visa det dragbara området på formen. Flytta cylindern under basen och placera den i ett av hörnen. (Du kan behöva flytta den uppifrån, på sidan och framifrån.)
Kopiera cylindern (tryck på Duplicera knappen i verktygets cirkulära ring, eller tryck på D och för att flytta den nya cylindern till ett annat hörn av basen. Upprepa processen tills alla fyra fötterna är korrekt placerade. Glöm inte att namnge cylindrarna (till exempel fötter-vänster-topp, fötter-höger-topp, fötter-vänster-botten, fötter-vänster-topp). När du har gjort det ska resultatet se ut så här.
Vi tittar nu på att skapa tallrik, skiva, armaxel och knapp. Processen för att skapa nästa former liknar den för fötterna. Här är dimensionerna som används för de olika cylindrarna:
tallrik: diam = 7; h = 0,5 skiva: diam = 6,75; h = 0,25 knapp: diam = 1,5; h = 0,25 armaxelbas: diam = 2,25; h = 0,25 armaxel: diam = 1,375; h = 1
För att förfina sidorna på cylindrarna kan du öka antalet ansikten i var och en genom att använda sidofältet i egenskapsfönstret. Lägg inte till för många sidor eftersom detta kan påverka redaktörens globala prestanda och den slutliga animationen negativt. I det här fallet rekommenderar jag att du inte använder mer än 32 sidor för tallriken och skivan. Du borde ha något så här.
Armen och huvudet
För armen och huvudet på skivspelaren ska vi använda kubider. Skapa en kuboid för armen (w = 0,25; h = 0,25; d = 4), använd sedan en rotation på -33° på y-axeln. Skapa en kuboid för huvudet (w = 0,5; h = 0,5; d = 1), använd sedan en rotation på -33° på y-axeln. Rikta in båda formerna med armaxelcylindern. Resultatet ska se ut så här.
Färger och texturer
Vi är nästan klara med skivspelaren. Det sista steget är att tilldela färger och applicera en textur på vinylen (en bild som representerar skivans yta). För att tilldela färger, välj en form och klicka på färger i egenskapspanelen. Med Tridiv kan du ange enskilda färger för varje ansikte i en form, men i det här exemplet måste vi använda fältet alla för att ändra färgen på alla ansikten. För att göra detta anger du bara en hex-färgkod i fältet och bekräftar sedan genom att trycka på Stiga på.
Här är färgerna som används i detta exempel:
bas: # 0099FF fötter, knapp, axel, arm och huvud: # F2EEE5 skiva: # fa7f7a
För vinylstrukturen liknar processen att tilldela färger. Välj skivcylinder och klicka sedan på bilder i egenskapspanelen. Klistra in webbadressen till bilden som du vill applicera på vinylen i det övre fältet och bekräfta genom att trycka på Stiga på. Du kan använda en egen bild eller ladda ner den som används i det här exemplet.
Du borde nu ha något som ser ut så här.
Rendering och export
Nu när skivspelaren är klar kommer vi att arbeta på det sätt som den renderas innan vi exporterar den. Klicka på Förhandsvisning -knappen högst upp i egenskapsfönstret. Ställ in zoomvärdet på 200 för att visa skivspelaren större. För att ta bort de svarta kanterna på formerna, gå till Gränser avsnittet i rutan och ställ in opaciteten till 0. Resultatet borde se ut så här.
Vi vill att skivspelaren ska tändas uppifrån. För att göra detta, rotera scenen på ett sådant sätt att skivspelarens topp är vänd mot dig. Basen ska se perfekt rektangulär ut. Om du ändrar värdena för ljus och mörker i avsnittet tridiv.com/d/4k6 för egenskapsfönstret kommer skuggorna inom scenen att återskapas. Ändra ljusvärdet till 0.
Skivspelaren är nu redo att exporteras!
Avsluta logotypen
Vi är redo att lägga till texten i logotypen och skapa logotypanimationen. Klicka på Redigera på CodePen-knappen längst ner till vänster på Förhandsvisning visa för att exportera koden till CodePen. Det är viktigt att notera att CSS-koden som genereras av Tridiv inte använder leverantörsprefix, så du måste använda verktyg som prefixr.com eller leaverou.github.io/prefixfree för att koden ska fungera i varje webbläsare. Börja med att stänga JavaScript-rutan, eftersom vi inte ska använda den. Ta bort stilkoden som används på HTML-rutan .scen div.
Expandera CSS-rutan och lägg till följande kod i slutet:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Här, den översätt Y (-140 pixlar) flyttar skivspelaren 140 pixlar uppåt och lämnar plats för texten under den. Sedan rotateX (-55deg) ställer in skivspelarens vertikala lutning.
För att lägga till texten måste du lägga till en .titel div direkt efter öppningen #tridiv div i HTML-rutan. Inuti, lägg till två spänner> (.main-title och .sub-title), åtskilda av hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Du måste sedan använda rätt typsnitt och stilar. Importera Open Sans-teckensnittet som används i logotypen i CSS-rutan och lägg till grundstilarna för textelementen.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centrering av textblock + grundläggande typsnitt * / titel {position: absolut; topp: 50%; vänster: 50%; marginal: 0 0 0 -165px; bredd: 330px; höjd: 5 em; font-family: 'Open Sans', sans-serif; font-vikt: 300; teckenstorlek: 24 pixlar; textjustera: centrum; bokstavsavstånd: 1,5 em; färg: # 0099FF; } titel hr {border: 1px solid # fa7f7a; marginal: .75em 0; } titelspann {display: block; } .main-title {font-size: 2.15em; }. underrubrik {textindrag: .25em; }
Voilà! Din logotyp är komplett. Det ska se ut ungefär som bilden nedan. När din 3D-modell är klar kan du använda kraften i CSS för att göra det ännu bättre genom att lägga till stilar, animationer eller mushändelser: behandla bara 3D-modellen som alla andra HTML-element.
Animera logotypen
Se en animering med logotypen här. När delarna av skivspelaren 'faller in', delar var och en av dem samma keyframe-animation med olika förseningar. Formerna har toppattributet satt till 50%. För att skapa den fallande effekten animerar vi toppattributet från -400px till 50%:
@keyframes faller {0% {topp: -400px; } / * Vi startar animeringen med att placera formen till en höjd av 400px * / 100% {topp: 50%; } / * då avslutar vi den på sin ursprungliga position * /}
Du kan lägga till den här animationen i alla former enligt följande:
.form {topp: -400px; animering: höst 1s underlättar 0s framåt; }
Ställ in toppattributet till -400px och lägg till en fördröjning:
.platta {animationsfördröjning: 1.05s; } .disc {animationsfördröjning: 1,35s; } .knapp {animeringsfördröjning: 1,5s; } ...
Skapa den slutliga "studsande" effekten med rotateX 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); }
Så här skapade vi just den här versionen, men kom ihåg: det finns inga gränser!
Ord: Julian Garnier
Denna artikel publicerades ursprungligen i nätmagasin nummer 248.
