Kemampuan untuk memanipulasi bentuk dan jalur konten teks sangat kuat. Ini memungkinkan desainer untuk membuat aliran unik dan membuat elemen tertentu menonjol.
Tapi sepertinya efek ini selalu bekerja lebih baik dalam desain cetak. Sementara desainer web memiliki akses ke gambar mengambang di sekitar teks, bel dan peluit lainnya membutuhkan peretasan. Itu berubah, berkat CSS dan JavaScript modern.
Sekarang dimungkinkan untuk menempatkan teks pada jalur khusus yang sangat mirip dengan yang terlihat di cetakan. Yang lebih baik lagi adalah Anda dapat menambahkan animasi dan efek hover untuk lebih meningkatkan pengalaman.
Kemungkinannya tidak terbatas. Untuk membuktikan maksud kami, berikut adalah delapan cuplikan CSS dan JavaScript yang menunjukkan jalur teks khusus. Seperti yang akan Anda lihat, hasilnya bisa sangat mengesankan!
Spanduk Penjualan Elemen TextPath SVG oleh @BrawadaCom
Kumpulan iklan fiktif ini menawarkan dua contoh jalur teks khusus yang menarik. Baik teks ticker yang berbelit-belit dan spanduk teks yang berputar bisa menjadi sempurna untuk sidebar. Masing-masing memanfaatkan Elemen textPath SVG. Tampilannya menarik perhatian dan bahkan bekerja dengan baik di layar kecil.
Lihat Pena Spanduk penjualan oleh @BrawadaCom
Latar Belakang Teks Fluid Gooey dengan Filter SVG oleh Luke Meyrick
Di sini kita memiliki sedikit teks tangga yang menggabungkan HTML dasar dengan penggunaan CSS yang cerdik. Filter SVG membantu menentukan bentuk khusus, sementara Flexbox mendukung tata letak. Seluruh presentasi responsif dan diskalakan dengan indah di setiap ukuran layar.
Lihat Pena Latar Belakang Teks Fluid Gooey oleh Luke Meyrick
Animasi Peregangan Jalur SVG di Hover oleh Evan Jin
Tidak banyak yang bisa dilihat pada pandangan pertama. Tapi arahkan kursor ke teks yang menarik ini dan sactionkan karakter mencapai ketinggian baru – secara harfiah. SVG memastikan bahwa teks terlihat sangat tajam, sedangkan JavaScript membuatnya interaktif. Ini adalah contoh bagaimana jalur teks khusus dapat menambahkan elemen kejutan ke konten Anda.
Lihat Pena Jalur SVG meregangkan animasi saat melayang oleh Evan Jin
Jalur Teks: Cap oleh Peter Nowell
Sedikit teks bulat dapat melakukan keajaiban untuk sebuah logo. Kecocokan dan penyelesaian cuplikan ini sama bagusnya dengan apa pun yang akan Anda temukan di media cetak. Anda bahkan mungkin mengira itu sebagai gambar. Tapi sedikit teks di bagian bawah memang bisa dipilih.
Lihat Pena Jalur Teks: Cap oleh Peter Nowell
Text Path SVG Animation On Scroll oleh Kor
Cuplikan ini menunjukkan bahwa jalur teks juga dapat digunakan untuk menyempurnakan efek gulir. Teks berputar di sekitar jalur berbentuk persegi dan berbalik arah saat menggulir ke atas. Tampilannya halus dan menambah UX tanpa membuatnya berlebihan.
Lihat Pena Text Path SVG Animation On Scroll oleh Kor
Metodologi Mobius oleh Wayne McWilliams
Inilah UI navigasi luar biasa yang menunjukkan bagaimana desain dapat menambahkan konteks ke konten. Dalam hal ini, ini digunakan untuk mengilustrasikan langkah-langkah berbeda dalam suatu proses. Arahkan kursor ke elemen untuk melihat deskripsi teks lengkap di bawah.
Lihat Pena Metodologi Mobius oleh Wayne McWilliams
Animasi Teks Zip-Unzip oleh Cojea Gabriel
Animasi ini menawarkan cara yang menyenangkan untuk mengungkapkan (dan selanjutnya menyembunyikan) konten. Teks bergulir secara vertikal sebelum “membuka ritsleting” sendiri ke salah satu sisi presentasi. Efeknya dibalik untuk meng-zip konten lagi. Pustaka GSAP digunakan bersama dengan SVG.
Lihat Pena Animasi Teks Zip-Unzip oleh Cojea Gabriel
CSS Grid & Shape-Outside Venn Diagram oleh Adrian Roselli
Semua orang menyukai diagram Venn yang bagus, bukan? Dan yang satu ini sangat mengesankan, karena dibuat hanya dengan HTML dan CSS. CSS Grid memungkinkan tata letak sambil memungkinkan teks agar sesuai dengan bentuk wadahnya secara responsif. Gulir ke bawah untuk melihat versi garis besar yang menunjukkan dengan tepat bagaimana setiap penampung dibuat.
Lihat Pena CSS Grid dan Bentuk-Luar Diagram Venn oleh Adrian Roselli
Bentuk Menonjol untuk Tata Letak Web
Saat Anda ingin membuat pernyataan, jalur teks khusus adalah cara yang efektif untuk melakukannya. Mereka sangat fleksibel dan dapat dibuat untuk beradaptasi dengan layar apa pun. Dan jika digabungkan dengan efek lain, mereka akan menambahkan faktor “wow” yang akan dinikmati pengguna.
Ingin melihat lebih banyak lagi contoh jalur teks khusus? Lihat kami Koleksi CodePen!
