Haloo teman-teman Dumet School. Kembali lagi dengan saya di Kursus Web Design. Kali ini saya akan membahas tentang Cara Membuat Animasi Zoom Menggunakan W3 CSS. Dimana pada artikel sebelumnya saya sempat membahas tentang animasi spin atau efek berputar. Nah untuk kesempatan kali ini saya akan menggunakan animasi zoom atau efek memperbesar ukuran.Efek animasi Zoom berfungsi untuk memperbesar ukuran atau size dari suatu objek di mulai dari 0 sampai 100%. Animasi zoom ini bisa kita gunakan untuk suatu tulisan gambar atau objek lainnya. Cara untuk menggunakan efek animasi ini sama persis dengan artikel sebelumnya, yaitu tinggal kita sisipkan link W3 CSS lalu k nama kelas yang sudah di sediakan oleh W3 Schools untuk efek animasinya.
Oke teman-teman untuk dapat mengetahui tentang Cara Membuat Animasi Zoom Menggunakan W3 CSS kita langsung saja membuat struktur htmlnya sebagai berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <title> Cara Membuat Animasi Zoom Menggunakan W3 CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <body> <div class="w3-container w3-center w3-animate-zoom"> <h1>Cara Membuat Animasi Zoon Menggunakan W3 CSS</h1> <p>Dumet School Grogol</p> </div> </body> </html> |
Jika sudah teman-teman jangan lupa sisipkan link W3 CSS nya di dalam tag head. Berikut linknya ya teman-teman.
|
1 |
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> |
Nah jika teman-teman buka di browser masing-masing maka div class yang kita berikan class animasi zoom akan muncul dengan efek memperbesar ukuran dari 0 sampai 100%. Disini teman-teman bisa perhatikan scriptnya, dimana pada tag div saya memasukkan class w3-animate-zoom yang berfungsi memberikan animasi terhadap suatu element atau objek dengan efek zoom. Disini ada perbedaan nama class dari artikel sebelumnya dengan efek spin. Karena di efek animasi zoom ini ada tambahan kata-kata animate.
Demikian artikel tentang Cara Membuat Animasi Zoom Menggunakan W3 CSS. Semoga artikel ini dapat bermanfaat untuk teman-teman dan bisa menambah wawasan baru. Teman-teman bisa explore lagi untuk efek animasi yang di sediakan ole W3 CSS. Bisa langsung buka website resminya di w3schools.com. Buat teman-teman yang penasaran silahkan bisa langsung mempraktekannya langsung. Selamat mencoba.