Langsung ke konten utama

Cananimate : Library Animasi CSS yang Ringan dan Mudah Digunakan



Halo semua,apa kabar ? semoga kita selalu dalam keadaan sehat, bahagia, banyak rezeki, dan selalu menjadi pribadi yang lebih baik lagi. Pada kesempatan kali ini izinkan saya untuk memperkenalkan library CSS buatan saya yang mungkin bisa mempermudah pekerjaan kalian sebagai seorang frontend developer untuk mempercantik tampilan website kalian dengan animasi CSS.

Library ini saya beri nama cananimate yang mana dalam penamaan ini saya berharap kedepannya cananimate ini bisa menjadi salah satu library animasi css terbaik di dunia. Hari ini saya berkenan untuk merilis versi pertama (Versi 1.0) cananimate secara terbuka kepada semua orang.

Pada versi pertama ini, tersedia 10 kelas animasi yaitu :
  1. toRight : membuat animasi berjalan ke kanan.
  2. toLeft : membuat efek animasi bergerak ke kiri.
  3. toBottom : membuat efek animasi bergerak ke bawah.
  4. toTop : membuat efek animasi bergerak ke atas.
  5. bounce : membuat efek animasi memantul.
  6. fadeIn : membuat efek animasi timbul.
  7. fadeOut :membuat efek animasi menghilang.
  8. zoomIn : membuat efek animasi diperbesar.
  9. zoomOut : membuat efek animasi diperkecil.
  10. spin : membuat efek animasi berputar seperti roda/soinner.
Masing-masing kelas dapat kalian demonstrasikan melalui web browser kalian dengan membuka file index.html yang telah tersedia pada library cananimate. Library cananimate didesain sangat ringan dan mudah digunakan sehingga siapa saja bisa menginstal dan menggunakannya dengan sangat mudah. Selain itu, cananimate juga bersifat open-source dimana setiap orang bisa melihat, menggunakan, bahkan ikut berpartisipasi dalam pengembangan library animasi cananimate.

Instalasi Cananimate
Proses instalasi cananimate sangatlah mudah, yaitu meliputi langkah-langkah sebagai berikut :
  1. Download file zip cananimate di Cananimate V. 1. 0
  2. Ekstrak file cananimate.zip yang telah kalian download.
  3. Untuk melihat demonstrasi masing-masing kelan animasi, silakan buka file index.html yang terdapat di dalam folder cananimate.
  4. Pindahkan/kopi file cananimate.css yang ada di dalam folder cananimate ke folder projek kalian.
  5. Proses instalasi dilakukan dengan cara menambahkan kode <link rel="stylesheet" href="cananimate.css"> pada tag <head>...</head> dalam file projek kalian.
  6.  Instalasi selesai.

Sekian dan terimakasih untuk artikel kali ini, semoga bermanfaat.

baca juga  Tutorial Membuat Library CSS Responsive Sendiri
Label:

Komentar

  1. Alif Programming7 Desember 2019 pukul 00.23

    apabila menemukan kesulitan dalam proses instalasi, atau terjadi error, silakan komen di sini.

    BalasHapus
  2. Moc.Yunus7 Desember 2019 pukul 01.32

    Mantab... Semoga berkah dan bermanfaat... Ada video tutorial nya bang.. ..

    BalasHapus
    Balasan
    1. Unknown7 Desember 2019 pukul 01.45

      Terimakasih mas yunus atas dukungannya. Untuk video tutorial belum bisa untuk sementara.

      Hapus

Posting Komentar

Postingan populer dari blog ini

Konversi Data JSON ke YAML dengan Python

Halo semua, pada sesi kali ini saya ingin berbagi tutorial sederhana tentang cara mengubah data JSON menjadi YAML. Pada tutorial ini, saya akan menggunakan python dan library bernama FormatFusion. FormatFusion adalah sebuah library/package python yang berfungsi untuk mengkonversi data, untuk lebih detailnya anda bisa mengunjungi website  https://pypi.org/project/FormatFusion/ . Sebelum kita memulai tutorial ini, penting untuk mengetahui apa itu json dan yaml. JSON JSON adalah singkatan dari Javascript Object Notation, ini adalah format pertukaran data yang ringan dan banyak digunakan untuk mengirimkan data antar komputer. Anggap saja sebagai bahasa agar komputer dapat berbicara satu sama lain dengan cara yang mudah dipahami dan efisien untuk dikirimkan. Berikut adalah beberapa hal yang perlu diketahui tentang json: human-readable: Artinya dapat dibaca oleh manusia. Json ditulis dalam plaintext, sehingga mudah dibaca dan dipahami manusia, bahkan bagi mereka yang tidak mengetahui pem...
Posting Komentar
Baca selengkapnya

Tutorial Pemula untuk Menerbitkan Paket Python ke PyPI

Pada tutorial ini, kita akan mencoba untuk mengupload package yang kita buat ke PyPi (Python Package Index). Jika kalian sudah sering menggunakan python, kalian pasti tidak asing dengan perintah pip install saat akan menginstall library pada python.  A. Apa itu PyPi Python Package Index (PyPi) adalah repositori perangkat lunak untuk bahasa pemrograman python. PyPi berfungsi sebagai tempat penyimpanan sentral untuk paket python yang dapat diunduh dan diinstall menggunakan package manager seperti pip. B. Persiapan Sebelum kita dapat mempublikasikan paket kita ke PyPi, ada beberapa persiapan yang perlu kita lakukan terlebih dahulu. Membuat akun PyPi Jika kalian belum memiliki akun PyPi, kalian bisa melakukan registrasi di  https://test.pypi.org/account/register/ . Membuat/mempersiapkan paket yang ingin di publikasi Jika kalian telah berhasil membuat akun atau sudah memiliki akun, hal berikutnya yang perlu disiapkan adalah paket yang akan di publikasi. Berikut struktur paket ...
Posting Komentar
Baca selengkapnya

Cara Mengatasi Error saat Upload Projek Codeigniter ke Web Server

Halo semua, apa kabar ? Semoga kita selalu dalam keadaan sehat, bahagia, dan banyak rezeki, Amin. Hari ini izinkan saya untuk sedikit sharing tentang cara mengatasi error saat kita sedang mengupload projek website kita ke web server. Dalam kasus ini projek website dibuat dengan menggunakan codeigniter. Pada saat akan mengupload website yang telah kita buat ke web server kita terkadang dihadapkan dengan permasalahan seperti terjadi error walaupun pada saat kita jalankan di localhost semuanya berjalan lancar seperti pada gambar di bawah ini. Terkadang kita sering menghadapi masalah seperti pada gambar di atas pada saat mengupload projek kita ke web server. Untuk mengatasi  permasalahan seperti ini sebenarnya cukup mudah. Salah satu cara mengatasinya adalah dengan cara menambahkan ob_start(); setelah kode <?php pada file index.php. Dengan menambahkan kode tersebut error akan hilang dengan sendirinya dan web projek kalian bisa berjalan seperti biasanya. Baiklah sekian...
Posting Komentar
Baca selengkapnya