Advertisement
  1. Web Design
  2. Complete Websites

Membawa Portofolio Behance menjadi Hidup dengan Animasi CSS

by
Read Time:10 minsLanguages:
This post is part of a series called Build Your Own Behance-Powered Portfolio.
Styling Our Behance Portfolio Website Using LESS

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Pada tutorial sebelumnya, kita telah melihat bagaimana memanfaatkan Behance API untuk mengarahkan halaman web kita, kemudian, menggunakan LESS, kita membuat semua hal terlihat layak tampil. Pada tutorial kali ini, kita akan meningkatkan pengalaman pengunjung dengan manambahkan efek kotak lampu dan beberapa animasi CSS.

Kotak Lampu dan Efek Animasi

Banyak website protofolio kini menerapkan kotak lampu dan beberapa gambar portofolio. Di tutorial kali ini, kita akan menerapkan hal yang sama pada website kita.  Sampul gambar akan ter zoom-in ketika pengguna mengklik nya, begitu juga gambar-gambar lain yang terdapat dalam konten. Sehingga pengguna dapat melihat setiap gambar di dalamnya lebih dekat.

Berikut adalah peralatan yang kita butuhkan untuk mewujudkannya:

Magnific Popup

Kita akan bergantung pada plugin jQuery Lightbox yang disebut Magnific Popup oleh Dmitry Semenov. Aplikasi ini ringan ukurannya, cepat, dan responsif—sempurna seperti yang kita inginkan. 

Animate.css

Kita juga akan bekerja dengan animasi CSS3 untuk membatu website kita untuk hidup. Kita akan mengadopsi beberapa potongan dari Animate.css, yang menyediakan ribuan koleksi animasi CSS3 melalui beberapa kelas drop-in untuk menerapkan animasi dengan segera.

Menyatukan Magnific Popup

Mari mulai dengan menambahkan stylesheet Magnific Popup pada tag  head

Kemudian kita akan menambahkan skrip pada bagian yang lebih rendah pada footer, memberikan halaman kesempatan untuk berubah sebelum skrip yang diterapkan termuat.

Kemudia kita akan menambahkan atribut data HTML5, data-project-id="{{this.id}}" pada elemen figure yang membungkus gambar sampul seperti berikut ini.

Refresh website dan periksa website melalui Chrome DevTools atau Firebug. Anda harusnya dapat menemukan data-project-id mengandung nomor ID dari portofolio, seperti yang terlihat di bawah ini.

Data-project-id dalam elemen figure dengan nomor ID.

Kita akan menggunakan atribut data untuk mendapatkan kembali konten dari portofolio uang dipilih dengan ID yang akan diharuskan nantinya. 

Setelah itu, kita juga akan perlu untuk mengubah tampilan kursor untuk melakukan zoom-in, seperti berikut ini:

Kursor zoom-in akan menyarankan bahwa gambar dapat diperbesar; penggua harusnya dapat memahami bahwa mereka dapat meng-klik gambar. Bagaimanapun, nilai zoom-in masih belum didukung pada versi Internet Explorer manapun, menurut MDN.  Sehingga itulah alasan ita juga perlu merincikan kursor menjadi pointer sebelum cursor: zoom-in untukmenyesuaikan ke belakang bagi Internet Explorer juga untuk browser lainnya yang mungkin juga tidak mendukung program ini.

Membuatnya Bekerja

Sekarang kita akan menambahkan skrip untuk menginisiasi Magnific Popup. Karena rencananya kita tidak hanya menunjukkan gambar sampul, tetapi juga membawa gambar lain dari konten, skripnya mungkin akan terlihat sedikit berat. Jadi di sini kita akan menambahkan skrip secara berurutan. Hal pertama yang akan kita tulis adalah metode jQuery .on('click'). Kita hanya akan melaksanakan Magnific Popup ketika pengguna meng-klik gambar sampul. 

Kemudian kita akan mendefiniskan variabel berikut ini:

  • $this, variabel ‘this’ merujuk pada objek yang terikat pada metode.on()
  • projectID akan berisi $this.data('project-id') yang mengambil nomor ID tersebut dari atribut data-project-id. Kita akan menggunakan ID ini untuk mengambil konten melalui Behance API.
  • beProjectContentAPI akan berisi titik akhir Behance API untuk mengambil konten proyek Behance.
  • keyName, variabel ini membentuk nama kunci yang akan digunakan untuk menyimpan data yang telah diambil dari penyimpanan lokal (localStorage) Behance. Format nama akan menjadi behanceProjectImages- kemudian akan diikuti nomor ID. Berkebalikan dari yang ktia telah lakukan sebelumnya, kita sekarang menggunakan localStorage untuk menyimpan data bukan menggunakan sessioanStorage. Alasan kita melakukannya adalah karena kita menganggap pengguna Behance akan jarang memperbarui kontennya ketika telah dipublikasikan. Jadi, pada kasus tersebut, kita lebih baik menggunakan localStorage, karena ini akan menyimpan data dengan tetap; data akan tetap tersimpan pada browser selama kita tidak dengan sengaja menghapusnya.

Kemudian kita membuat fungsi utama yang akan mengeksekusi Magnific Popup. Kita akan menamakan fungsi ini showGallery(). Kita juga akan menerapkan pilihan berikut ini pada Magnific Popup:

  • items; items sangatlah penting di sini. Ia akan mengandung beberapa daftar gambar yang akan ditampilkan pada Lightbox.
  • gallery; ketika kita memfungsikan galeri, Magnific Popup akan menambahkan tanda panah untuk menavigasi pada masing-masing gambar pada website.
  • type; kita akan menggunakan gambar untuk tipe konten yang diizinkan pada Lightbox.

Potongan terakhir ini tidak dapat dihindari; kita harus menambahkan .magnificPopup('open') sehingga perintah ini akan membuat Lightboz langsung terbuka setelah inisialisasi.

Kita hanya akan mengeksekusi showGallery() dalam beberapa kondisi; jika data untuk portofolio yang dipilih tersedia pada localStorage, ambil file itu kemudian eksekusi showGallery(), atau ambil data dari API dengan $.getJSON() terlebih dahulu, kemudian eksekusi showGallery() dan simpan data pada localStorage untuk digunakan kemudian hari. Seperti yang kita lakukan sebelumnya, kita harus menggunakan  JSON.stringify() untuk mengkonversi data menjadi rangkaian sehingga dapat disimpan pada localStorage, kemudian kita akan menggunakan JSON.parse() untuk memformat data kembali pada JSON.

Memeriksa Gambar

Hal yang perlu kita catat di sini ialah konten yang didapatkan dari API dapat berupa video, embedded video, atau teks, yang tidak diizinkan; kita hanya menerima tipe konten gambar. Untuk itu, sebelum memposting data pada localStorage, kita perlu menambahkan sepotong kode untuk menyaring konten.

Ini adalah skrip keseluruhannya, pada akhirnya.

Sekarang, ketika Anda meng-klik gambar, oa akan diperbesar dan ditampilkan dalam model Lightbox:

Jika Anda memeriksa website dengan Chrome DevTools, Anda sekarang harusnya telah menemukan konten telah tersimpan pada localStorage.

Lebih jauh, Anda dapat menavigasi pada seluruh gambar di konten menggunakan panah. Tetapi, pada transisinya saat ini masih terlihat agak janggal (kan?); gambar langsung melompat pada gambar lainnya secara tiba-tiba. Jadi, mari buat menjadi lebih mulus dan lebih komunikatif dengan beberapa animasi. Mari!

Mengintegrasikan Animate.css

Pertama, kita harus menambahkan mainClass: 'animated' dan removalDelay: 350 pada fungsi Magnific Popup kita.

Pada kode ini, kita menambahkan kelas baru bernama  animated pada Lightbox. Kelas animated ini adalah kelas yang digunakan pada Animate.css untuk mendesain animasi untuk sebuah elemen. Kelas ini akan juga sangat berguna untuk memfungsikan atau menonaktifkan animasi sesuai keinginan Anda; jika Anda ingin menonaktifkannya cukup hapus baris mainClass:'animated'.

Kia juga menambahkan removalDelay, yang menspesifikkan durasi sebelum Lightbox dihilangkan dari DOM secara menyeluruh. Delay (tunda) di sini akan memberikan animasi beberapa saat untuk terlihat.

Mengadaptasi Style Keyframes

Selanjutnya, kita akan mengadopsi beberapa Keyframes dari CSS, Transforms, dan Transitions yang membentuk efek animasi pada Animate.css. kita akan mengkonversinya menjadi format LESS menggunakan LESSHat.

Mari mulai dengan Keyframes.

Kita telah menambahkan beberapa Keyframes bernama fadeInRightfadeInLeftfadeOutRightfadeOutLeftfadeInDown, dan fadeOutDown yang telah diterjemahkan menjadi format LESS menggunakan Mixin LESSHat .keyframes().

Ada beberapa bagian dalam Lightbox yang akan kita animasikan, yakni: lapisan latar belakang yang menutupi keseluruhan viewport, konten Lightbox atau gambar, dan panah navigasi.

Lapisan latar belakang animasi cukup sederhana. Tidak akan memerlukan Keyframes seperti yang ditunjukkan di atas sama sekali, ia akan memudar ke dalam ketika Lightbox muncul dan memudar keluar ketika menghilang. Berikut ini adalah pengaturan semua style untuk mendapatkan animasi tersebut.

Pada Magnific Popup, lapisan atas latar belakang diberikan kelas dengan nama mfp-bg. Pada kode ini, kita mengatur kegelapannya menjadi 0 sehingga ia akan tidak terlihat, dan juga atur durasi transisi untuk mengatur opacity (penggelapan) yang sesuai.

Sebagai tambahan, Megnific Popup akan menghasilkan sebuah set kelas-kelas baru untuk status yang berbeda; misalnya, ketika Lightbox tampil sempurna, ia akan menambahkan kelas mfp-ready. Pada satus ini, kita telah mengatur kegelapannya menjadi 0,8 dalam 350in.

Kemudian ketika Lightbox menghilang, Magnific Popup akan akan menghasilkan kelas mfp-removing. Pada keadaan ini, kita mengatur kegelapan menjadi 0 kembali, membuat lapisan atas latar belakang menjadi tidak terlihat lagi.

Di bawah ini adalah pengaturan style yang menganimasikan konten Lightbox.

Seperti lapisan atas latar belakang, kita juga mengatur durasi Transition (transisi) untuk konten pada 350ms. Kita juga menerapkan Keyframes menggunakan Mixin.animation-name(). Di sini, kita telah mengatur konten untuk memudar ke dalam dan pada saat bersamaan turun ke bawah ketika muncul, kemudian turun ke bawah dan memudar keluar ketika menghilang.

Menganimasi Panah Navigasi

Terakhir, kita akan menambahkan animasi untuk panah Lightbox kita.

Kode di atas ini agak mirip dengan potongan animasi konten. Di sini, panah kiri akan memudar ke dalam dan bergeser dari kanan ketika muncul, kemudian bergeser ke kiri dan memudar keluar ketika menghilang. Panah kanan akan berbuat sebaliknya.

Kesimpulan

Ini adalah seri tutorial yang amat panjang! Kita telah sukses membangun website portofolio personal yang berfungsi dari dasar dengan Behance API sebagai sumber data. Untuk membangun website, kita juga memanfaatkan banyak peralatan modern seperti LESS, HandlebarsJS, dan Animate.css. cukup mudah untuk mengembangkan website, sebab ia hanyalah HTML yang statis – pada kenyataannya, demo kami dinaungi oleh halaman statis GitHub. Pilihan lain, Anda dapat mengunggahnya menggunakan FTP pada penyedia web.

Jika Anda ingin membawa proyek ini lebih jauh, Anda dapat menambahkan, misalnya, sebuah “filter” yang akan menyortir portofolio berdasarkan bidak kreatifnya. . Anda juga dapat menambahkan efek melayang-layang. Apapun itu, saya harap Anda menikmati seri kali ini, dan belajar beberapa trik yang dapat Anda terapkan pada website Anda sendiri.

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.