Innhold
- Starter
- Å lage basen til platespilleren
- Å lage føttene
- Armen og hodet
- Farger og teksturer
- Gjengivelse og eksport
- Etterbehandling av logoen
- Animer logoen
Det er flere måter å lage 3D-animasjon på nettet, de fleste av dem krever god kunnskap om JavaScript og WebGL, eller bruk av et plugin-program som Flash. Takket være CSS 3D-transformasjoner er det mulig å lage 3D med bare HTML og CSS, men det er ikke lett å gjøre det. Tridiv, min gratis online-app, forenkler prosessen og tilbyr et enkelt og intuitivt WYSIWYG-grensesnitt som gjør det mulig for brukere å lage 3D-objekter uten å skrive en eneste kodelinje.
I denne veiledningen skal vi lage og animere en logo for 'Tridiv Records', et fiktivt plateselskap, som kun bruker HTML og CSS. Hovedbildet for logoen skal opprettes i 3D ved hjelp av Tridiv. Deretter vil vi legge til typografiske elementer ved hjelp av vanlig HTML og CSS.
Du kan se den endelige animasjonen og koden som genererer den her.
Starter
Vi skal begynne med å lage platespilleren i 3D ved hjelp av Tridiv. Gå til tridiv.com og start appen. Du må bruke enten Chrome, Safari eller Opera 15 (eller nyere).
Før du starter, er det viktig å forstå Tridiv-grensesnittet. Hoveddelen av redaktøren er sammensatt av fire visninger: øverst til venstre er 3D-visningen, som gir en fullstendig oversikt over scenen. De tre andre visningene viser det fra toppen, siden og foran. Ved å bruke disse tre visningene kan du opprette, redigere og flytte 3D-figurer.
Den horisontale verktøylinjen er delt inn i to deler: den venstre delen viser informasjon om dokumentet ditt; høyre del inneholder verktøy for å lage og redigere figurer. De Bevege seg utvalg og Redigere valgknappene bytter mellom de forskjellige redigeringsmodusene.
Egenskapsruten (sidefeltet) viser dokumentinnstillinger som zoom og snap til rutenett, og egenskapene til den valgte formen (størrelse, posisjon, rotasjon, farge og så videre). Enheten som brukes til dimensjoner og posisjon er ems; rotasjonsvinklene er i grader.
For å unngå forvirring senere i opplæringen, skal vi bruke følgende stenografi:
w = bredde h = høyde d = dybde diam = diameter x deg = rotasjon i x-aksen y deg = rotasjon i y-aksen z deg = rotasjon i z-aksen
Å lage basen til platespilleren
Start med å sette zoomverdien til 200. For å hjelpe til med å tegne figurene, aktiverer du snap to grid setting i Dokumentinnstillinger delen av sidefeltet. Sett snapverdien til 0.125.
Basen på platespilleren er sammensatt av en enkel kuboid, så klikk på Tilsett kuboid -knappen i øverste verktøylinje. Du bør se kuboidet vises i alle fire visningene i redaktøren.
Gi formen nytt navn til utgangspunkt ved å bruke navnefeltet i egenskapsruten (under Formegenskaper). Navnet på formen må være et gyldig CSS-klassenavn fordi det vil bli brukt i koden generert av redaktøren. Vi bruker disse klassenavnene senere når vi animerer logoen, så sørg for at du navngir hver nye form som du lager riktig.
Når kuboid er navngitt, må du sørge for at den er valgt i ovenfra (den skal være uthevet i blått, med en sirkulær ring med verktøy rundt seg), og deretter klikke på Redigere knappen øverst på ringen for å vise redigeringshåndtakene. Dra kontrollhåndtakene på sidene av kuben, til bredden og dybden når w = 10 og d = 8 i Formegenskaper.
Klikk på formen i sidevisningen. Dette viser redigeringshåndtakene i denne visningen, slik at vi kan endre høyden. Juster høyden til den når h = 2. Du kan også skrive verdier direkte i egenskapsruten. Hvis du vil avrunde hjørnene på kuboidet, endrer du hjørneverdiene i egenskapsruten til 1.75, og trykk deretter på [Tast inn] nøkkel for å bruke endringene. Du får noe sånt som dette.
Å lage føttene
For føttene til platespilleren skal vi bruke sylindere. Legg til en sylinder, og endre deretter diameteren til diam = 1,75 og høyden til h = 0,5. Klikk på Bevege seg valgtast i verktøylinjen øverst for å vise det trekkbare området på formen. Flytt sylinderen under basen, og plasser den i et av hjørnene. (Det kan hende du må flytte den i topp-, side- og frontvisning.)
Kopier sylinderen (trykk på Duplisere knappen i den sirkulære verktøyringen, eller trykk på D nøkkel) og for å flytte den nye sylinderen til et annet hjørne av basen. Gjenta prosessen til alle fire føttene er riktig plassert. Ikke glem å navngi sylindrene (for eksempel føtter-venstre-topp, føtter-høyre-topp, føtter-venstre-bunn, føtter-venstre-topp). Når du har gjort det, skal resultatet se slik ut.
Vi ser nå på å lage tallerken, plate, armakse og knapp. Prosessen for å lage de neste figurene er lik den for føttene. Her er dimensjonene som brukes for de forskjellige sylindrene:
tallerken: diam = 7; h = 0,5 plate: diam = 6,75; h = 0,25 knapp: diam = 1,5; h = 0,25 arm-akse-base: diam = 2,25; h = 0,25 armakse: diam = 1,375; h = 1
For å avgrense sidene på sylindrene, kan du øke antall ansikter i hver enkelt ved å bruke sidefeltet i egenskapsruten. Ikke legg til for mange sider, da dette kan påvirke redaktørenes globale ytelse og den endelige animasjonen negativt. I dette tilfellet vil jeg råde deg til ikke å bruke mer enn 32 sider til tallerkenen og platen. Du burde ha noe slikt.
Armen og hodet
For armen og hodet til platespilleren skal vi bruke cuboids. Lag en kuboid for armen (w = 0,25; h = 0,25; d = 4), bruk deretter en rotasjon på -33° på y-aksen. Lag et kuboid for hodet (w = 0,5; h = 0,5; d = 1), bruk deretter en rotasjon på -33° på y-aksen. Juster begge former med armakselsylinderen. Resultatet skal se slik ut.
Farger og teksturer
Vi er nesten ferdig med platespilleren. Det siste trinnet er å tildele farger og bruke tekstur på vinylen (et bilde som representerer platens overflate). For å tildele farger, velg en form og klikk på farger feltet i eiendomsruten. Tridiv lar deg spesifisere individuelle farger for hvert ansikt av en form, men i dette eksemplet må vi bruke hele feltet for å endre fargen på alle ansiktene. For å gjøre dette, bare skriv inn en hex-fargekode i feltet, og bekreft deretter ved å trykke Tast inn.
Her er fargene som brukes i dette eksemplet:
base: # 0099FF føtter, knapp, akse, arm og hode: # F2EEE5 plate: # fa7f7a
For tekstur av vinyl, er prosessen lik tildeling av farger. Velg skivesylinder, og klikk deretter på Bilder feltet i eiendomsruten. Lim inn URL-en til bildet du vil bruke på vinylen i det øverste feltet, og bekreft ved å trykke på Tast inn. Du kan bruke et eget bilde, eller laste ned det som er brukt i dette eksemplet.
Du bør nå ha noe som ser slik ut.
Gjengivelse og eksport
Nå som platespilleren er ferdig, skal vi jobbe med måten den blir gjengitt før vi eksporterer den. Klikk på Forhåndsvisning på toppen av eiendomsruten. Sett zoomverdien til 200 for å vise platespilleren større. For å fjerne de svarte kantene på figurene, gå til Grenser delen av ruten og sett opaciteten til 0. Resultatet skal se ut som dette.
Vi vil at platespilleren skal være tent fra toppen. For å gjøre dette, roter scenen på en slik måte at toppen av platespilleren vender mot deg. Basen skal se perfekt rektangulær ut. Hvis du endrer lys og mørke verdier i tridiv.com/d/4k6avsnittet i egenskapsruten, vil skyggene i scenen regenereres. Endre lysverdien til 0.
Platespilleren er nå klar til å eksporteres!
Etterbehandling av logoen
Vi er klare til å legge til teksten i logoen og lage logo-animasjonen. Klikk på Redigere på CodePen-knappen nederst til venstre på Forhåndsvisning visning for å eksportere koden til CodePen. Det er viktig å merke seg at CSS-koden generert av Tridiv ikke bruker leverandørprefikser, så du må bruke verktøy som prefixr.com eller leaverou.github.io/prefixfree for å gjøre koden funksjonell i alle nettlesere. Start med å lukke JavaScript-ruten, ettersom vi ikke skal bruke den. Fjern stilkoden som brukes på HTML-ruten .scene div.
Utvid CSS-ruten og legg til følgende kode på slutten:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Her, den oversetteY (-140px) beveger platespilleren 140 px oppover, og gir plass til teksten under den. Og så rotateX (-55deg) angir den vertikale hellingen til platespilleren.
For å legge til teksten, må du legge til en .tittel div rett etter åpningen #tridiv div i HTML-ruten. Inne, legg til to spenner> (.tittel og .tittel), atskilt med hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Du må da bruke de riktige skriftene og stilene. I CSS-ruten importerer du Open Sans-skrifttypen som brukes i logoen, og legger til grunnleggende stiler for tekstelementene.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Sentrering av tekstblokk + grunnleggende skriftstiler * / tittel {posisjon: absolutt; topp: 50%; venstre: 50%; margin: 0 0 0 -165px; bredde: 330px; høyde: 5em; font-family: ’Open Sans’, sans-serif; skriftvekt: 300; skriftstørrelse: 24px; tekstjustering: sentrum; bokstavavstand: 1,5 em; farge: # 0099FF; } tittel hr {border: 1px solid # fa7f7a; margin: .75em 0; } tittelspenn {display: block; } .main-title {font-size: 2.15em; }. undertittel {tekstinnrykk: .25em; }
Voilà! Logoen din er komplett. Det skal se ut som bildet nedenfor. Når 3D-modellen din er ferdig, kan du bruke kraften i CSS til å gjøre det enda bedre ved å legge til stiler, animasjoner eller mushendelser: bare behandle 3D-modellen som ethvert annet HTML-element.
Animer logoen
Se en animasjon med logoen her. Når delene av platespilleren faller inn, deler hver av dem den samme keyframe-animasjonen med forskjellige forsinkelser. Formene har toppattributtet satt til 50%. For å skape den fallende effekten animerer vi toppattributtet fra -400px til 50%:
@keyframes faller {0% {topp: -400px; } / * Vi starter animasjonen med å plassere formen til en høyde på 400 px * / 100% {topp: 50%; } / * så avslutter vi den på sin opprinnelige posisjon * /}
Du kan legge til denne animasjonen i alle former, som følger:
.form {topp: -400px; animasjon: fall 1s lette 0s fremover; }
Sett toppattributtet til -400px og legg til en forsinkelse:
.plate {animasjonsforsinkelse: 1.05s; } .disk {animasjonsforsinkelse: 1,35s; } .knapp {animasjonsforsinkelse: 1,5 sek; } ...
Lag den endelige 'spretteffekten' ved hjelp av rotereX Egenskap:
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); }
Slik opprettet vi denne versjonen, men husk: det er ingen grenser!
Ord: Julian Garnier
Denne artikkelen dukket opprinnelig opp i nettmagasinutgave 248.
