Cara Mendesain Jam Animasi dengan Efek Gulir Divi

Web penuh dengan situs yang membutuhkan aksen desain terkait waktu (optimasi kecepatan, acara mendatang, dll.). Dalam kebanyakan kasus, ikon jam atau grafik dapat bekerja dengan baik. Tapi, membuat desain jam animasi pasti akan memberikan “putaran” unik pada desain website Anda.

Dengan semua opsi desain bawaan yang tersedia di Divi, kami dapat membuat desain jam animasi yang mengagumkan dari awal. Dalam tutorial ini, kita akan membuat jam animasi yang akan memutar jarum jam saat pengguna menggulir halaman ke bawah.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Unduh Tata Letak Jam Animasi GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Bagian 1: Mendesain Tampilan Jam

Untuk memulai, tambahkan baris satu kolom ke bagian reguler.

Pengaturan Baris

Sebelum menambahkan modul apa pun, buka pengaturan baris dan perbarui yang berikut:

• Warna Latar Belakang: #003a5c

Di bawah tab desain, perbarui yang berikut ini:

• Lebar Talang: 1
• Lebar: 50vw
• Lebar Maks: 500px
• Tinggi: 50vw
• Tinggi Maks: 500px

• Sudut Bulat: 50%
• Lebar Perbatasan: 15px
• Warna Perbatasan: #ffffff

• Bayangan Kotak: lihat tangkapan layar
• Posisi Vertikal Bayangan Kotak: 0px
• Kekuatan Buram Bayangan Kotak: 68px
• Warna Bayangan: rgba (0,0,0,0.22)

Di bawah tab Lanjutan, perbarui opsi visibilitas sebagai berikut:

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Bagian 2: Menambahkan Penanda Jam

Setelah baris dirancang sebagai tampilan jam, kita siap untuk menambahkan penanda jam yang mewakili dua belas jam, tiga jam, enam jam, dan sembilan jam. Setiap penanda akan dibuat menggunakan modul pembagi.

Penanda Jam 12

Mulailah dengan menambahkan modul pembagi baru di dalam baris.

Kemudian perbarui warna latar belakang sebagai berikut:

• Warna Latar Belakang: #78acf4

• Lebar: 10vw
• Lebar Maks: 150px
• Tinggi: 3px
• Sudut Bulat : 8px
• Transformasi Putar Sumbu Z: 90 derajat

Di bawah tab lanjutan, berikan pembagi posisi absolut:

• Posisi: Absolut
• Lokasi: tengah atas

Penanda Jam 6

Untuk membuat penanda jam 3, duplikat pembagi yang digunakan untuk membuat penanda jam 12. (Pada titik ini adalah ide yang baik untuk memberi label modul Anda di dalam modal Layers.) Kemudian buka pembagi duplikat dan perbarui lokasi posisi sebagai berikut:

• Lokasi: tengah bawah

Penanda Jam 3

Untuk membuat penanda jam 3, duplikat penanda jam 6. Kemudian buka pengaturan untuk duplikat baru (pastikan untuk memberi label “jam 3”) dan ubah yang berikut:

• Lokasi: kanan tengah

Kemudian perbarui opsi transformasi sebagai berikut:

Di bawah tab terjemahan…

• Transformasi Terjemahkan Sumbu X: 50%

Di bawah tab Rotasi

• Transform Putar Sumbu Z: 0deg

Penanda Jam 9

Untuk membuat penanda jam 3, duplikat penanda jam 6. Kemudian buka pengaturan untuk duplikat baru (pastikan untuk memberi label "jam 9") dan ubah yang berikut:

• Lokasi: kiri tengah

Kemudian perbarui opsi transformasi sebagai berikut:

Di bawah tab terjemahan…

• Transformasi Terjemahkan X Sumbu: -50%

Bagian 3: Membuat Jarum Jam (Kedua, Menit, dan Jam)

Setelah penanda jam terpasang, kita siap untuk mulai membuat jarum jam. Kita akan mulai dengan tangan kedua.

Tangan Kedua

Untuk membuat jarum detik, duplikat pembagi jam 12 dan seret ke bawah sisa pembagi di kolom menggunakan modal Layers.

Kemudian beri label duplikat baru "kedua".

Buka pengaturan modul dan perbarui posisi di bawah tab Lanjutan:

• Lokasi: pusat pusat

Di bawah tab desain, perbarui ukurannya sebagai berikut:

• Lebar: 20vw
• Lebar Maks: 200px
• Tinggi: 0.5vw
• Tinggi Maks: 7.5px

Sekarang jarum detik berada di tengah permukaan jam, tetapi kami ingin bagian bawah jarum detik dimulai di tengah seperti jarum jam biasa. Kemudian kita ingin bagian bawah tangan tetap berada di tengah sebagai titik awal yang berputar sehingga tangan akan dapat berputar seperti pada jam sebenarnya. Untuk melakukan ini, kita perlu menggunakan kombinasi opsi transformasi untuk memposisikan dan memutar pembagi dari asal transformasi tertentu.

Perbarui berikut ini:

Di bawah tab terjemahan…

• Transformasi Terjemahkan X Axis: 0% (ini adalah langkah penting)

Di bawah tab Rotasi…

• Transform Putar Sumbu Z: -90deg

Di bawah tab Asal…

• Transform Origin: Kiri Tengah

Karena tangan ini akan bergerak sangat cepat setelah kita menambahkan efek gulir, mari beri warna latar semi-transparan agar tidak terlalu mengganggu.

• Warna Latar Belakang: rgba(175,175,175,0.12)

Jarum Menit

Untuk membuat jarum menit, duplikat modul jarum detik dan beri label "menit" duplikat. Kemudian buka modul pembagi baru dan perbarui warna latar belakang:

• Warna Kiri Gradien Latar Belakang: #78acf4
• Warna Kanan Gradien Latar Belakang: #b0b9ff
• Arah Gradien: 90 derajat

Kemudian perbarui desain sebagai berikut:

• Lebar: 15w
• Lebar Maks: 150px
• Tinggi: 1vw
• Tinggi Maks: 15px

Jarum Jam

Setelah jarum menit selesai, duplikat modul jarum detik dan beri label "jam" duplikat. Kemudian buka modul pembagi baru dan perbarui warna latar belakang sebagai berikut:

• Warna Latar Belakang: #ffffff

Kemudian perbarui ukuran di bawah tab desain sebagai berikut:

• Lebar: 10vw
• Lebar Maks: 100px

Pada titik ini, Anda akan memiliki ketiga jarum jam yang siap untuk efek gulir!

Bagian 4: Menambahkan Efek Rotasi Gulir ke Setiap Jarum Jam

Untuk memutar jarum jam, kita akan menambahkan efek gulir rotasi ke masing-masing dari tiga jarum jam. Karena kita bekerja dengan desain jam, penting untuk diingat bahwa kita dapat menggunakan derajat rotasi pada setiap jarum jam untuk mewakili waktu sebenarnya. Misalnya, memutar jarum jam 30 derajat akan mewakili jam 1, 60 derajat akan menjadi jam 2, dan seterusnya.

Efek Gulir Rotasi Jarum Jam

Pertama, kita akan menambahkan efek gulir rotasi ke jarum jam. Buka pengaturan pembagi jarum jam dan tambahkan efek transformasi berikut:

Di bawah tab rotasi…

• Aktifkan Rotasi: YA
• Rotasi Mulai: 0 derajat (pada 10%)
• Rotasi Pertengahan: 15 derajat (pada 50%)
• Rotasi Akhir: 30 derajat (pada 90%)

Efek Gulir Rotasi Tangan Menit

Selanjutnya, kita akan menambahkan efek gulir rotasi ke jarum menit. Buka pengaturan pembagi jarum menit dan tambahkan efek transformasi berikut:

Di bawah tab rotasi…

• Aktifkan Rotasi: YA
• Rotasi Mulai: 0 derajat (pada 10%)
• Rotasi Pertengahan: 180 derajat (pada 50%)
• Rotasi Akhir: 360 derajat (pada 90%)

Efek Gulir Rotasi Tangan Kedua

Selanjutnya, kita akan menambahkan efek gulir rotasi ke jarum detik. Buka pengaturan pembagi bekas dan tambahkan efek transformasi berikut:

Di bawah tab rotasi…

• Aktifkan Rotasi: YA
• Rotasi Mulai: 0 derajat (pada 10%)
• Rotasi Pertengahan: 5400 derajat (pada 50%)
• Rotasi Akhir: 10800deg (pada 90%)

CATATAN: Rotasi yang akurat untuk jarum detik untuk mencapai 1 jam akan membutuhkan rotasi 21600 derajat. Tapi karena itu terlalu cepat, saya pikir yang terbaik adalah memotongnya menjadi dua. Bagaimanapun, ini untuk tujuan desain.

Hasil Akhir

Berikut adalah desain akhir.

Dan ini adalah hasil akhir dari efek scroll. Perhatikan bagaimana waktu berlalu tepat satu jam saat menggulir halaman ke bawah.

Pikiran Akhir

Sungguh menakjubkan bahwa kita dapat membuat desain jam seperti ini dengan efek gulir yang mewakili waktu dengan sangat akurat. Jangan ragu untuk bereksperimen dengan menambahkan lebih banyak efek gulir rotasi untuk mempercepat dan memperlambat waktu pada jam saat menggulir. Plus, Anda dapat menggunakan desain jam ini untuk menonjolkan banyak CTA atau header.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!