107 lines
2.7 KiB
Vue
107 lines
2.7 KiB
Vue
<template>
|
||
<div class="relative p-6 text-center max-w-6xl mx-auto">
|
||
<!-- Gambar Happy Birthday di belakang -->
|
||
<img
|
||
src="/happy1.png"
|
||
alt="Happy Birthday"
|
||
class="absolute top-[-59%] left-1/2 transform w-80 md:w-96 opacity-90 z-0 animate-happy-drop"
|
||
/>
|
||
|
||
<h2
|
||
class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8 relative z-10"
|
||
>
|
||
📸 Galeri Foto 📸
|
||
</h2>
|
||
|
||
<!-- Grid galeri -->
|
||
<div
|
||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 relative z-10"
|
||
>
|
||
<div
|
||
v-for="(img, i) in images"
|
||
:key="i"
|
||
class="group relative overflow-hidden rounded-2xl shadow-lg transform hover:scale-105 transition-all duration-500"
|
||
>
|
||
<!-- Overlay saat hover -->
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10"
|
||
></div>
|
||
|
||
<!-- Gambar -->
|
||
<img
|
||
:src="img"
|
||
alt="Galeri"
|
||
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500"
|
||
/>
|
||
|
||
<!-- Teks muncul saat hover -->
|
||
<div
|
||
class="absolute bottom-0 left-0 right-0 p-4 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 z-20"
|
||
>
|
||
<p class="font-semibold">Foto {{ i + 1 }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pesan jika belum ada foto -->
|
||
<div
|
||
v-if="images.length === 0"
|
||
class="bg-white/80 rounded-2xl p-8 shadow-lg relative z-10"
|
||
>
|
||
<p class="text-gray-600 text-lg">Belum ada foto yang diunggah</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
images: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* Animasi jatuh dari atas dan berayun ke kanan–kiri */
|
||
@keyframes happyDrop {
|
||
0% {
|
||
transform: translate(-50%, -200px) rotate(0deg);
|
||
opacity: 0;
|
||
}
|
||
40% {
|
||
transform: translate(-50%, 6px) rotate(4deg);
|
||
opacity: 1;
|
||
}
|
||
60% {
|
||
transform: translate(-50%, 0) rotate(-3deg);
|
||
}
|
||
100% {
|
||
transform: translate(-50%, 0) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@keyframes happySwing {
|
||
0% {
|
||
transform: translate(-50%, 0) rotate(0deg);
|
||
}
|
||
25% {
|
||
transform: translate(-50%, 0) rotate(3deg);
|
||
}
|
||
50% {
|
||
transform: translate(-50%, 0) rotate(0deg);
|
||
}
|
||
75% {
|
||
transform: translate(-50%, 0) rotate(-3deg);
|
||
}
|
||
100% {
|
||
transform: translate(-50%, 0) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
.animate-happy-drop {
|
||
animation: happyDrop 1.5s ease-out forwards, happySwing 4s ease-in-out infinite 1.5s;
|
||
transform-origin: top center;
|
||
}
|
||
</style>
|