Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis.

Penghitung lingkaran animasi adalah cara populer untuk menyajikan informasi (seperti statistik atau metrik) di halaman web dengan interaksi yang menyenangkan. Faktanya, Anda mungkin sudah terbiasa dengan modul penghitung lingkaran Divi, yang membuat penambahan penghitung lingkaran ke situs Divi Anda cepat dan mudah. 

Namun, dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat penghitung lingkaran kustom yang menjadi hidup saat Anda menggulir! Kami tidak memerlukan CSS khusus eksternal untuk membuatnya. Triknya adalah memanfaatkan fungsi Lapisan Divi untuk mengelola beberapa modul yang dilapiskan dan dianimasikan dengan presisi.

Kemungkinan Hasil

Berikut ini adalah ikhtisar singkat dari pembagi lingkaran animasi yang akan kita buat dalam tutorial ini.

penghitung lingkaran animasi pada gulir

Penciptaan penghitung empat lingkaran yang menjadi hidup saat menggulir dengan Divi

Konfigurasi bagian dan garis

Pertama, tambahkan baris empat kolom ke bagian default.

penghitung lingkaran animasi pada gulir

Selanjutnya, buka pengaturan bagian dan tambahkan margin atas dan bawah sehingga kita memiliki cukup ruang untuk menguji efek scrolling penghitung lingkaran yang akan kita buat.

  • Margin: 85vh tinggi, 85vh rendah
penghitung lingkaran animasi pada gulir

Kemudian buka pengaturan jalur dan perbarui yang berikut:

  • Lebar selokan: 1
  • Lebar: 100%
  • Lebar maks: 1200px
penghitung lingkaran animasi pada gulir

Menggunakan tampilan Layers

Sebelum Anda mulai membuat penghitung lingkaran beranimasi, pastikan Anda menerapkan fungsi Lapisan Divi. Anda dapat melakukan ini dengan mengklik ikon lapisan abu-abu di menu pengaturan bawah.

penghitung lingkaran animasi pada gulir

Karena kita akan membuat banyak elemen (atau lapisan) yang tumpang tindih, kotak lapisan pasti akan berguna untuk mengelola lapisan kita di masa mendatang.

Pembuatan penghitung lingkaran animasi # 1 (25%)

Penghitung lingkaran animasi pertama ini akan menganimasikan hingga 25% lingkaran pada gulungan dan memiliki teks persentase yang sesuai dengan bagian tengah yang akan menyatu dengan gulungan. Untuk membangun desain penghitung lingkaran lengkap kita akan menggunakan beberapa pembagi teks dan modul yang tumpang tindih. Begini cara melakukannya.

Lingkaran Belakang

Untuk membuat lingkaran belakang kita akan menggunakan modul pemisah yang akan kita bentuk sebagai lingkaran dan beri warna background.

Tambahkan modul pemisahan
penghitung lingkaran animasi pada gulir

Tarik pembatas ke atas pada tampilan layer dan ubah label menjadi "backcircle". Kemudian buka pengaturan modul pemisahan dan perbarui yang berikut ini:

  • Tampilkan pembagi: TIDAK
  • Warna latar: # c3e0e5
penghitung lingkaran animasi pada gulir

Perbarui parameter desain sebagai berikut:

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda membuat Mudah dan Gratis desain situs web atau blog apa pun dengan tampilan profesional. Berhentilah membayar banyak untuk situs web yang dapat Anda lakukan sendiri.

  • Lebar: 250px
  • Tinggi: 250px
  • Margin: 25 piksel di bagian atas, 25 piksel di bagian bawah, 25 piksel di sebelah kiri
  • Sudut membulat: 50%
penghitung lingkaran animasi pada gulir

Bilah warna yang berputar

Bagian selanjutnya dari penghitung lingkaran adalah bilah warna yang berputar. Gandakan pembagi sebelumnya (lingkaran belakang) untuk meluncurkan kembali desain. Kemudian perbarui pemisah baru dengan label "colorbar".

penghitung lingkaran animasi pada gulir

Untuk membuat efek bilah warna berputar, kita perlu mengubah pembagi ini menjadi setengah lingkaran dengan warna yang ingin kita gunakan untuk bilah.

Buka pengaturan pemisah bilah warna dan perbarui yang berikut:

  • Warna latar: tidak ada
  • Latar belakang gradien warna kiri: # 121b55
  • Warna latar belakang gradien di sebelah kanan: rgba (255,255,255,0)
  • Arah gradien: 90 derajat
  • Posisi awal: 50%
  • Posisi akhir: 0%
penghitung lingkaran animasi pada gulir

Pada beberapa browser, ada masalah kecil yang tumpang tindih yang menunjukkan warna yang tidak diinginkan melalui lapisan. Untuk menghindari ini, kita akan membuat setengah lingkaran ini sedikit lebih kecil dan menyesuaikan offsetnya.

  • Lebar: 248px
  • Tinggi: 248px
penghitung lingkaran animasi pada gulir

Untuk membuat lingkaran bilah warna tumpang tindih dengan lingkaran belakang, berikan pembagi posisi absolut sebagai berikut:

  • Posisi: absolut
  • Offset vertikal: 26 piksel
  • Offset horizontal: 26 piksel
penghitung lingkaran animasi pada gulir

Kemudian tambahkan efek gulir berikut untuk memutar bilah melingkar 90 derajat (atau 25% dari lingkaran).

Di bawah tab Rotary Effects ...

  • Memulai rotasi: 0deg (15% dari jendela)
  • Rotasi rata-rata: 90 derajat (pada 20% -25% dari viewport)
  • Akhir rotasi: 90 derajat (pada 30% viewport)
penghitung lingkaran animasi pada gulir

Apakah Anda ingin menjual produk Anda di internet?

Unduh WooCommerce secara gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress dan dengan mudah membuat toko online Anda. Sempurna untuk pemula.

Persentase dan nilai rotasi di sini mungkin tampak tidak masuk akal pada saat ini. Kami membuatnya lebih mudah untuk memperbarui rotasi nanti saat kami membangun penghitung lingkaran berikutnya yang berakhir pada 180 derajat (50% dari lingkaran). Yang penting pada titik ini adalah rotasi berakhir pada 90 derajat (atau 25%).

Perisai

Elemen selanjutnya dari penghitung lingkaran kita adalah apa yang saya sebut perisai, yang merupakan setengah lingkaran lain yang menyembunyikan sisi kiri lingkaran bilah warna saat berputar.

 Untuk membuat perisai, duplikat modul pemisah Lingkaran Belakang pertama yang kita buat sebelumnya. Lalu seret di bawah modul pemisah "Bilah Warna" dan perbarui labelnya menjadi "pelindung" untuk referensi mudah.

penghitung lingkaran animasi pada gulir

Buka pengaturan pembagi pelindung dan perbarui yang berikut:

  • Warna latar: tidak ada
  • Warna latar belakang gradien kiri: # c3e0e5 (sama dengan lingkaran belakang)
  • Warna latar belakang gradien di sebelah kanan: rgba (255,255,255,0)
  • Arah gradien: 90 derajat
  • Posisi awal: 50%
  • Posisi akhir: 0%
penghitung lingkaran animasi pada gulir

Sekarang berikan modul posisi absolut sebagai berikut:

  • Posisi: absolut
  • Offset vertikal: 25px
  • Offset horizontal: 25 piksel
penghitung lingkaran animasi pada gulir

Lingkaran depan

Bagian selanjutnya dari penghitung lingkaran adalah lingkaran depan, yang akan menyembunyikan bagian tengah dari lapisan sebelumnya dan mengekspos tepi luar.

Untuk membuatnya, duplikat pembagi lingkaran belakang, jatuhkan di bawah modul pembagi pelindung, dan perbarui label menjadi "lingkaran depan".

penghitung lingkaran animasi pada gulir

Buka pengaturan modul pemisahan lingkaran depan dan perbarui yang berikut:

  • Warna Latar Belakang: #ffffff
  • Lebar: 200px
  • Tinggi: 200px
penghitung lingkaran animasi pada gulir

Kemudian tambahkan posisi absolut sebagai berikut:

  • Posisi: absolut
  • Offset vertikal: 50px
  • Offset horizontal: 50px
penghitung lingkaran animasi pada gulir

Jumlah perubahan warna

Bagian terakhir dari penghitung lingkaran pertama ini adalah jumlah perubahan warna yang sesuai dengan nilai yang ditunjukkan oleh bilah putar.

Untuk membangunnya, tambahkan modul teks baru di bawah modul pemisahan lingkaran depan.

penghitung lingkaran animasi pada gulir

Di kotak Lapisan, beri nama modul teks baru "num1". Kemudian buka pengaturan dan perbarui badan untuk membaca "25%".

penghitung lingkaran animasi pada gulir

Di bawah pengaturan desain, perbarui yang berikut:

  • Berat font teks: tebal
  • Ukuran teks: 25px
  • Tinggi baris teks: 2em
  • Penyelarasan teks: pusat
penghitung lingkaran animasi pada gulir
  • Lebar: 200px
  • Tinggi: 200px
  • Sudut membulat: 50%
penghitung lingkaran animasi pada gulir
  • Padding: di atas 75px
  • Posisi: absolut
  • Offset vertikal: 50px
  • Offset horizontal: 50px
penghitung lingkaran animasi pada gulir

Sekarang teks harus dipusatkan dengan sempurna di penghitung lingkaran.

Untuk menambahkan efek fade, perbarui efek gulir berikut:

Di bawah tab Fade In dan Fade Out ...

  • Aktifkan fade in dan out: YES
  • Opacity awal: 0% (pada 10% dari jendela)
  • Opacity rata-rata: 100% (pada 20% dari jendela)
  • Opasitas Akhir: 100% (pada 100% viewport)
penghitung lingkaran animasi pada gulir

Itu untuk meteran melingkar. Temukan hasilnya.

penghitung lingkaran animasi pada gulir

Yang perlu Anda lakukan sekarang adalah menduplikasi apa yang telah kita lakukan sejauh ini di kolom lain dan memodifikasi nilai yang berbeda untuk membuat penghitung menjadi unik.

1 saham
saham1
menciak
Register