10 Cuplikan Kode CSS & JavaScript Teks Animasi Menakjubkan

Anda dapat membuat beberapa efek teks yang cukup mempesona dengan CSS dasar dan beberapa baris JavaScript. Efek ini berkisar dari animasi tampilan teks hingga rotasi 3D atau apa pun yang dapat Anda bayangkan.

Dan dalam posting ini saya telah membuat katalog 10 contoh paling keren dari seluruh web yang menampilkan apa yang dapat Anda lakukan hanya dengan sedikit teks bergaya dan kode CSS.

Anda mungkin juga menyukai Alat Animasi CSS ini.

1. Judul Animasi

Efek judul animasi oleh Robin Treur ini mengikuti gaya banyak film atau video game. Huruf-huruf tersebut mengambil efek 3D yang menonjol menggunakan bayangan teks CSS3 bersama dengan sedikit kemiringan diagonal.

Gaya animasi fade-in mengingatkan saya pada film klasik dari tahun 1930-an dengan teks miring yang sama. Semuanya dikontrol melalui CSS tetapi tombol "restart" dibuat menggunakan JavaScript. Dengan cara ini Anda dapat memutar animasi berkali-kali untuk mendapatkan tampilan yang lebih baik.

2. Menghancurkan

Membuat teks pecah pecah adalah tugas sederhana dengan alat seperti After Effects, tetapi membuat animasi pecah teks dengan kode jauh lebih sulit, membuat pena oleh Arsen Zbidniakov ini cukup mengesankan.

Teks sebenarnya dibangun menggunakan bentuk SVG yang membuat proses animasi sedikit lebih mudah. Ini juga berarti Anda tidak dapat memilih, menyalin, atau berinteraksi dengan teks seperti biasa.

Tetapi Anda dapat menambahkan efek serupa ke situs Anda jika Anda menggunakannya untuk logo atau elemen halaman non-interaktif lainnya.

3. Huruf Memutar

Pengembang Mamun Khandaker mengumpulkan koleksi animasi huruf bengkok ini. Setiap gaya animasi memiliki nama yang berbeda dan Anda dapat menelusuri semuanya dalam satu pena ini.

Saya dapat melihat efek teks ini digunakan pada halaman arahan atau beranda untuk alat/aplikasi web. Ini segera menarik perhatian dan mereka meninggalkan kesan abadi pada pengunjung. Selain itu, semuanya dibuat dengan 100% CSS murni dan sangat mudah untuk diubah.

4. Alfabet Piksel

Efek piksel animasi unik ini benar-benar aneh, namun memesona. Itu sebagian besar bergantung pada JavaScript dan dibuat oleh pengembang Georgi Nikoloff sebagai cara untuk bermain dengan elemen kanvas HTML5.

Ini menggunakan Noto Serif sebagai basis font dan mengubah huruf menjadi elemen lunak di dalam elemen kanvas. JavaScript memecah huruf menjadi titik-titik yang lebih kecil dan ini membentuk dasar animasi.

Saya tidak bisa mengatakan ini akan memiliki banyak kegunaan praktis tetapi ini adalah bukti seberapa jauh animasi web telah berkembang.

5. Mengetik Korsel

Efek ini terkenal populer di portofolio kecil dan situs web agensi. Animasi teks pengetikan sering muncul di header situs dan meniru tampilan seseorang yang mengetik di pengolah kata.

Semuanya terkandung di dalam satu elemen dengan perpaduan yang baik antara animasi CSS dan JavaScript. Terkadang Anda akan melihat situs web menggunakan ini untuk mencantumkan deskripsi pekerjaan mereka, atau riwayat mereka, atau klien yang pernah mereka tangani.

Ini pasti efek yang menyenangkan bila digunakan dalam jumlah sedang . Karena hanya satu kata yang terlihat pada satu waktu, hal itu membatasi keterbacaan halaman, tetapi bila digunakan dengan hemat, ini adalah efek yang sangat keren yang dapat disalin oleh siapa saja.

6. Tyger Tyger

Meminjam kata-kata dari puisi William Blake “The Tyger”, animasi unik karya Joseph Martucci ini benar-benar menarik perhatian Anda.

Fokus di sini tidak begitu banyak pada konten, melainkan pada gaya tipografi dan animasi. Setiap "segmen" teks memiliki gayanya sendiri dengan garis luar teks dan efek bercahaya. Ini adalah contoh yang bagus tentang bagaimana Anda dapat menata beranda untuk menganimasikan teks secara berurutan menggunakan setTimeout() .

7. Jepret SVG

Pustaka Snap.svg open source memungkinkan siapa saja membuat gambar SVG resolusi tinggi hanya dengan sedikit kode. Ini jauh lebih mudah daripada mempelajari program seperti Illustrator dan memungkinkan Anda menghidupkan seperti contoh menyenangkan yang dibuat oleh Alexis Blondin ini.

Semua huruf dibuat secara dinamis melalui JavaScript termasuk karakter acak yang digunakan dalam animasi. Dukungan SVG modern sangat besar dan jenis gambar ini dapat secara radikal mengubah cara kami membangun situs web di tahun-tahun mendatang. Animasi Snap.svg ini hanyalah salah satu contoh dan pastinya sangat keren.

8. Animasi Bracket

Berikut teknik animasi teks lain yang cukup umum yang saya lihat sepanjang waktu. Ini menggunakan tanda kurung dengan teks berputar hampir seperti rolodex pada halaman.

Animasi ini meniru efek korsel pengetikan yang saya sebutkan sebelumnya, kecuali ini dapat dibuat hanya dengan CSS. Itu bergantung pada animasi perulangan kustom yang bergerak dari satu bingkai utama CSS ke bingkai lainnya, setiap bingkai menampilkan kata atau frasa yang berbeda dalam teks yang berputar.

Saya menemukan efek ini jauh lebih halus dan lebih mudah dibaca di beranda. Jika Anda mencari beberapa efek teks keren untuk beranda Anda, ini akan menjadi pilihan yang sangat baik.

9. Kimmie Schmidt yang Tidak Bisa Dipecahkan

Efek logo manis ini dipinjam dari serial Netflix “Unbreakable Kimmie Schmidt”. Semuanya dibuat dengan CSS termasuk gaya teks dan animasi khusus.

Badan halaman memiliki kelas yang memulai animasi, dan kelas ini ditambahkan ke halaman menggunakan JavaScript. Dari sana semuanya adalah CSS murni. Ini sebagian besar menggunakan banyak transformasi untuk menciptakan efek pantulan yang sangat realistis.

Ini adalah contoh lain tentang seberapa banyak yang dapat dilakukan CSS3 jika Anda tahu cara menggunakannya.

10. Mengisi Teks SVG

Terakhir kita sampai pada animasi filler SVG yang sangat unik ini menggunakan campuran bayangan kotak dan properti stroke CSS.

Teks ini dibuat seluruhnya dengan SVG tetapi juga dapat dipilih sehingga Anda dapat menyalin/menempelkan huruf seperti teks biasa. Ini sepenuhnya sesuai dengan semua browser dan animasinya cukup halus sehingga bisa masuk ke situs web mana pun.

Semua animasi teks ini membawa sesuatu yang baru ke dalam tabel. Anda mungkin tidak menemukan semuanya praktis atau dapat digunakan dalam pekerjaan Anda sendiri, tetapi mereka membuktikan hampir semua hal mungkin terjadi dengan pendekatan yang tepat.