Teks berlapis 3D: Gerakan dan Perubahan – Beragampengetahuan

Pada bab sebelumnya, kami membangun efek teks hirarkis 3D dasar menggunakan HTML dan CSS. Itu terlihat hebat dan memiliki gambar visual yang solid, tetapi benar -benar statis. Itu akan berubah.

Dalam bab ini, kita akan mengeksplorasi cara untuk menghidupkan efek, menambahkan transisi, dan memainkan perubahan yang berbeda. Kita akan melihat bagaimana gerakan meningkatkan kedalaman dan bagaimana penyesuaian halus menciptakan suasana yang sama sekali baru.

⚠️Angement Warning: Artikel ini berisi beberapa contoh animasi, yang mungkin termasuk visual yang berkedip atau bergerak cepat. Jika Anda peka terhadap olahraga, lanjutkan dengan hati -hati.

Animasi “Counter”

Mari kita mulai dengan tip animasi cepat yang sangat cocok dengan teks 3D berlapis. Terkadang kami ingin memutar elemen tanpa benar -benar mengubah orientasi teks agar dapat dibaca. Kuncinya di sini adalah menggabungkan beberapa rotasi pada dua sumbu. Pertama, putar teks pada sumbu z. Kemudian, tambahkan kemiringan pada sumbu x. Akhirnya, putar teks kembali ke sumbu z.

@keyframes wobble {
  from { transform: rotate(0deg) rotateX(20deg) rotate(360deg); }
  to { transform: rotate(360deg) rotateX(20deg) rotate(0deg); }
}

Karena kami berputar pada sumbu-z dan kemudian membalikkan rotasi, teks tetap dalam arah aslinya. Namun, karena kami menambahkan kecenderungan ke sumbu X tengah, dan sumbu x itu sendiri berputar sepanjang waktu, sudut kemiringan berubah juga. Ini menciptakan a menggoyang Tunjukkan efek teks dari setiap sudut dan tekankan rasa kedalaman.

Jika kita ingin mengambil beberapa langkah lebih jauh, kita dapat menggabungkan ayunan bersama Mengapung Pengaruh. Kami akan membuat .layers Sedikit di sepanjang sumbu z:

.layers {
  animation: hover 2s infinite ease-in-out alternate;
}

@keyframes hover {
  from { transform: translateZ(0.3em); }
  to { transform: translateZ(0.6em); }
}

Untuk benar -benar menjual efeknya, kami akan menempatkan rentang asli di tempat – seperti jangkar bayangan – ubah warnanya menjadi transparan dan membuatnya menjadi faktor animasi faktor blur text-shadow:

span {
  color: transparent;
  animation: shadow 2s infinite ease-in-out alternate;
}

@keyframes shadow {
  from { text-shadow: 0 0 0.1em #000; }
  to { text-shadow: 0 0 0.2em #000; }
}

Menyinkronkan dua animasi ini untuk memberikan semuanya perasaan yang lebih realistis:

Surat terpecah

Oke, sekarang semuanya bergerak, ini mulai terlihat jauh lebih baik. Tapi seluruh kata masih bergerak. Bisakah kita memindahkan setiap huruf secara mandiri? Seperti biasa, jawabannya adalah “Ya, tapi …”

Sangat mungkin untuk membagi setiap kata menjadi huruf individual dan menghidupkannya secara terpisah. Tetapi itu juga berarti lebih banyak elemen bergerak di sekitar layar, yang dapat menyebabkan masalah kinerja. Jika Anda menempuh rute ini, cobalah untuk tidak menghidupkan terlalu banyak huruf sekaligus dan pertimbangkan mengurangi jumlah lapisan.

Misalnya, dalam contoh berikutnya, saya mengurangi jumlah layer menjadi 16. Ada lima huruf untuk memasukkannya berdampingan, saya memberikannya .scene satu display: flexlalu gunakan :nth-child:

Sudut baru

Sejauh ini kami telah memindahkan teks di sepanjang sumbu Z, tetapi kami pasti bisa memindahkannya lebih jauh. Setiap lapisan dapat dipindahkan atau diputar ke arah mana pun yang Anda sukai, jika kami mendasarkan transformasi ini --n Variabel, kita dapat membuat berbagai efek menarik. Ini adalah beberapa yang pernah saya mainkan, hanya untuk memberi Anda beberapa ide.

Yang pertama, saya lakukan translateX Buat a Transfer Pengaruh:

Dalam kasus lain, saya menambahkan beberapa rotasi. Yang pertama berlaku untuk sumbu y memiringkan Pengaruh:

Contoh selanjutnya memutar rotasi pada sumbu x memiringkan:

Akhirnya, kita bisa menerapkannya pada sumbu z Memutar contoh:

Penundaan layer

Menggunakan lapisan terpisah tidak hanya memungkinkan kita untuk menyesuaikan animasi setiap lapisan; animation-delay Untuk setiap lapisan, ada beberapa efek yang sangat menarik. Mari kita terima ini denyut contoh:

Sekarang, animasi diterapkan .layeredText Elemen itu sendiri, saya hanya mengubah ukurannya:

.layeredText {
  animation: pulsing 2s infinite ease-out;
}

@keyframes pulsing {
  0%, 100% { scale: 1; }
  20% { scale: 1.2; }
}

Tetapi kami dapat menerapkan animasi untuk setiap lapisan secara terpisah dan memberikan setiap lapisan penundaan. Harap dicatat span adalah bagian dari tumpukan. Ini juga lapisan, dan kadang -kadang Anda perlu memasukkannya ke dalam animasi:

.layer {
  --delay: calc(var(--n) * 0.3s);
}

:is(span, .layer) {
  animation: pulsing 2s var(--delay, 0s) infinite ease-out;
}

Di sini saya menggunakan :is Pemilih dapat digunakan untuk setiap lapisan dan span Ini memiliki animasi yang sama itu sendiri. Hasilnya adalah efek yang lebih jelas dan menarik:

Kamuflase

Pada bab sebelumnya, saya menyebutkan bahwa saya biasanya lebih suka menyimpan elemen semu untuk tujuan dekoratif. Ini jelas merupakan teknologi yang layak digunakan. Kami dapat memberikan setiap lapisan satu atau dua elemen semu, menambahkan beberapa konten, dan menemukannya sesuai keinginan kami, dan efek 3D sudah ada.

Dari garis besar sederhana hingga bentuk yang lebih menarik, itu bisa apa saja. menyukai anak panahMisalnya:

Harap dicatat bahwa saya menggunakan :is Pemilih termasuk span Di sini juga, tetapi kadang -kadang kami tidak ingin menargetkan semua lapisan, hanya sebagian dari itu. Dalam hal ini kita bisa menggunakan :nth-child Pilih hanya sebagian dari tumpukan. Misalnya, jika saya ingin menargetkan hanya dua belas lapisan di bagian bawah (total dua puluh empat lapisan), dekorasi hanya mencakup setengah dari tinggi teks. Saya bisa melakukan sesuatu yang serupa :nth-child(-n + 12) pemilih yang lengkap adalah:

:is(span, .layer:nth-child(-n + 12))::before {
  /* pseudo style */
}

Ini sangat berguna ketika dekorasi tumpang tindih dengan teks dan Anda tidak ingin memperkenalkan atau sulit dibaca.

Tentu saja, Anda juga dapat membuat elemen semu ini hidup. Lalu 3dmemuat“Teks dengan rotator bawaan?

Saya membuat beberapa perubahan untuk mencapai ini. Pertama, saya memilih dua belas lapisan dari tengah tumpukan menggunakan pemilih yang sedikit canggih: .layer:nth-child(n + 6):nth-child(-n + 18). Ini akan menargetkan dari keenam hingga kedelapan belas.

Kedua, berpura -pura menjadi bayangan, saya spanelemen semu dari. Ini menciptakan efek lunak yang bagus, tetapi dalam beberapa kasus ini dapat menyebabkan masalah kinerja, jadi waspadai.

:is(span, .layer:nth-child(n + 6):nth-child(-n + 18))::before {
  /* spinner style */
}

span {
  /* span style */

  &::before {
    filter: blur(0.1em);
  }
}

Lukisan wajah

Tetapi Anda tidak harus menggunakan elemen semu untuk meningkatkan minat visual. Anda juga dapat menggunakan desain teks apa pun dengan pola khusus background-image. Pilih level atas :last-child pemilih, atur warna teksnya transparent Oleh karena itu latar belakang dilewatkan dan digunakan background-clip: text.

.layer {
  /* layer style */
    
  &:last-child {
    color: transparent;
    background-clip: text;
    background-image: ... /* use your imagination */
  }
}

Ini adalah demonstrasi kecil menggunakan garis -garis Kabel Dan repeating-linear-gradientDan cincin Dibuat repeating-radial-gradient:

Dan, ya, Anda pasti bisa menggunakannya gambar Juga:

Mode Animasi

Mari kita ambil ide sebelumnya. Kami menerapkannya pada semua lapisan alih -alih hanya menerapkan pola ke lapisan atas, menghasilkan efek mode 3D penuh. Lalu, kami menghidupkannya.

Kami akan mulai dengan warnanya. Pertama, kami memberikan semua lapisan transparent Warna teks. Warna yang kami gunakan sebelumnya sekarang akan disimpan di properti khusus yang disebut --colorkami akan menggunakannya sebentar lagi.

.layer {
  --n: calc(var(--i) / var(--layers-count));
  --color: hsl(200 30% calc(var(--n) * 100%));

  color: transparent;
}

Sekarang mari kita tentukan latar belakangnya, kita akan mengatakan kita menginginkan rumah yang bergerak papan main dam pola. Kita bisa menggunakannya repeating-conic-gradient Ada dua warna. Yang pertama akan menjadi milik kita --color Variabel, yang kedua mungkin transparent. Tetapi dalam hal ini, saya pikir orang kulit hitam dengan opacity yang sangat rendah lebih baik.

Kami hanya perlu menyiapkan background-size Skala pola kontrol, tentu saja, pastikan untuk diterapkan background-clip: text Juga di sini:

.layer {
  --n: calc(var(--i) / var(--layers-count));
  --color: hsl(200 30% calc(var(--n) * 100%));

  color: transparent;
  background-image:
    repeating-conic-gradient(var(--color) 0 90deg, hsl(0 0% 0% / 5%) 0 180deg);
  background-size: 0.2em 0.2em;
  background-clip: text;
  transform: translateZ(calc(var(--i) * var(--layer-offset)));
  animation: checkers 24s infinite linear;
}

@keyframes checkers {
  to { background-position: 1em 0.4em; }
}

Seperti yang Anda lihat, saya telah menambahkan animation milik. Dalam hal ini, mode animasi sangat sederhana. Bergeraklah perlahan background-positionItu saja. Sekarang kami memiliki teks dengan mode 3D seluler:

Font variabel

Sejauh ini kami telah menggunakan font tunggal dan seperti yang saya sebutkan sebelumnya, pemilihan font terutama masalah selera atau pedoman branding. Namun, karena kami sudah menggunakan teks hierarkis, kami benar -benar harus mencobanya dengan font variabel. Gagasan di balik font variabel adalah bahwa setiap font berisi sumbu yang dapat Anda dapat memanipulasi penampilannya. Ini dapat mencakup lebar, berat, kemiringan atau apa pun.

Berikut adalah beberapa contoh yang sangat saya sukai. Yang pertama digunakan Krisis Iklim Ada font YEAR Kisaran sumbu berkisar dari tahun 1979 hingga 2025. Setiap tahun, huruf -huruf sedikit meleleh dan sedikit menyusut. Berikut ini adalah pernyataan ramah lingkungan yang kuat, dan ketika Anda menumpuk teks bersama, Anda benar -benar dapat melihat perubahan dan mendapatkan efek 3D yang sangat menakjubkan:

Pilihan bagus lainnya adalah Bitcountfont variabel dengan sumbu berat klasik, mulai dari 100 hingga 900. Dengan mengubah bobot sesuai dengan indeks layer, Anda akan mendapatkan efek berlapis yang terlihat seperti puncak naik pada teks:

Berikut adalah contoh yang mungkin membuat browser Anda sedikit berolahraga. Font Kablammo termasuk MORF Sumbu dan menyesuaikannya benar -benar mengubah bentuk setiap huruf. Jadi saya pikir poros animasi menarik (ya, font-variation-settings animasi), dan tambahkan penundaan singkat di antara lapisan seperti yang telah kita lihat sebelumnya untuk membuat animasi lebih aktif dan hidup.

Posisi tunda

Sebelum merangkum Bab 2, saya ingin menunjukkan kepada Anda sebuah animasi. Sekarang, Anda mungkin telah memperhatikan bahwa selalu ada cara untuk melakukan sesuatu, kadang -kadang hanya masalah menemukan yang benar. Bahkan posisi lapisan yang telah kami proses secara statis translateZbisa melakukan sesuatu yang berbeda.

Jika kita menghidupkan lapisan untuk bergerak di sepanjang sumbu-z, dari nol ke seluruh ketinggian teks, dan menambahkan penundaan yang sama antara setiap teks, kita berakhir dengan efek 3D visual yang sama, hanya bergerak.

.layer {
  --n: calc(var(--i) / var(--layers-count));
  --delay: calc(var(--n) * -3s);

  animation: layer 3s var(--delay) infinite ease-in-out;
}

@keyframes layer {
  from { transform: translateZ(0); }
  to { transform: translateZ(calc(var(--layers-count) * var(--layer-offset))); }
}

Ini adalah teknik yang lebih canggih yang cocok untuk animasi yang lebih kompleks. Untuk setiap kasus penggunaan, ini bukan yang Anda butuhkan, tetapi untuk beberapa efek itu terlihat sangat keren.

Meringkaskan

Sejauh ini, kami telah membawa efek teks berlapis ke dalam gerakan, perubahan, dan gaya kreatif. Kami juga melihat bahwa bahkan perubahan kecil dapat memiliki dampak visual yang sangat besar ketika diterapkan di seluruh lapisan.

Tapi, sejauh ini, semua yang telah kami lakukan telah ditentukan sebelumnya dan mandiri. Di bab berikutnya, kami akan menambahkan lapisan interaktivitas. Secara harfiah. Dari sederhana :hover Transisi menggunakan JavaScript untuk melacak posisi mouse, kami akan menerapkan transformasi real-time dan membangun efek benjolan yang sepenuhnya responsif.