Isi
- Mulai
- Membuat dasar meja putar
- Menciptakan kaki
- Lengan dan kepalanya
- Warna dan tekstur
- Merender dan mengekspor
- Menyelesaikan logo
- Menganimasikan logo
Ada beberapa cara untuk membuat animasi 3D di web, kebanyakan membutuhkan pengetahuan yang baik tentang JavaScript dan WebGL, atau penggunaan plugin seperti Flash. Berkat transformasi 3D CSS, Anda dapat membuat 3D hanya dengan menggunakan HTML dan CSS, tetapi tidak mudah untuk melakukannya. Tridiv, aplikasi online gratis saya, menyederhanakan proses, menawarkan antarmuka WYSIWYG yang sederhana dan intuitif yang memungkinkan pengguna membuat objek 3D tanpa menulis satu baris kode pun.
Dalam tutorial ini, kita akan membuat dan menganimasikan logo untuk 'Tridiv Records', label rekaman fiksi, hanya menggunakan HTML dan CSS. Visual utama untuk logo akan dibuat dalam 3D menggunakan Tridiv. Kemudian kita akan menambahkan elemen tipografi menggunakan HTML dan CSS biasa.
Anda dapat melihat animasi terakhir dan kode yang menghasilkannya di sini.
Mulai
Kami akan mulai dengan membuat meja putar dalam 3D menggunakan Tridiv. Buka tridiv.com dan luncurkan aplikasinya. Anda harus menggunakan Chrome, Safari, atau Opera 15 (atau lebih baru).
Sebelum memulai, penting untuk memahami antarmuka Tridiv. Bagian utama editor terdiri dari empat tampilan: di kiri atas adalah tampilan 3D, memberikan tampilan pemandangan yang lengkap. Tiga tampilan lainnya menunjukkannya dari atas, samping, dan depan. Dengan menggunakan tiga tampilan ini, Anda dapat membuat, mengedit, dan memindahkan bentuk 3D.
Bilah alat horizontal dibagi menjadi dua bagian: bagian kiri menampilkan informasi yang berkaitan dengan dokumen Anda; bagian kanan berisi alat untuk membuat dan mengedit bentuk. Itu Pindah seleksi dan Sunting tombol pilihan beralih di antara mode pengeditan yang berbeda.
Panel properti (bar samping) menampilkan pengaturan dokumen seperti zoom dan snap to grid, dan properti bentuk yang dipilih (ukuran, posisi, rotasi, warna, dan sebagainya). Satuan yang digunakan untuk dimensi dan posisi adalah ems; sudut rotasi dalam derajat.
Untuk menghindari kebingungan apa pun nanti dalam tutorial, kami akan menggunakan singkatan berikut:
w = lebar h = tinggi d = kedalaman diam = diameter x derajat = rotasi pada sumbu x y derajat = rotasi pada sumbu y z derajat = rotasi pada sumbu z
Membuat dasar meja putar
Mulailah dengan mengatur nilai zoom ke 200. Untuk membantu menggambar bentuk, aktifkan pengaturan snap to grid di Pengaturan Dokumen bagian dari sidebar. Setel nilai jepret ke 0.125.
Basis meja putar terdiri dari kubus sederhana, jadi klik Tambahkan berbentuk kubus tombol di bilah alat atas. Anda akan melihat kubus muncul di keempat tampilan di editor.
Ubah nama bentuk menjadi mendasarkan menggunakan bidang nama dari panel properti (di bawah Properti Bentuk). Nama bentuk harus merupakan nama kelas CSS yang valid karena akan digunakan dalam kode yang dibuat oleh editor. Kami akan menggunakan nama kelas ini nanti saat menganimasikan logo, jadi pastikan Anda memberi nama setiap bentuk baru yang Anda buat dengan benar.
Setelah kubus diberi nama, pastikan itu dipilih di tampilan atas (itu harus disorot dengan warna biru, dengan lingkaran alat melingkar di sekitarnya), lalu klik Sunting di bagian atas ring untuk menampilkan edit handle. Seret gagang kontrol di sisi kubus, hingga lebar dan kedalaman mencapai w = 10 dan d = 8 dalam Properti Bentuk.
Klik pada bentuk di dalam tampilan samping. Ini akan menunjukkan tuas pengeditan dalam tampilan ini, memungkinkan kita untuk mengubah tingginya. Sesuaikan ketinggian hingga mencapai h = 2. Anda juga dapat mengetikkan nilai langsung ke panel properti. Untuk membulatkan sudut kubus, ubah nilai sudut di panel properti menjadi 1.75, lalu tekan [Memasukkan] kunci untuk menerapkan perubahan. Anda akan mendapatkan sesuatu seperti ini.
Menciptakan kaki
Untuk kaki meja putar, kami akan menggunakan silinder. Tambahkan silinder, lalu ubah diameternya menjadi diam = 1,75 dan tingginya menjadi h = 0,5. Klik pada Pindah tombol pilihan di toolbar atas untuk menampilkan area yang dapat diseret pada bentuk. Pindahkan silinder di bawah alas, letakkan di salah satu sudut. (Anda mungkin perlu memindahkannya ke tampilan atas, samping, dan depan.)
Gandakan silinder (tekan Duplikat di cincin melingkar alat, atau tekan D kunci) dan untuk memindahkan silinder baru ke sudut lain dari alasnya. Ulangi proses ini sampai keempat kaki diposisikan dengan benar. Jangan lupa memberi nama silinder (misalnya, kaki kiri atas, kaki kanan atas, kaki kiri bawah, kaki kiri atas). Setelah Anda selesai melakukannya, hasilnya akan terlihat seperti ini.
Sekarang kita akan melihat cara membuat pelat, cakram, sumbu lengan, dan tombol. Proses untuk membuat bentuk berikutnya mirip dengan proses untuk kaki. Berikut adalah dimensi yang digunakan untuk silinder yang berbeda:
piring: diam = 7; h = 0,5 cakram: diam = 6,75; h = 0,25 tombol: diam = 1,5; h = 0,25 lengan-sumbu-dasar: diam = 2,25; h = 0,25 sumbu lengan: diam = 1,375; h = 1
Untuk memperhalus sisi silinder, Anda dapat menambah jumlah sisi di masing-masing silinder, menggunakan bidang sisi di panel properti. Jangan menambahkan terlalu banyak sisi karena dapat berdampak negatif pada performa editor global dan animasi akhir. Dalam kasus ini, saya menyarankan Anda untuk tidak menggunakan lebih dari 32 sisi untuk platter dan disc. Anda harus memiliki sesuatu seperti ini.
Lengan dan kepalanya
Untuk lengan dan kepala meja putar, kami akan menggunakan kubus. Untuk lengan, buat kubus (w = 0,25; h = 0,25; d = 4), lalu terapkan rotasi -33° di sumbu y. Untuk kepala, buat kubus (w = 0,5; h = 0,5; d = 1), lalu terapkan rotasi -33° di sumbu y. Sejajarkan kedua bentuk dengan silinder sumbu lengan. Hasilnya akan terlihat seperti ini.
Warna dan tekstur
Kita hampir selesai dengan meja putar. Langkah terakhir adalah menetapkan warna dan menerapkan tekstur pada vinil (gambar yang mewakili permukaan rekaman). Untuk menetapkan warna, pilih bentuk dan klik warna bidang di panel properti. Tridiv memungkinkan Anda menentukan warna individual untuk setiap wajah bentuk, tetapi, dalam contoh ini, kita perlu menggunakan semua bidang untuk mengubah warna semua wajah. Untuk melakukannya, cukup masukkan kode warna hex di bidang, lalu konfirmasi dengan menekan Memasukkan.
Berikut warna yang digunakan dalam contoh ini:
base: # 0099FF kaki, tombol, sumbu, lengan dan kepala: # F2EEE5 disc: # fa7f7a
Untuk tekstur vinil, prosesnya mirip dengan pemberian warna. Pilih silinder cakram, lalu klik gambar-gambar bidang di panel properti. Tempel URL gambar yang ingin Anda terapkan pada vinil di bidang atas dan konfirmasikan dengan menekan Memasukkan. Anda dapat menggunakan gambar Anda sendiri, atau mendownload gambar yang digunakan dalam contoh ini.
Anda sekarang harus memiliki sesuatu yang terlihat seperti ini.
Merender dan mengekspor
Sekarang setelah turntable selesai, kita akan mengerjakan cara perenderannya sebelum mengekspornya. Klik Pratinjau di bagian atas panel properti. Setel nilai zoom ke 200 untuk menampilkan meja putar lebih besar. Untuk menghapus batas hitam bentuk, buka Perbatasan bagian panel dan setel opasitas ke 0. Hasilnya akan terlihat seperti ini.
Kami ingin meja putar dinyalakan dari atas. Untuk melakukan ini, putar adegan sedemikian rupa sehingga bagian atas meja putar menghadap Anda. Alas harus terlihat persegi panjang sempurna. Mengubah nilai terang dan gelap di bagian tridiv.com/d/4k6 dari panel properti akan meregenerasi bayangan di dalam pemandangan. Ubah nilai cahaya menjadi 0.
Meja putar sekarang siap untuk diekspor!
Menyelesaikan logo
Kami siap menambahkan teks ke logo dan membuat animasi logo. Klik Sunting pada tombol CodePen di kiri bawah Pratinjau lihat untuk mengekspor kode ke CodePen. Penting untuk diperhatikan bahwa kode CSS yang dihasilkan oleh Tridiv tidak menggunakan prefiks vendor, jadi Anda perlu menggunakan alat seperti prefixr.com atau leaverou.github.io/prefixfree agar kode berfungsi di setiap browser. Mulailah dengan menutup panel JavaScript, karena kami tidak akan menggunakannya. Di panel HTML, hapus tag gaya yang diterapkan ke .tempat kejadian div.
Perluas panel CSS dan tambahkan kode berikut di akhir:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Di sini, translateY (-140px) memindahkan meja putar 140px ke atas, menyisakan ruang untuk teks di bawahnya. Kemudian, rotateX (-55deg) mengatur kemiringan vertikal meja putar.
Untuk menambahkan teks, Anda perlu menambahkan file .judul div tepat setelah pembukaan #tridiv div di panel HTML. Di dalam, tambahkan dua rentang> (.main-title dan .sub-title), dipisahkan oleh jam />:
div id = "tridiv"> div> span> TRIDIV / span> jam /> rentang> RECORDS / span> / div>…
Anda kemudian perlu menerapkan font dan gaya yang benar. Di panel CSS, impor font Open Sans yang digunakan dalam logo, dan tambahkan gaya dasar untuk elemen teks.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Pemusatan blok teks + gaya font dasar * / judul {posisi: absolut; atas: 50%; kiri: 50%; margin: 0 0 0 -165px; lebar: 330px; tinggi: 5em; font-family: ’Open Sans’, sans-serif; font-weight: 300; ukuran font: 24px; text-align: center; spasi huruf: 1.5em; warna: # 0099FF; } judul jam {batas: 1px solid # fa7f7a; margin: .75em 0; } rentang judul {display: block; } .main-title {font-size: 2.15em; } .sub-judul {text-indent: .25em; }
Voilà! Logo Anda sudah lengkap. Seharusnya terlihat seperti gambar di bawah ini. Setelah model 3D Anda selesai, Anda dapat menggunakan kekuatan CSS untuk membuatnya lebih baik dengan menambahkan gaya, animasi, atau peristiwa mouse: perlakukan model 3D seperti elemen HTML lainnya.
Menganimasikan logo
Lihat animasi menggunakan logo di sini. Saat bagian dari meja putar 'jatuh', masing-masing berbagi animasi bingkai utama yang sama dengan penundaan yang berbeda. Bentuk memiliki atribut teratas yang disetel ke 50%. Untuk membuat efek jatuh, kami menganimasikan atribut teratas dari -400px untuk 50%:
@keyframe jatuh {0% {top: -400px; } / * Kita memulai animasi yang memposisikan bentuk ke ketinggian 400px * / 100% {top: 50%; } / * lalu kita akhiri di posisi semula * /}
Anda dapat menambahkan animasi ini ke semua bentuk, sebagai berikut:
.shape {top: -400px; animasi: jatuh 1 detik dan 0 detik ke depan; }
Setel atribut teratas ke -400px dan tambahkan penundaan:
.platter {animation-delay: 1.05s; } .disc {animasi-penundaan: 1,35s; } .button {animation-delay: 1.5s; } ...
Buat efek 'pentalan' terakhir menggunakan rotateX atribut:
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); }
Begitulah cara kami membuat versi khusus ini, tetapi ingat: tidak ada batasan!
Kata-kata: Julian Garnier
Artikel ini pertama kali tayang di majalah net terbitan 248.
