animasi source code sintaks java script untuk animasi website blog dengan library AOS animate on scroll css dan html

Bahasa JavaScript memang sangat powerfull. dengan JavaScript kita bisa membuat tampilan website kita menjadi lebih dinamis dan interaksi web dengan user menjadi lebih baik.

Kali ini kita akan membahas bagai mana cara membuat animasi pada tanpilan website kita menggunakan library dari AOS atau Animate On Scroll.

AOS atau Animate On Scroll adalah library yang memungkinkan kita untuk memberi animasi untuk setiap element dari website kita.

Bagaimana cara membuat dan menggunakannya kedalam web kita? langsung aja..Kuy...

1. Kita harus memasukan tag CSS AOS kedalam Html

    
    <link rel="stylesheet" href="aos-by-red.css">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

2. Memasukan Animasi didalam tag atau bagian yang mau kamu beri animasi

    <div class="div" data-aos="fade-down">
            I am div 1
    </div>

Ada beberapa animasi yang bisa kamu masukan :

data-aos=" fade-down "
data-aos=" fade-left "
data-aos=" fade-rigth "
data-aos=" fade-up "
data-aos=" fade-in "
data-aos=" flip-up "

3. Terakhir kamu masukan code JavaScript AOS dibagian bawah sebelum tag penutup body </body>

    
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
      AOS.init({
        duration: 1000,
        once: true,
      });
    </script>

CONTOH ANIMASINYA SEPERTI DIBAWAH INI :

I am div 1

I am div 2

I am div 3

I am div 4

I am div 5

I am div 6

Source Code - Membuat animasi Scroll dengan Java Script Pemprograman Web