Contoh JavaScript efek animasi
JavaScript adalah bahasa pemrograman yang sering digunakan untuk membuat efek animasi pada halaman web. Animasi dapat membuat halaman web menjadi lebih menarik dan dinamis. Dalam artikel ini, saya akan memberikan contoh beberapa efek animasi yang dapat dibuat menggunakan JavaScript.
Efek Hover pada Tombol
Efek Hover adalah efek animasi yang muncul ketika pengguna mengarahkan kursor mouse ke suatu objek di halaman web. Contoh yang paling umum adalah tombol. Dengan JavaScript, Anda dapat membuat tombol mengubah warna atau ukuran saat diarahkan mouse. Berikut adalah contohnya:
const button = document.querySelector('.tombol');
button.addEventListener('mouseover', function() {
button.style.backgroundColor = 'red';
button.style.fontSize = '20px';
});
button.addEventListener('mouseout', function() {
button.style.backgroundColor = 'blue';
button.style.fontSize = '16px';
});
Efek Scroll pada Halaman Web
Efek Scroll dapat membuat halaman web terlihat lebih dinamis dengan memberikan transisi animasi saat pengguna menggulir halaman. Contoh efek Scroll yang populer adalah efek Parallax. Dengan JavaScript, Anda dapat membuat efek Parallax dengan mudah. Berikut adalah contohnya:
const parallax = document.querySelector('.parallax');
window.addEventListener('scroll', function() {
let offset = window.pageYOffset;
parallax.style.backgroundPositionY = offset * 0.7 + 'px';
});
Efek Modal pada Gambar
Efek Modal adalah efek animasi yang muncul saat pengguna mengklik gambar pada halaman web. Efek ini biasanya digunakan untuk memperbesar gambar dan menampilkan detail gambar yang lebih jelas. Dengan JavaScript, Anda dapat membuat efek Modal dengan mudah. Berikut adalah contohnya:
const gambar = document.querySelector('.gambar');
const modal = document.querySelector('.modal');
const close = document.querySelector('.close');
gambar.addEventListener('click', function() {
modal.style.display = 'block';
});
close.addEventListener('click', function() {
modal.style.display = 'none';
});
Efek Slider pada Gambar
Efek Slider adalah efek animasi yang memungkinkan pengguna untuk melihat gambar-gambar yang berbeda dengan menggeser gambar ke kiri atau ke kanan. Dengan JavaScript, Anda dapat membuat efek Slider dengan mudah. Berikut adalah contohnya:
const slider = document.querySelector('.slider');
const gambar = document.querySelectorAll('.gambar');
let counter = 1;
setInterval(function() {
slider.style.backgroundImage = `url('gambar${counter}.jpg')`;
counter++;
if(counter > gambar.length) {
counter = 1;
}
}, 3000);
Dalam artikel ini, saya telah memberikan contoh beberapa efek animasi yang dapat dibuat dengan JavaScript, seperti efek Hover pada Tombol, efek Scroll pada Halaman Web, efek Modal pada Gambar, dan efek Slider pada Gambar. Dengan JavaScript, Anda dapat membuat efek animasi yang menarik dan membuat halaman web Anda lebih dinamis. Semoga artikel ini bermanfaat untuk Anda.
