Efek-Efek jQuery dengan CSS3

jQuery sudah berada di sekitar kita selama 14 tahun. Rasa bangga karena bisa membuat efek-efek animasi dengan begitu mudah kini sudah tidak lagi menarik. Fitur CSS3 transisi dan animasi saat ini sudah didukung oleh hampir semua peramban moderen hingga kita tidak perlu lagi menambahkan prefiks vendor seperti -webkit- dan -moz- pada properti-properti CSS seperti yang telah kita lakukan di masa lalu. Fitur CSS3 transisi dan animasi sudah mampu menangani sebagian besar tugas animasi yang dahulu lebih sering dilakukan oleh jQuery.

Di sini Saya akan menjelaskan bagaimana cara mengganti efek-efek animasi jQuery dengan CSS3. Jika selama ini kalian menggunakan jQuery hanya untuk membuat efek-efek transisi dan animasi semacam ini, maka Saya sarankan kalian untuk menghapus kode jQuery yang kalian punya dan segera beralih ke CSS3 saja. Semoga dengan menerapkan konsep-konsep di bawah ini, kalian dapat secara perlahan berhenti bergantung kepada jQuery.

Efek-Efek Dasar jQuery dengan CSS3 

Efek “Fade” 

Efek “fade-in” dan “fade-out” pada jQuery dapat dibuat dengan mentransisikan nilai transparansi menggunakan CSS3.

div {
  width: 100px;
  height: 100px;
  background: #000;
  opacity: 0;
  transition: opacity .5s ease;
}

/* “fade-in” */
div:hover {
  opacity: 1;
}

div {
  width: 100px;
  height: 100px;
  background: #000;
  opacity: 1;
  transition: opacity .5s ease;
}

/* “fade-out” */
div:hover {
  opacity: 0;
}

Pada efek di atas, ketika nilai transparansi mencapai nol, dimensi elemen masih tetap ada meskipun fisiknya sudah tidak tampak. Efek ini sebenarnya lebih sesuai untuk menggantikan perintah $('div').animate({ opacity: 0 }) dibandingkan dengan $('div').fadeOut().

Pada akhir efek “fade-out”, elemen seharusnya menghilang. Untuk itu kita perlu mentransisikan properti display. Tapi pada CSS, properti display tidak termasuk dalam properti yang dapat ditransisikan, sehingga untuk bisa menyamai efek “fade-out” yang sesungguhnya pada jQuery menjadi tidak mungkin.

Efek “Slide” 

Efek “slide-down” dan “slide-up” pada jQuery dapat dibuat dengan mentransisikan tinggi elemen. Dengan syarat, tinggi awal dan tinggi akhir elemen harus dinyatakan secara spesifik.

div > div {
  …
  height: 0;
  overflow: hidden;
  transition: height .5s ease;
}

/* “slide-down” */
div:hover > div {
  height: 100px;
}

div > div {
  …
  height: 100px;
  overflow: hidden;
  transition: height .5s ease;
}

/* “slide-up” */
div:hover > div {
  height: 0;
}

Efek “slide-down” di atas sebenarnya lebih sesuai untuk menggantikan perintah $('div').animate({ height: '100px' }) dibandingkan dengan perintah $('div').slideDown() karena kita perlu menentukan tinggi akhir yang spesifik. Pada CSS, mentransisikan nilai properti height ke auto tidak bisa dilakukan karena auto bukan nilai tinggi yang dapat ditransisikan.

Terdapat satu cara untuk membuat efek transisi tinggi elemen seolah-olah menuju ke auto, yaitu dengan mentransisikan properti max-height dengan nilai yang sekiranya berada di luar jangkauan, namun tidak begitu jauh sehingga durasi transisi akan tampak normal-normal saja di mata orang awam (meskipun sebenarnya efek animasi transisi masih berlangsung hingga mencapai tinggi maksimal yang telah ditentukan).

div > div {
  …
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}

/* “slide-down” */
div:hover > div {
  /* Tinggi elemen diharapkan kurang dari atau sama dengan 1000 piksel */
  max-height: 1000px;
}

Efek “Show” dan “Hide” 

Efek “show” dan “hide” pada jQuery sebenarnya hanya merupakan penggabungan antara animasi lebar, tinggi dan transparansi pada elemen saja.

div > div {
  …
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: width .5s ease, height .5s ease, opacity .5s ease;
}

/* “show” */
div:hover > div {
  width: 100px;
  height: 100px;
  opacity: 1;
}

div > div {
  …
  width: 100px;
  height: 100px;
  opacity: 1;
  overflow: hidden;
  transition: width .5s ease, height .5s ease, opacity .5s ease;
}

/* “hide” */
div:hover > div {
  width: 0;
  height: 0;
  opacity: 0;
}

Efek “Animate” 

Ini merupakan metode utama jQuery yang menjadi dasar dari efek-efek sebelumnya. Pada jQuery, efek-efek seperti “show”, “hide”, “fade-in”, “fade-out”, “fade-toggle”, “slide-down”, “slide-up”, dan “slide-toggle” merupakan turunan dari efek ini. Dengan metode ini kita bisa menganimasikan semua properti CSS yang valid untuk ditransisikan.

Pada jQuery, warna dan transformasi adalah dua properti CSS yang tidak dapat dianimasikan tanpa menggunakan plugin color dan transform. Pada CSS, menganimasikan warna dan transformasi dapat dilakukan dengan mudah karena sudah merupakan fitur bawaan.

div {
  …
  background: #f00;
  transition: all .5s ease;
}

/* “animate” */
div:hover {
  background: #00f;
  transform: rotate(360deg);
}

Durasi dan Waktu Tunda Transisi dan Animasi 

Durasi dan waktu tunda transisi dapat dinyatakan pada CSS transisi dan animasi. Nilai waktu yang pertama akan menjadi durasi animasi transisi dan nilai waktu setelahnya akan menjadi waktu tunda animasi transisi. Satuan bisa berupa s untuk detik dan ms untuk milidetik.

div {
  …
  /* [properti] [durasi] [tunda] */
  transition: all .5s 1s;
}

Percepatan Transisi dan Animasi 

Pada jQuery dan CSS3, kita lebih biasa menyebut “percepatan” sebagai “easing”. Percepatan transisi standar jQuery meliputi “swing” dan “linear” saja. Namun masih dapat ditingkatkan variasinya dengan menambahkan plugin easing.

Berikut ini adalah daftar percepatan transisi standar pada jQuery:

• linear (bawaan)
• swing (bawaan)
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInSine
• easeOutSine
• easeInOutSine

Berikut ini adalah daftar percepatan transisi standar pada CSS3:

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• cubic-bezier(x1, y1, x2, y2)

Fungsi cubic-bezier() digunakan untuk membuat percepatan kustom sebagaimana ketika kita menggunakan plugin jQuery untuk menambahkan efek-efek percepatan baru pada jQuery. Sebagai contoh, untuk menerapkan efek percepatan easeOutExpo pada CSS, kita menggunakan formula ini:

div {
  transition: height .5s cubic-bezier(.19, 1, .22, 1);
}

Beberapa formula untuk menciptakan efek percepatan transisi seperti yang ada pada jQuery sudah tersedia, namun masih sangat terbatas karena hanya memiliki 4 poin kontrol saja. Hal ini memungkinkan kita untuk membuat efek percepatan transisi sekelas easeOutBack dan easeOutQuad namun tidak untuk efek percepatan transisi sekelas easeOutBounce dan easeOutElastic.

Efek transisi memantul dan elastis tidak bisa dibuat dengan CSS transisi, namun bisa dibuat tiruannya dengan CSS animasi. Sebagai contoh, di sini Saya akan membuat efek animasi memantul dan elastis positif menggunakan formula animasi yang Saya dapatkan dari tautan sebelumnya:

@keyframes ease-out-bounce {
  0% {
    width: 0%;
  }
  12% {
    width: 10.89%;
  }
  24% {
    width: 43.56%;
  }
  36% {
    width: 98.01%;
  }
  54% {
    width: 75.02%;
  }
  74% {
    width: 98.37%;
  }
  82% {
    width: 93.75%;
  }
  92% {
    width: 99.34%;
  }
  96% {
    width: 98.46%;
  }
  100% {
    width: 100%;
  }
}

div:hover > div {
  animation: ease-out-bounce 1s linear forwards;
}

@keyframes ease-out-elastic {
  0% {
    width: 0%;
  }
  16% {
    width: 132.27%;
  }
  28% {
    width: 86.88%;
  }
  44% {
    width: 104.63%;
  }
  59% {
    width: 98.36%;
  }
  73% {
    width: 100.58%;
  }
  88% {
    width: 99.8%;
  }
  100% {
    width: 100%;
  }
}

div:hover > div {
  animation: ease-out-elastic 1s linear forwards;
}

Melihat Kasus di Lapangan 

jQuery begitu populer di masanya karena sangat memudahkan para pengguna untuk membuat efek transisi dan animasi di web. Sayangnya, sebagian besar efek-efek transisi tersebut hanya bermanfaat ketika digunakan pada objek-objek yang saat itu sedang diklik atau disentuh dengan penunjuk. Selain dari itu, fitur-fitur transisi pada jQuery seolah tidak ada gunanya.

Dengan fitur CSS3 transisi dan animasi, efek-efek tersebut sebenarnya dapat diproduksi kembali tanpa perlu menggunakan jQuery. Efek yang dihasilkan nantinya juga relatif sama. Saya sudah membuat beberapa contoh pengaplikasian fitur-fitur CSS3 transisi dan animasi untuk membuat efek-efek animasi jQuery yang dahulu pernah populer di masanya.

Navigasi pada Laman 

Bandingkan antara CSS menu navigasi sebelum diberi efek transisi dan setelah diberi efek transisi “fade” atau “slide”. Sehingga kemudian bisa dikembangkan lagi untuk membuat semacam efek penundaan kemunculan menu-menu navigasi tambahan seperti pada jQuery Superfish.

Pelajari bagaimana Saya membuat efek menggulung pada item-item navigasi hanya dengan CSS3. Dahulu ide ini pernah muncul dari seorang pengembang bernama Soh Tanaka (kalau tidak salah) yang terinspirasi dari desain navigasi pada situs-situs web berbasis Adobe Flash. Sekarang situs web tersebut sudah tidak ada.

Pelajari bagaimana cara membuat efek animasi mengembang pada item-item navigasi yang dahulu hanya bisa dilakukan oleh jQuery.

Deskripsi pada Objek 

Berikut ini adalah konsep sederhana untuk menciptakan efek kemunculan “tooltip” dengan CSS3 transisi saja. Dan ini adalah sebuah galeri foto yang akan memunculkan deskripsi foto dengan efek transisi “slide-up” dari bawah.