Kandungan
- 01. Mulakan dokumen HTML
- 02. Kandungan HTML yang dapat dilihat
- 03. Permulaan CSS
- 04. Bekas animasi
- 05. Permulaan animasi
- 06. Menganjurkan pandangan
- 07. Memuktamadkan animasi
Love Lost by Canada's Jam3 adalah puisi interaktif yang sangat gelap dan mudah alih dengan hati yang sungguh-sungguh mengenai perasaan abadi di sekitar cinta yang hilang. Susun atur laman web dibina menggunakan HTML5 dengan perpustakaan GSAP menguatkan animasinya, salah satu ciri yang paling menarik ialah teks 3D animasinya yang benar-benar menghidupkan puisi Love Lost.
- Buat kesan tipografi 3D interaktif
Nampaknya hebat sekali, dan tidak sukar untuk dimasukkan ke dalam karya anda sendiri untuk mewujudkan pengalaman pengguna yang menarik; inilah cara ia dilakukan.
Ingin membuat laman web menarik anda sendiri? Cubalah alat pembangun laman web, dan terus berjalan lancar dengan memilih perkhidmatan hosting web yang tepat.
01. Mulakan dokumen HTML
Langkah pertama adalah menentukan struktur dokumen HTML. Ini termasuk bekas HTML yang memulakan dokumen, yang mengandungi bahagian kepala dan badan. Walaupun bahagian kepala digunakan terutamanya untuk memuatkan fail CSS luaran, bahagian badan akan menyimpan kandungan halaman kelihatan yang dibuat pada langkah 2.
! DOCTYPE html> html> kepala> tajuk> Pergerakan Teks 3D / tajuk> pautan rel = "stylesheet" type = "text / css" href = "gaya.css" /> / kepala> badan> * * * LANGKAH 2 DI SINI / badan> / html>
02. Kandungan HTML yang dapat dilihat
Kandungan HTML yang kelihatan terdiri daripada bekas artikel yang mengandungi teks yang kelihatan. Bahagian penting dari wadah artikel adalah atribut 'data-animate', yang akan dirujuk oleh CSS untuk menerapkan kesan visual. Teks di dalam artikel dibuat dari tag h1 untuk menunjukkan bahawa kandungannya adalah tajuk utama halaman.
artikel data-animate = "pindah masuk"> h1> Helo Ada! / h1> / artikel>
03. Permulaan CSS
Buat fail baru yang disebut 'gaya.css'. Petunjuk pertama menetapkan wadah HTML dan badan untuk mempunyai latar belakang hitam, serta jarak sempadan yang tidak dapat dilihat. Putih juga ditetapkan sebagai warna teks lalai untuk diwarisi oleh semua elemen anak di halaman; mengelakkan warna hitam lalai dari membuat teks kelihatan tidak kelihatan.
html, body {latar belakang: # 000; pembalut: 0; margin: 0; warna: #fff; }
04. Bekas animasi
Wadah kandungan yang dirujuk dengan atribut 'data-animate' menggunakan 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 saat dan akan berulang tanpa henti.
[data-animate = "move in"] {kedudukan: relatif; lebar: 100vw; tinggi: 100vh; kelegapan: 1; animasi: moveIn 20s tidak terhingga; text-align: tengah; ubah: putar (20deg); }
05. Permulaan animasi
Animasi 'moveIn' yang dirujuk pada langkah sebelumnya memerlukan definisi menggunakan @keyframes. Bingkai pertama bermula pada 0% animasi menetapkan ukuran fon lalai, kedudukan teks dan bayangan yang dapat dilihat. Selain itu, item tersebut diatur dengan kelegapan sifar sehingga pada mulanya tidak dapat dilihat - iaitu. dipaparkan di luar pandangan.
@keyframes moveIn {0% {font-size: 1em; kiri: 0; kelegapan: 0; teks-bayangan: tidak ada; } * * * LANGKAH 6 DI SINI}
06. Menganjurkan pandangan
Bingkai seterusnya diletakkan pada kadar 10% melalui animasi. Bingkai ini menetapkan kelegapan kelihatan sepenuhnya, sehingga teks secara beransur-ansur dianimasikan ke dalam pandangan.Selain itu, beberapa bayangan ditambah dengan nilai warna biru dan berkurang untuk memberikan ilusi kedalaman 3D pada teks.
10% {kelegapan: 1; teks-bayangan: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * LANGKAH 7 DI SINI
07. Memuktamadkan animasi
Bingkai akhir berlaku pada 80% dan pada akhir animasi. Ini bertanggungjawab untuk meningkatkan saiz fon dan menggerakkan elemen ke kiri. Tetapan baru juga diterapkan agar bayangan teks menjadi animasi, dan juga memudar teks daripada pandangan dari bingkai 80% hingga 100%.
80% {font-size: 8em; kiri: -8em; kelegapan: 1; } 100% {font-size: 10em; kiri: -10em; kelegapan: 0; teks-bayangan: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Catatan: apa sahaja projek yang anda mulakan, mempunyai penyimpanan awan yang dapat diatasi sangat mustahak (panduan kami akan membantu).
Artikel ini pada mulanya diterbitkan dalam edisi 273 majalah reka bentuk web Web Designer. Beli terbitan 273 di sini atau melanggan Web Designer di sini.
