Berikut beberapa jenis efek foto bergerak yang bisa dibuat dengan skrip HTML, CSS, dan JavaScript:
1. Efek Parallax Scrolling
Efek ini membuat gambar bergerak lebih lambat atau lebih cepat dibandingkan elemen lainnya saat halaman di-scroll.
Contoh:
```html
<div class="parallax"></div>
<style>
.parallax {
background-image: url('gambar.jpg');
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
```
2. Efek Hover Zoom In/Out
Saat kursor diarahkan ke gambar, gambar akan membesar atau mengecil.
```html
<div class="parallax"></div>
<style>
.parallax {
background-image: url('gambar.jpg');
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
```
2. Efek Hover Zoom In/Out
Saat kursor diarahkan ke gambar, gambar akan membesar atau mengecil.
Contoh:
```html
<img src="gambar.jpg" class="zoom">
<style>
.zoom {
width: 300px;
transition: transform 0.5s;
}
.zoom:hover {
transform: scale(1.2);
}
</style>
```
3. Efek Slideshow (Carousel)
Efek ini memungkinkan gambar berganti secara otomatis dalam interval tertentu.
Contoh:
```html
<div class="slideshow">
<img src="gambar1.jpg" class="slides">
<img src="gambar2.jpg" class="slides">
<img src="gambar3.jpg" class="slides">
</div>
<script>
let index = 0;
function showSlides() {
let slides = document.querySelectorAll(".slides");
slides.forEach(slide => slide.style.display = "none");
index = (index + 1) % slides.length;
slides[index].style.display = "block";
setTimeout(showSlides, 3000);
}
showSlides();
</script>
<style>
.slides { width: 100%; display: none; }
</style>
```
4. Efek GIF atau Cinemagraph
Gambar bisa bergerak sebagian seperti efek cinemagraph menggunakan GIF atau CSS animation.
Contoh:
```html
<img src="gambar.gif" alt="Cinemagraph">
```
5. Efek Fade In/Out
Gambar muncul dan menghilang perlahan-lahan.
Contoh:
```html
<img src="gambar.jpg" class="fade">
<style>
.fade {
animation: fadeEffect 3s infinite;
}
@keyframes fadeEffect {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
</style>
```
Jika ingin efek lain atau skrip lebih kompleks, beri tahu saya!
