Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG

Cara menghidupkan dunia Kesehatan Mental hari SVG pita

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Organisasi Kesehatan Dunia "Mental Kesehatan hari dunia" ada di sini, 10 Oktober 2018, untuk membantu meningkatkan kesadaran di sekitar isu-isu kesehatan mental. Tahun ini fokusnya adalah pada mendorong kita semua untuk mendukung, dan terlibat dengan, program dan layanan yang dapat mencapai orang-orang muda, idealnya efektif mengobati masalah sedini mungkin.

Untuk menandai hari kita akan menggunakan CSS untuk menghidupkan SVG berpusat pada pita hijau banyak orang memakai untuk melambangkan kesadaran kesehatan mental.

Kita akan memiliki dua tangan yang datang bersama-sama dari sisi kiri dan kanan panggung untuk gesper bersama-sama, menggambarkan orang dukungan dapat memberikan satu sama lain, setelah pita hijau akan muncul dengan beberapa teks deskriptif.

Ketika Anda sudah selesai, Anda akan memiliki animasi ini (tekan RERUN jika diperlukan):

1. Dapatkan kode Starter

Saya sudah menyiapkan kode SVG dan HTML untuk Anda terlebih dahulu sehingga Anda hanya dapat fokus pada menggunakan CSS untuk menghidupkan berbagai elemen yang terdiri dari ilustrasi.

Untuk memulai, menciptakan sebuah file HTML kosong, lalu salin dan paste kode yang Anda lihat di bawah:

Simpan dan preview file dalam browser dan Anda akan melihat gambar ini, dengan semua SVG elemen terlihat, beberapa ditumpuk di atas orang lain:

World Mental Health Day 2018 first imageWorld Mental Health Day 2018 first imageWorld Mental Health Day 2018 first image

Mari kita mulai dengan rincian dari setiap elemen termasuk dalam SVG sehingga Anda tahu apa yang kita sedang bekerja dengan.

Pertama, kita memiliki tangan bagian depan yang akan masuk dari sisi kiri SVG:

World Mental Health Day 2018 the handWorld Mental Health Day 2018 the handWorld Mental Health Day 2018 the hand

Kemudian kita memiliki tangan bagian belakang yang akan masuk dari sisi kanan:

World Mental Health Day 2018 right handWorld Mental Health Day 2018 right handWorld Mental Health Day 2018 right hand

Setelah dua tangan terbuka melintang di tengah layar, kita akan menggantinya dengan tangan yang digenggam:

World Mental Health Day 2018 clasped handsWorld Mental Health Day 2018 clasped handsWorld Mental Health Day 2018 clasped hands

Kami kemudian memiliki pita hijau yang melambangkan "kesadaran akan kesehatan mental" yang akan memudar (menjalankan efek fade-in):

World Mental Health Day 2018 green ribbonWorld Mental Health Day 2018 green ribbonWorld Mental Health Day 2018 green ribbon

Teks utama "Hari Kesehatan Mental Dunia" yang akan memudar (fade-in) setelah itu:

World Mental Health Day 2018 text labelWorld Mental Health Day 2018 text labelWorld Mental Health Day 2018 text label

Dan teks tanggal, yang akan menjadi elemen terakhir untuk memudar (fade-in):

World Mental Health Day 2018 subtitleWorld Mental Health Day 2018 subtitleWorld Mental Health Day 2018 subtitle

2. Mulai Menambahkan CSS

Semua yang kita butuhkan untuk animasi kita sudah ada dalam kode SVG, kita hanya perlu menjangkau dan menargetkan elemen didalamnya melalui ID mereka.

Hal pertama yang perlu kita lakukan adalah menyembunyikan semua elemen sehingga nanti kita bisa memunculkan masing-masing elemen pada waktu yang tepat. Tambahkan kode berikut di antara tag <style></style> yang sudah ada pada file HTML yang baru saja Anda buat.

3. Membuat Tangan Depan Masuk Dari Sisi Kiri

Kami akan menggunakan animasi @keyframe untuk setiap bagian dari urutan kami. Animasi pertama yang akan kita buat adalah animasi yang dapat membuat elemen bergerak dari posisi tepi kiri bagian luar SVG ke posisi aslinya di tengah.

Tambahkan kode berikut ke CSS Anda.

Mari kita lalui apa yang kita lakukan dengan kode ini.

Kita hanya perlu memindahkan elemen kita dari satu posisi ke posisi lain, daripada membuatnya zig-zag melalui posisi sementara. Untuk alasan itu kita bisa menggunakan from dan to daripada harus menentukan persentase berdasarkan keyframes.

Pada keyframe from kita akan menggunakan properti transform untuk melakukan translate, contohnya. Memposisikan ulang, elemen hingga ke kiri, posisi yang dinyatakan sebagai -100%. Dalam keyframe to, kami menentukan posisi awal elemen dengan 0%. Animasi keyframe akan secara otomatis menangani pemindahan elemen diantara kondisi from dan to.

Anda juga akan melihat opacity diatur ke 1 pada kedua keyframes. Ini artinya elemen akan muncul diawal animasi, tetap terlihat sampai akhir, lalu kembali ke opacity default 0 yang kita atur sebelumnya dan menghilang sekali lagi. Kita perlu ini terjadi untuk memberi jalan bagi elemen tangan yang digenggam yang akan muncul sesudahnya.

Sekarang kita dapat menerapkan animasi ke elemen tangan bagian depan SVG kami, yang menggunakan ID #fronthand. Tambahkan CSS berikut ke kode Anda.

Di sini kita menentukan nama animasi, contohnya infromleft, yang akan memicu animasi yang baru saja kita buat. Pada baris kedua kami memberi tahu animasi untuk berjalan selama 1,5 detik. Dan di baris ketiga kami memintanya untuk menggunakan fungsi timing animasi ease-out, yang akan membuat gerakan dimulai dengan cepat kemudian melambat menjelang akhir.

Saat Anda menyimpan dan me-refresh halaman Anda sekarang, Anda akan melihat tangan bagian depan masuk dari samping dan berhenti di tengah, seperti yang digambarkan di bawah ini, untuk sesaat sebelum menghilang:

World Mental Health Day 2018 handWorld Mental Health Day 2018 handWorld Mental Health Day 2018 hand

4. Membuat Tangan Belakang Masuk Dari Sisi Kanan

Kami sekarang akan membuat animasi lain yang hampir identik dengan yang pertama, dengan perbedaannya adalah elemen akan bergerak dari sisi kanan, bukan dari sisi kiri. Tambahkan ini ke Style CSS Anda:

Anda akan melihat bahwa di dalam keyframe from, kami menerjemahkan dengan 100%, bukan -100%, yang mendorong titik awal animasi keluar melewati tepi kanan. Semua yang lain dalam kode ini sama dengan animasi terakhir.

Kami akan menerapkan animasi ini ke elemen tangan bagian belakang di SVG dengan menambahkan kode ini:

Sekarang Anda akan melihat kedua tangan menyatu sampai mereka menyilang di tengah sebelum menghilang lagi.

World Mental Health Day 2018 hands crossing overWorld Mental Health Day 2018 hands crossing overWorld Mental Health Day 2018 hands crossing over

5. Membuat Genggaman Tangan

Kami sudah memiliki dua tangan yang terbuka menghilang begitu mereka selesai bergerak. Selanjutnya, kita perlu membuat elemen tangan yang digenggam langsung muncul pada saat yang tepat tangan yang terbuka menghilang.

Untuk mewujudkan ini, kami akan membuat animasi keyframe lain bernama instantappear. Semua animasi ini akan melakukan pengaturan opacity menjadi 1 sepanjang animasi. Tambahkan CSS ini ke file Anda:

Terapkan animasi ke elemen #claspedhands dengan kode ini:

Di sini, pada dua baris pertama kami memanggil animasi instantappear kami dan mengatur duration ke 1 detik.

Pada baris ketiga kami memberi tahu animasi untuk melakukan delay selama 1,5 detik, yang sesuai dengan durasi dua animasi pertama kami. Dengan cara ini begitu mereka selesai, animasi ini akan dimulai.

Kemudian pada baris keempat kami mengatur properti animation-fill-mode untuk melakukan value forwards. Apa yang dilakukan adalah memberi tahu animasi untuk berhenti pada frame terakhirnya dan tetap di sana. Ini akan menjaga elemen mengatur pada opacity dari 1 di keyframe akhir, setidaknya kembali ke opacity default 0 seperti yang dilakukan tangan bagian depan dan belakang kita.

Pratinjau animasi Anda dan ketika sudah selesai Anda akan melihat ini:

World Mental Health Day 2018 clasped handsWorld Mental Health Day 2018 clasped handsWorld Mental Health Day 2018 clasped hands

6. Memudarkan Elemen yang Tersisa dengan Keyframe dapat Digunakan Kembali

Kami hanya perlu satu animasi lagi untuk tiga elemen yang tersisa, yang akan memudar (fade-in) dalam penerapan apa pun. Kita dapat menggunakannya pada setiap elemen dengan pengaturan berbeda untuk menyelesaikan urutan kami.

Membuat animasi baru bernama fadein dan atur ke transisi dari opacity 0 ke opacity 1 seperti ini:

Pita hijau adalah elemen berikutnya yang ingin kita tampilkan, jadi terapkan animasi fadein baru kita dengan CSS berikut:

Di sini kita memiliki efek fade-in yang bertahan selama tiga perempat detik, dan kami menetapkannya untuk mulai pada 1,75 detik, setelah animasi sebelumnya selesai. Sekali lagi kami menggunakan animation-fill-mode: forwards; untuk memastikan opacity elemen tetap pada 1 daripada harus kembali ke default 0.

Ketika urutan Anda selesai sekarang Anda akan melihat ini:

World Mental Health Day 2018 final animationWorld Mental Health Day 2018 final animationWorld Mental Health Day 2018 final animation

Sekarang kita akan membuat teks utama memudar juga. Kami sudah memiliki style #wmhd dalam dokumen, jadi perbarui style tersebut sebagai berikut:

Kami menggunakan kode yang sama seperti yang kami lakukan pada elemen #ribbon, hanya mendorong penundaan (delay) menjadi 2,25 detik sehingga kami mengubah tampilan item.

Animasi Anda sekarang seharusnya selesai pada kondisi ini:

World Mental Health Day 2018 finish stateWorld Mental Health Day 2018 finish stateWorld Mental Health Day 2018 finish state

Akhirnya, kita perlu membuat tanggal muncul, jadi perbarui style #date yang ada ke:

Sekali lagi, satu-satunya perubahan adalah mendorong waktu memulai animasi.

Ringkasan

Dengan potongan kode terakhir itu, animasi Anda sekarang lengkap dan ketika selesai menjalankan akan terlihat seperti ini:

World Mental Health Day 2018 complete clasping hands animationWorld Mental Health Day 2018 complete clasping hands animationWorld Mental Health Day 2018 complete clasping hands animation

Untuk informasi lebih lanjut tentang Hari Kesehatan Mental Dunia, kunjungi website WHO.

Pelajari Semua Tentang Animasi CSS:

Temukan Lebih Lanjut Tentang Animasi SVG:


Advertisement
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.