Ada banyak cara untuk membuat teks menonjol. Ini bisa sesederhana menempatkannya di judul HTML. Anda mungkin menerapkan warna atau gaya pemformatan dasar lainnya. Tapi itu hanya menggores permukaan dari apa yang mungkin.
Teknik CSS dan JavaScript modern mampu melakukan lebih banyak lagi. Setiap huruf dapat menari di layar dalam animasi yang sangat berurutan. Efek khusus dapat menambah kedalaman seperti 3D, sementara masking memperkenalkan tekstur pada presentasi.
Jika Anda ingin menarik perhatian pengguna – Anda telah datang ke tempat yang tepat. Kami telah mengumpulkan kumpulan cuplikan CSS dan JavaScript yang akan menghidupkan kata-kata Anda.
Cuplikan berikut menjalankan keseluruhan sehubungan dengan kompleksitas dan potensi kasus penggunaan. Dan mereka semua pasti menonjol. Ini dia!
Efek CSS Kata Jatuh oleh Gayane Gasparyan
Inilah salah satu cara untuk membedah sebuah paragraf. Animasi bertenaga JavaScript ini mengambil kata-kata dan menumpuknya di bagian bawah layar. Anda juga dapat menarik dan melemparkannya. Efek ini bisa menjadi cara yang bagus untuk menyempurnakan cloud tag jadul.
Lihat Pena Kata-kata Jatuh oleh Gayane Gasparyan
Font Variabel Jello Melar oleh Pete Barr
Terkadang efek khusus dapat menambahkan konteks pada sebuah kata. Pengambilan “Jello” yang licin ini adalah contoh sempurna. Ini bergoyang – seperti makanan penutup yang populer. Font variabel digunakan bersama dengan SVG untuk membuat mahakarya melenting ini.
Lihat Pena Font Variabel Jello Melar oleh Pete Barr
Animasi Teks Montserrat oleh Claire Larsen
Teks bergaya sangat cocok untuk logo dan judul. Tetapi ketika Anda menambahkan gerakan, itu membawa semuanya ke tingkat yang berbeda. Di sini kita memiliki font Google yang telah dihidupkan dengan beberapa animasi berwarna.
Lihat Pena Animasi Teks: Montserrat oleh Claire Larsen
Pindah ke Mars! oleh Jamie Coulter
Bahkan jika Anda belum siap untuk pindah ke planet merah, animasi ini adalah dunia lain. Urutan pemuatan elemen adalah penarik perhatian, pasti. Dan itu juga sangat cocok dengan estetika retro dari presentasi. Kami mungkin hanya memesan penerbangan.
Lihat Pena Pindah ke Mars! Formulir pemesanan khusus CSS oleh Jamie Coulter
Animasi Pengetikan Kinetik oleh Daybrush
Mengapa puas dengan resume lama yang membosankan jika Anda bisa melakukan sesuatu yang unik? Itulah premis dari skill animasi developer ini. Itu membuat penggunaan tipografi yang sangat baik, bersama dengan skema warna yang sederhana.
Lihat Pena Animasi Pengetikan Kinetik Scene.js oleh Daybrush
Animasi Hover Teks Pelangi oleh Sarah Fossheim
Inilah bukti bahwa Anda tidak perlu berlebihan dalam bergerak. Gradien kerucut CSS digunakan untuk membuat efek “pelangi” yang menyenangkan pada teks ini. Melayang mengubahnya untuk menggunakan warna tunggal.
Lihat Pena Animasi hover teks pelangi oleh Sarah Fossheim
Efek Teks Neon Sederhana oleh Mohammad H Alijany
Tambahkan cuplikan ini ke kategori “less is more”. Efek teks neon sederhana menghadirkan kontras di sini, tetapi detail kecil membuatnya lebih baik. Peredupan teks yang terputus-putus menambah kesenangan dan realisme.
Lihat Pena TEKS NEON oleh Mohammad H Alijany
Animasi Teks NITW oleh cpsdqs
Ada begitu banyak cinta tentang presentasi ini. Ini sederhana, menyenangkan, dan halus. Pergerakan huruf individu terlihat – tapi tidak mengganggu. Dan ada kualitas seperti televisi pada tampilannya. Plus, elemen interaktif berfungsi untuk meningkatkan pengalaman.
Lihat Pena Animasi Teks NITW oleh cpsdqs
Lebih Dari Kata-kata Saja Bisa Dikatakan
Kemampuan mendandani teks dengan kode membuka pintu kreativitas. Dalam situasi yang tepat, pergerakan dan interaktivitas merupakan tambahan yang disambut baik di situs web.
Dan terkadang, hal paling sederhanalah yang membuat perbedaan paling signifikan. Tentu, itu mungkin untuk membuat efek sinematik. Tapi kehalusan juga bisa menonjol secara efektif. Hal yang hebat adalah Anda harus memutuskan apa yang terbaik untuk perpesanan Anda.
Jika Anda ingin melihat lebih banyak cara untuk menyempurnakan kata-kata Anda, lihat kami Koleksi CodePen.
