cara membuat animasi aos

Cara Membuat Animasi HTML CSS Menggunakan AOS

Taufiksi – Bagaimana caranya membuat efek animasi pada HTML dan CSS dengan menggunakan AOS. Kita akan bahas tuntas di sini.

Saya rasa tidak ada yang belum mengenal AOS apalagi untuk programmer jurusan front end. Karena sudah banyak yang menggunakan ini jika di lihat dari github resminya.

Apa Itu AOS ?

Jadi apa itu AOS dan kegunaannya untuk apa. AOS adalah semacam library yang bisa digunakan untuk mempercantik tampilan website menggunakan animasi.

Singkatan dari AOS adalah Animate On Scroll. Sebenarnya bisa membuat animasi hanya bermodalkan CSS aja, tapi dengan menggunakan library ini akan sedikit lebih mudah.

Mulai Online-kan Projectmu

Udah ngodingnya capek, tapi masih di localhost ? tenang, yang kamu perlukan hanya uploud project ke hosting agar bisa diakses orang lain. Beli hosting sekarang dan dapatkan domain gratis.

Beli Hosting

Yaps, kamu ngga salah baca, AOS merupakan library dari javascript.

Cara Install AOS

Cara install sebenarnya cukup mudah, kamu tapi ada berbagai macam cara. Yang pertama menggunakan npm, yarn dan cdn.

NPM

Kamu bisa menggunakan npm untuk menginstall library ini kedalam project website yang sedang kamu bangun.

Kamu harus sudah menginstall node js terlebih dahulu supaya bisa menggunakan npm

npm install --save aos

YARN

Kamu juga bisa menggunakan yarn untuk menginstall library ini.

yarn add aos

CDN

Yang terakhir kamu bisa menggunakan CDN, dan ini adalah yang paling mudah karena kamu hanya copas beberapa baris code saja dan sudah bisa menggunakan library javascript ini.

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

Udah seperti itu doang. Tag link kamu masukan ke head dan yang script kamu masukan ke body.

Setting AOS

Kamu juga bisa menyetting library ini tapi perlu di ingat masukan script di bawah ini ke dalam body html yang sedang kamu kerjakan.

<script>   
     AOS.init(); 
</script>

Dan kalau sudah kamu bisa menambahkan beberapa code berikut ini supaya bisa setting sesuai selera masing masing.

<script>
AOS.init({
    // Global settings:
    disable: false,
    startEvent: 'DOMContentLoaded',
    initClassName: 'aos-init', 
    animatedClassName: 'aos-animate', 
    useClassNames: false, 
    disableMutationObserver: false, 
    debounceDelay: 50, 
    throttleDelay: 99, 
    

    // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
    offset: 120, 
    delay: 0, 
    duration: 1000, 
    easing: 'ease', 
    once: false, 
    mirror: false, 
    anchorPlacement: 'top-bottom',

});
</script>

Gampang ? Tentu saja.

Macam Macam Animasi AOS

Kemudian apa sih yang bisa di lakukan oleh library javascript macam ini ? Nah berikut ini adalah beberapa macam yang bisa kamu lakukan jika ingin membuat animasi menggunakan AOS.

Fade-up

Yang pertama adalah fade-in, kamu bisa menggunakan efek animasi fade in dengan cara memasukan kode berikut kedalam element html.

data-aos="fade-up"

Contoh penggunaan :

<div class="masterhead" data-aos="fade-up">
  <h1>Hei Bro</h1>
</div>

Semua penerapannya nanti sama aja cuma elemennya aja yang berbeda.

Fade-down

Kemudian kamu juga membuat efek fade tapi kebawah dengan menggunakan library ini, caranya sama dengan fade-up hanya saja nilainya yang di ubah.

data-aos="fade-down"

Fade-right

Dan untuk menggunakan fade-rigt kamu bisa menggunakan code berikut ini.

data-aos="fade-right"

Fade-left

Sama seperti right cuma di ganti left aja.

data-aos="fade-left"

Fade-up-right

Jika menggunakan efek ini maka akan menghasilkan efek dari gabungan up dan right.

data-aos="fade-up-right"

Fade-up-left

Sama juga bedanya gabungan up dan left.

data-aos="fade-up-left"

Fade-down-right

Kemudian ada efek yang dari bawah ke kanan.

data-aos="fade-down-right"

Fade-down-left

Lalu yang terakhir dari efek fade adalah down left.

data-aos="fade-down-left"

Flip-left

Tapi bukan cuma fade doang, kamu juga bisa membuat efek flip dengan menggunakan AOS caranya kamu hanya tinggal menggunakan code berikut ini.

data-aos="flip-left"

Flip-right

Kebalikannya juga bisa yaitu ke kenan

data-aos="flip-right"

Zoom-in

Efek zoom juga bisa di lakukan menggunakan AOS, caranya hampir sama yaitu menggunakan data-aos sebagai berikut.

data-aos="zoom-in"

Zoom-out

Tidak hanya zoom kedalam, tapi juga keluar.

data-aos="zoom-out"

Penutup

Sebenarnya masih banyak lagi cuma agak males nulisnya wkwk. Mau solat jumat juga, babai dulu kali ye.

Cari Tau : Laptop Bisnis Terbaik




Terima kasih sudah membaca artikelnya, tetap semangat jalani harimu meskipun dunia bertolak belakang dengan keinginanmu. Dan jangan lupa ngopi supaya sadar pahitnya dunia tidak semanis mimpi. Ahay

Tertanda Sayang


Taufik Nurhidayah
Traktir Kopi

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.