Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Belajar cara membuat animasi Flip-Down Clock Retro

by
Read Time:10 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Amar Shaleh (you can also view the original English article)

Dalam tutorial ini, kita akan menciptakan animasi flip turun clock terinspirasi oleh 70 's. Menggunakan framework Mootools, saya mencoba untuk meniru action flip bantalan dan membuatnya sehidup mungkin. Dengan itu retro Style, ini bisa menjadi hal yang benar-benar rapi untuk menambahkan ke website Anda, jadi mari kita mulai!


Rincian tutorial

  • Program: Mootools
  • Kesulitan: mudah
  • Perkiraan waktu penyelesaian: ~ 1 jam

Langkah 1: Konsep utama

Jam terdiri dari tiga kelompok gambar: jam, menit dan detik, yang dibagi di bagian atas dan bagian bawah sehingga kita bisa mendapatkan efek "flip". Animasi utama terdiri dari mengurangi ketinggian bagian atas dari 100% menjadi 0%, maka meningkatkan ketinggian bagian bawah dari 0% sampai 100% untuk setiap kelompok di mana digit perubahan. Berikut adalah skema dasar.

Langkah 2: Photoshop

Pertama, kita harus membuat gambar.

Pilih "Rounded Ractangle Too" (U), mengatur radius 10px dan warna untuk #0a0a0a dan membuat 126px oleh 126px ractangle, Anda dapat mengubah dimensi sesuai dengan kebutuhan Anda, hanya menjaga mereka bahkan nomor. Resterize bentuk dengan pergi ke Layer > Rasterize > Shape atau klik kanan > Rasterize layer. Sekarang kami ingin membuat "gap" antara dua bagian dan membuat latar belakang atas sedikit lebih ringan. Tempat panduan baris di setengah horisontal pad kami, kemudian pilih pad lubang (Ctrl + klik pada ikon layer) dan dengan Rectangular Marquee Tool (M) pilih atas setengah di berpotongan mode (tahan Shift + Alt). Sekarang kita hanya perlu mengisi pemilihan dengan #121212 menggunakan Paint Bucket Tool (G). Selanjutnya menelusuri garis 2px, hitam menggunakan garis panduan kami sebagai bantuan, pada layer yang terpisah.

Sekarang kita harus menambahkan angka. Menggunakan Type Tool (T) membuat layer baru dengan angka dan tempat di bawah garis yang telah kita buat sebelumnya.

Tambahkan overlay kecil pada nomor untuk membuat mereka terlihat sedikit lebih realistis. Buat layer baru di atas layer digit, pilih bagian bawah pad dan mengisi dengan #b8b8b8, kemudian mengisi bagian atas dengan #d7d7d7. Sekarang mengatur blending mode untuk "Multiply".

Oke. Sekarang bahwa kita memiliki pad kami selesai, kita harus membagi itu. Ide utama adalah untuk membagi angka tepat dari kiri satu, jadi alih-alih memiliki gambar 60 menit dan detik kelompok, Anda berakhir dengan 20 gambar yang kita akan gunakan untuk kedua kelompok. Jadi pada dasarnya, kita harus membagi pad kami menjadi 4 gambar dengan dimensi yang sama. Saya menggunakan Crop Tool (C) untuk pekerjaan ini.

Setelah Anda crop padnya, mengubah digit dan menyimpan setiap kali sebagai .png terpisah sehingga Anda berakhir dengan semua file yang Anda butuhkan (nomor dari 0 - 9). Ulangi langkah ini untuk semua bagian pad. Perhatikan bahwa untuk pad jam, Anda tidak memisahkan angka, Anda memiliki hanya bagian atas dan bawah. Pada akhirnya di sini adalah struktur folder kami ("Double" selama menit dan detik, "Sinlge" untuk jam):

Langkah 3: HTML Markup

Sekarang kita memiliki file kita siap kita dapat mulai pengkodean. Pertama-tama kita perlu dua wadah untuk gambar kami, satu untuk "upperPart" jam kami dan satu untuk "lowerPart".

Selanjutnya kita tambahkan gambar. Berikut adalah skema dengan id yang saya gunakan:

Aku harus menggunakan gambar transparan spacer yang 1px lebar dan hight sama seperti gambar-gambar lainnya untuk menjaga wadah dari menyusut ketika bantalan flip. Juga, harus tidak ada ruang antara gambar dari kelompok yang sama (misalnya "minutesUpLeft" dan "minutesUpRight").

Oke. Ini akan menjadi bantalan tamu kami jam yang akan flip ke bawah, sekarang kita harus mengatur kembaliannya, sehingga ketika depan bantalan flip, angka baru dapat dilihat pada mereka. Kami akan membungkus apa yang kita lakukan sejauh ini dalam sebuah div dan hanya duplikat ini di atas dirinya sendiri, menambahkan setiap gambar id kata "Back" dan mengubah ke file sumber yang sesuai.

Berikut ini adalah file .html lengkap dengan mengacu stylesheet dan javascript file "animate.js" di mana kita akan menciptakan animasi.

Langkah 4: CSS

Hal utama yang harus kita lakukan sekarang adalah untuk tumpang tindih div "front" dan "back". Pertama kita posisi utama wrapper mana kita membutuhkannya dan kemudian memberikan posisi mutlak yang sama untuk kedua wadah.

Sekarang kita perlu untuk vertikal menyesuaikan bagian atas ke bawah dan bagian bawah ke atas, sehingga bantalan akan terlihat seperti mereka sedang berlabuh ke tengah-tengah jam. Aku menambahkan properti yang tinggi dan visibilitas untuk bagian depan karena kita perlu mereka untuk animasi nanti.

Akhirnya semua harus kita lakukan adalah untuk membatasi lebar bantalan karena kami ingin bermain-main dengan ketinggian mereka. Secara default, jika Anda mengubah salah satu dari mereka, gambar lubang akan discale.

Di sini semua diletakkan bersama-sama:

Step 5: Membuat animasi

Pertama-tama kita perlu beberapa variabel untuk menyimpan waktu yang ditampilkan pada bantalan. Catatan: h = jam, m1 = digit menit kiri, m2 = digit kanan menit, s1 = digit kedua di kiri, s2 = digit kanan kedua.

Sekarang kami menciptakan sebuah fungsi yang akan menjalankan setiap detik dan update jam kami. Pertama kita mendapatkan waktu saat ini dan menentukan waktu hari, AM atau PM.

Kemudian kita bandingkan dengan waktu yang ditampilkan pada bantalan dan mengubah group yang berbeda. Menggunakan fungsi yang disebut "flip" yang saya akan jelaskan dalam satu menit.

Sekarang, fungsi flip. Ini memiliki beberapa parameter: upperId, lowerId = id bantalan atas dan bawah yang akan di flip; changeNumber = nilai baru yang akan ditampilkan; pathUpper, pathLower = path ke file sumber untuk nilai baru. Animasi terdiri dari langkah-langkah berikut:
Pad atas depan membutuhkan nilai kembali satu dan itu dibuat terlihat, overlaing itu, sementara yang lebih rendah juga dibuat terlihat tapi itu tinggi berubah menjadi 0px.

Sekarang kita mengubah back upper dan front lower pad dengan nilai baru.

Memiliki setup ini kita dapat mulai animasi sebenarnya. Seperti yang saya sebutkan sebelumnya terdiri dari mengurangi ketinggian bagian atas menjadi 0%, 0px, dan meningkatkan ketinggian bagian bawah untuk 100%, 63px dalam kasus ini. Setelah animasi selesai, pad rendah mengambil nilai baru dan bantalan depan yang membuat tersembunyi.

Hal terakhir yang harus dilakukan adalah untuk membuat fungsi utama kami dijalankan setiap detik.

Di sini semua diletakkan bersama-sama.

Selesai

Kami selesai! Berharap Anda menikmati bekerja pada proyek kecil ini, itu memiliki konsep yang agak kompleks, tetapi pada akhirnya itu adalah sebuah gadget yang benar-benar rapi untuk website Anda. Jangan ragu untuk mengirim saran yang Anda miliki!


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.