Isi
- 01. Memulai dokumen HTML
- 02. Konten HTML yang terlihat
- 03. Inisiasi CSS
- 04. Wadah animasi
- 05. Inisiasi animasi
- 06. Animasikan hingga terlihat
- 07. Menyelesaikan animasi
Love Lost by Canada's Jam3 adalah puisi interaktif gelap yang indah dan siap untuk seluler dengan hati yang nyata tentang perasaan abadi seputar cinta yang hilang. Tata letak situs web dibuat menggunakan HTML5 dengan pustaka GSAP yang menjalankan animasinya, salah satu fitur yang paling mencolok secara visual adalah teks 3D animasi yang benar-benar menghidupkan puisi Love Lost.
- Buat efek tipografi 3D interaktif
Terlihat mengesankan sekali, dan tidak sulit untuk memasukkannya ke dalam pekerjaan Anda sendiri untuk menciptakan pengalaman pengguna yang menarik; begini caranya.
Ingin membuat situs menarik Anda sendiri? Cobalah alat pembuat situs web, dan pertahankan semuanya berjalan lancar dengan memilih layanan hosting web yang tepat.
01. Memulai dokumen HTML
Langkah pertama adalah menentukan struktur dokumen HTML. Ini termasuk wadah HTML yang memulai dokumen, yang berisi bagian kepala dan badan. Meskipun bagian head utamanya digunakan untuk memuat file CSS eksternal, bagian body akan menyimpan konten halaman yang terlihat yang dibuat pada langkah 2.
! DOCTYPE html> html> head> title> Gerakan Teks 3D / judul> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * LANGKAH 2 DI SINI / body> / html>
02. Konten HTML yang terlihat
Konten HTML yang terlihat terdiri dari wadah artikel yang berisi teks yang terlihat. Bagian penting dari penampung artikel adalah atribut 'data-animate', yang akan direferensikan oleh CSS untuk menerapkan efek visual. Teks di dalam artikel dibuat dari tag h1 untuk menunjukkan bahwa konten tersebut adalah judul utama halaman.
artikel data-animate = "pindah"> h1> Halo! / h1> / artikel>
03. Inisiasi CSS
Buat file baru bernama 'styles.css'. Rangkaian petunjuk pertama menyetel wadah dan badan HTML laman memiliki latar belakang hitam, serta tidak ada spasi batas yang terlihat. Putih juga disetel sebagai warna teks default untuk semua elemen anak pada halaman yang akan diwariskan; menghindari warna hitam default teks yang membuat konten tampak tidak terlihat.
html, body {background: # 000; bantalan: 0; margin: 0; warna: #fff; }
04. Wadah animasi
Penampung konten yang direferensikan dengan atribut 'data-animate' menerapkan gaya tertentu. Ukurannya diatur agar sesuai dengan ukuran penuh layar menggunakan unit pengukuran vw dan vh, serta diputar sedikit. Animasi yang disebut 'moveIn' diterapkan, yang akan berlangsung selama 20 detik dan akan berulang tanpa batas.
[data-animate = "move in"] {position: relative; lebar: 100vw; tinggi: 100vh; opasitas: 1; animasi: moveIn 20s tak terbatas; text-align: center; transform: rotate (20deg); }
05. Inisiasi animasi
Animasi 'moveIn' yang direferensikan di langkah sebelumnya memerlukan definisi menggunakan @keyframes. Bingkai pertama yang dimulai dari 0% animasi menyetel ukuran font default, pemosisian teks, dan bayangan yang terlihat. Selain itu, item disetel dengan opasitas nol sehingga pada awalnya tidak terlihat - mis. ditampilkan di luar tampilan.
@keyframes moveIn {0% {font-size: 1em; kiri: 0; opasitas: 0; text-shadow: tidak ada; } * * * LANGKAH 6 DI SINI}
06. Animasikan hingga terlihat
Bingkai berikutnya ditempatkan pada 10% melalui animasi. Bingkai ini menyetel opasitas menjadi terlihat sepenuhnya, sehingga teks secara bertahap dianimasikan menjadi terlihat.Selain itu, beberapa bayangan ditambahkan dengan warna biru dan nilai warna yang menurun untuk memberikan ilusi kedalaman 3D pada teks.
10% {opasitas: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * LANGKAH 7 DI SINI
07. Menyelesaikan animasi
Bingkai terakhir terjadi pada 80% dan di akhir animasi. Ini bertanggung jawab untuk meningkatkan ukuran font dan memindahkan elemen ke kiri. Pengaturan baru juga diterapkan untuk bayangan teks untuk dianimasikan, sementara juga memudarkan teks dari tampilan dari frame 80% menjadi 100%.
80% {ukuran font: 8em; kiri: -8em; opasitas: 1; } 100% {font-size: 10em; kiri: -10em; opasitas: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Catatan: proyek apa pun yang Anda mulai, memiliki penyimpanan cloud yang dapat mengatasi itu penting (panduan kami akan membantu).
Artikel ini pertama kali diterbitkan dalam edisi 273 majalah desain web kreatif Web Designer. Beli edisi 273 di sini atau berlangganan Desainer Web di sini.
