Kapital teks menyediakan kotak teks bergulir ke . Anda situs jaringan yang melibatkan pembaca dengan kutipan bermanfaat dari isi. Mereka juga disebut ticker (atau ticker berita) dan sering digunakan untuk menampilkan aliran pembaruan berita di bagian atas atau bawah halaman. . Biasanya animasi scrolling dilakukan dengan satu baris isi dalam satu lingkaran sehingga informasi ditampilkan berulang kali. Sayangnya <marquee>
Karena tag html sudah usang, kami mengandalkan CSS dan JavaScript untuk membuat marquees akhir-akhir ini. Namun, dengan Divi, Anda dapat membuat kotak pemilihan sederhana tanpa mengkhawatirkan kode kustom.
Dalam tutorial ini, kami akan menjelaskan betapa mudahnya membuat teks pemilihan sederhana dengan Divi. Kami bahkan akan melihat cara menjeda animasi teks gulir saat mengarahkan kursor dan cara menambahkan teks gulir besar sebagai elemen desain unik untuk tajuk Anda.
Mari kita mulai.
penelitian
Apa yang Anda butuhkan untuk memulai
Untuk memulai, Anda perlu yang berikut:
- Le Tema Divi terpasang dan aktif
- Halaman baru dibuat untuk membangun dari awal di ujung depan (konstruktor visual)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Awal dari Konsepsi
Untuk contoh pertama ini, kita akan membuat persegi panjang teks sederhana untuk satu baris teks. Untuk melakukan ini, kami akan memberi baris lebar maksimum dengan luapan tersembunyi. Selanjutnya, kita akan menambahkan animasi perulangan slide ke modul teks yang berisi baris teks sehingga berulang kali bergeser ke dalam garis, seperti persegi panjang.
Inilah cara melakukannya.
Mulailah dengan membuat bagian reguler dengan baris kolom.
Kemudian, sebelum menambahkan modul, perbarui baris dengan lebar tetap, kotak bayangan, dan radius, seperti:
- Lebar maksimum: 200px
- Pelapis: 10px di bagian atas, 10px di bagian bawah
- Sudut bundar: 10px
- Box Shadow: lihat tangkapan layar
- Overflow horisontal: disembunyikan
- Overflow vertikal: disembunyikan
Tambahkan modul teks
Ketika baris selesai, tambahkan modul teks baru ke baris.
Kemudian perbarui isi tubuh dengan satu baris teks. Untuk saat ini, pastikan baris teks tidak terpecah menjadi baris lain.
- Tubuh: "Ini sebuah kalimat"
Desain modul teks
Perbarui parameter desain modul teks sebagai berikut:
- Margin: -100% di sebelah kiri, 100% di sebelah kanan
Ini memposisikan modul teks di luar kiri baris. Karena garis visibilitas tersembunyi disembunyikan, modul akan disembunyikan sampai kita menambahkan animasi untuk membuatnya terlihat.
- Gaya Animasi: Slide
- Arah animasi: Benar
- Durasi animasi: 5000ms
- Intensitas animasi: 100%
- Animasi Mulai opacity: 100%
- Animasi kurva kecepatan: linier
- Animasi ulangi: Loop
Hasil
Mari kita lihat hasilnya sekarang.
Membuat garis teks lebih panjang
Dalam desain teks pilihan sederhana di atas, kami membatasi lebar garis teks dengan lebar yang sama dengan garis. Namun, jika kita ingin membuat baris teks yang lebih panjang dengan lebar yang sama, kita perlu sedikit mengubah pengaturannya.
Pertama, pada modul teks dan ganti badan teks dengan yang berikut:
Ini adalah fase dengan tautan
Tambahkan lebih banyak lebar dan margin agar pas dengan baris teks terpanjang
Seperti yang mungkin Anda perhatikan, teks dibagi menjadi tiga baris, bukan satu.
Oleh karena itu, kita perlu menyesuaikan margin dan intensitas animasi.
- Lebar: 207%
- Margin: -207% di sebelah kiri, 207% di sebelah kanan
- Intensitas animasi: 75%
Triknya di sini adalah dengan meningkatkan lebar dan memperbarui nilai margin sehingga hanya cukup ruang yang tersisa untuk satu baris teks. Kemudian sesuaikan intensitas animasi tersebut agar tidak ada jeda yang besar antar animasi perulangan.
Hasil
Inilah hasil akhirnya.
Jeda animasi teks pilihan saat mengarahkan kursor
Karena kotak pilihan ini menyertakan tautan, akan sulit bagi pengguna untuk mengeklik tautan saat bergerak. Namun, kita dapat menambahkan sedikit potongan css ke modul teks yang akan menjeda animasi saat hover.
Tambahkan cuplikan CSS untuk menjeda animasi saat mengarahkan kursor
Untuk menambahkan cuplikan css, buka pengaturan modul teks dan tambahkan kode CSS khusus berikut ke elemen utama di bawah tab hover :
state-animasi-main: dijeda;
Hasil akhir
Sekarang lihat hasil akhirnya. Perhatikan bahwa animasi teks berhenti saat kursor mengarahkan kursor ke teks, memungkinkan pengguna untuk mengklik link.
Itu saja untuk tutorial ini, saya harap ini telah mengajari Anda cara menambahkan teks bergulir di Divi.
Saya percaya bahwa versinya telah berubah terlalu banyak sejak tutorial ini dan tidak mungkin lagi untuk bangga dengan artikel Anda
Ya, saya juga berpikir demikian. Kami akan memperbaruinya.
Halo,
Terima kasih untuk tutorial ini, itulah yang saya butuhkan!
Namun saya melakukan konfigurasi yang sama persis di telepon dan modul tetapi sayangnya itu tidak berfungsi atau mungkin lebih.
Apakah ini juga terjadi?
Terima kasih sebelumnya atas pengembalian Anda.
Alexis v
Terima kasih untuk tutorial ini, sangat jelas dan tepat. Sudah selesai dilakukan dengan baik !