Animasi membuka jenis

Tutorial tentang cara membuat menarik animasi 3D membuka jenis efek dengan unsur-unsur pseudo, transisi dan transformasi CSS. Ide didasarkan pada Edenspiekermann's Open Type proyek dan ini adalah cara yang sangat kreatif untuk menampilkan dan bermain dengan huruf

Dalam tutorial ini saya akan menjelaskan bagaimana untuk mencapai 3D menarik yang membuka jenis efek dengan CSS berdasarkan yang saya buat sebelumnya. Percobaan saya benar-benar terinspirasi oleh proyek Open Type Edenspiekermann di Museum Kröller-Müller konsep yang dinamis yang dimainkan dengan cahaya dan bayangan dalam cara yang sederhana namun sangat kreatif. Tujuan dari tutorial ini adalah untuk menunjukkan bagaimana kita dapat membawa beberapa kehidupan ke huruf menggunakan transisi dan transformasi CSS pada pseudo elemen dengan teknik yang akan memungkinkan untuk membuka surat dari semua empat sisi

Markup

Markup diperlukan ini cukup sederhana, hanya rentang yang berisi karakter, tetapi karena kita akan pergi untuk bekerja dengan dihasilkan konten kami harus menambahkan data-atribut kustom untuk mengulangi teks dari setiap huruf. Kami juga akan menggunakan grid sebagai struktur pembungkus utama kami dimana setiap huruf akan dalam daftar item. Jadi, setiap item daftar akan memiliki kelas arah tertentu untuk huruf:
<ul class="grid">
<li class="ot-letter-left">C</li>
<li class="ot-letter-top">J</li>
<li class="ot-letter-right">8</li>
<li class="ot-letter-bottom">A</li>
</ul>

CSS

Mari kita menambahkan beberapa gaya dasar span surat. Akan ada tiga unsur untuk surat kami: bagian bawah gelap yang membuat latar belakang tampak dipotong, Bagian pembukaan dan bayangan yang muncul ketika kita membuka surat. Rentang yang kita styling sekarang, adalah bagian bawah. Kami akan menambahkan properti perspektif span sehingga kita dapat memiliki efek tiga dimensi yang bagus pada elemen palsu.

.grid li span { display: inline-block; font-weight: 900; line-height: 1; position: relative; color: hsla(0, 0%, 0%, 0.6); transform-style: preserve-3d; perspective: 550px; z-index: 1; }

Perhatikan bahwa kami juga telah menambahkan posisi: relatif span karena ini akan membuat pekerjaan posisi mutlak unsur-unsur pseudo.

Untuk mengkloning karakter kita menggunakan properti konten untuk mengakses data-atribut kustom. Kemudian kita akan posisi kedua elemen pseudo kami di atas orang tua mereka (Surat nyata).

.grid li span:before,
.grid li span:after { position: absolute; content: attr(data-letter); line-height: inherit; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; transition: all 0.3s; }
.grid li span:before { text-shadow: none; color: hsla(0, 0%, 0%, 0.12); }

Dengan cara ini, kita akan memiliki tiga lapisan: yang pertama adalah surat gelap kami utama; : sebelum pseudo elemen akan kami bayangan gelap semi-transparan di atasnya, dan lapisan terakhir adalah: setelah elemen palsu, "mengupas" atau bagian pembukaan di atas segalanya.

Pada titik ini saatnya untuk menambahkan transformasi kami. Mari kita lihat di surat yang terbuka di sisi kanan, yaitu mana mengupas terhubung di sebelah kiri: kami akan menggunakan asal mengubah untuk memastikan bahwa sisi kiri akan menjadi engsel rotasi:

ot-letter-left span:before,
.ot-letter-left span:after { transform-origin: 0 50%; }

Sekarang kami akan menambahkan sedikit rotasi 3D pada sumbu y dari: setelah elemen sementara kita skala bayangan pada sumbu y dan menambahkan sedikit condong vertikal untuk itu. Teks-shadow akan membuat sisi pembukaan lebih menonjol, menambahkan ketebalan beberapa "peel" dan menyembunyikan engsel rotasi

.ot-letter-left span:before { transform: scale(1.08, 1) skew(0deg, 1deg); }
.ot-letter-left span:after { text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4); transform: rotateY(-15deg); }

Efek nyata akan sekarang diterapkan pada: hover negara daftar item: kami akan meningkatkan rotasi dan condong elemen pseudo kami sehingga surat akan terbuka dan bayangan akan berubah sesuai:

.ot-letter-left:hover span:before { transform: scale(0.85,1) skew(0deg,20deg); }

.ot-letter-left:hover span:after { transform: rotateY(-40deg); }

Mari kita menetapkan beberapa warna untuk menyelesaikan efek (dalam demo kami, setiap arah akan memiliki warna yang berbeda merah):

.OT-Surat-kiri {}

latar belakang: #e74d3c;

}

.OT-Surat-kiri span {}

teks-shadow:

1px 4px 6px #e74d3c,

0 0 0 hsla (0 0% 0%, 0,3),

1px 4px 6px #e74d3c;

}

.OT-Surat-kiri rentang: setelah {}

warna: #e74d3c;

}

.OT-Surat-rentang kiri: hover: setelah {}

warna: #ea6253;

}

Kami menetapkan warna latar belakang grid item dan kemudian kami akan menerapkan efek teks-shadow inset sedikit ke bagian cut-out (span utama). Itu sebabnya kita perlu untuk mengatur teks-shadow .grid li span: sebelum ke none karena akan mewarisi sebaliknya. : Setelah pseudo elemen, Bagian kulit paling atas, akan mendapatkan warna yang sama sebagai latar belakang dan di hover kami akan membuatnya lebih ringan karena kami sumber cahaya imajiner di sisi berlawanan dari pembukaan.

OpeningType_01

Ini adalah bagaimana efek pembukaan kami bekerja. Ini, kita dapat mengubah arah pembukaan huruf, bermain dengan asal mengubah, sumbu rotasi, sudut condong dan beberapa tweak kecil. Gaya berikut adalah contoh bagaimana efek kami bekerja ke arah bawah:

.OT-Surat-bawah rentang: sebelumnya,

.OT-Surat-bawah rentang: setelah {}

asal mengubah: 50% 0;

}

.OT-Surat-bawah rentang: sebelum {}

mengubah: scale(1,1.05) skew(4deg,0deg);

}

.OT-Surat-bawah rentang: setelah {}

teks-shadow:

0px-1px 0px hsla (360, 100%, 100%, 0.1),

0px 3px 1px hsla (0 0% 0%, 0,4);

mengubah: rotateX(15deg);

}

.OT-Surat-rentang bawah: hover: sebelum {}

mengubah: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);

}

.OT-Surat-rentang bawah: hover: setelah {}

mengubah: translateY(0.045em) rotateX(40deg);

}

Seperti yang Anda lihat, asal mengubah selalu di sisi berlawanan dari pembukaan dan teks-shadow disesuaikan mengikuti logika yang sama.

Juga, sumbu rotasi berubah untuk sumbu x dan keduanya, skala dan condong unsur pseudo bayangan ditetapkan untuk mengikuti arah cahaya (sebanyak yang kita bisa). Sebagai sentuhan akhir, kita bergeser kedua elemen pseudo menggunakan translateY untuk membersihkan sedikit mengimbangi dari engsel.

Download movie terbaru tanpa ribet dan hanya dengan sekali klik. Silakan kunjungi laman berikut Download Movie