78 lines
1.8 KiB
Vue
78 lines
1.8 KiB
Vue
<template>
|
|
<section class="relative w-full max-w-6xl mx-auto text-center px-4 overflow-visible">
|
|
<h1 class="text-orange-700 text-3xl md:text-4xl font-bold mb-8">
|
|
Galeri Foto
|
|
</h1>
|
|
|
|
<!-- Grid Galeri -->
|
|
<div v-if="images && images.length" class="grid grid-cols-2 md:grid-cols-3 gap-4 relative z-10">
|
|
<img
|
|
v-for="(img, index) in images"
|
|
:key="index"
|
|
:src="img"
|
|
alt="gallery"
|
|
class="rounded-xl shadow-lg object-cover h-48 w-full hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
|
|
<div v-else class="text-orange-800 bg-yellow-100 py-8 rounded-2xl shadow-inner relative z-10">
|
|
<p class="text-lg font-semibold">Belum ada foto untuk ditampilkan</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 🟡 Minion Kanan Atas (Gelantungan) -->
|
|
<img
|
|
src="/minion5e.png"
|
|
alt="Minion kanan"
|
|
class="fixed top-0 right-0 w-32 md:w-64 drop-shadow-xl animate-hang z-50 translate-x-[20%] -translate-y-[2%]"
|
|
/>
|
|
|
|
<!-- 🟡 Minion Kiri Bawah -->
|
|
<img
|
|
src="/minion4.png"
|
|
alt="Minion kiri"
|
|
class="fixed bottom-0 left-0 w-43 md:w-64 drop-shadow-xl animate-wave z-50 -translate-x-[15%] translate-y-[5%]"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
images: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 🪄 Animasi Minion Gelantungan (kanan atas) */
|
|
@keyframes hang {
|
|
0%, 100% {
|
|
transform: rotate(4deg) translateY(0);
|
|
}
|
|
50% {
|
|
transform: rotate(-4deg) translateY(6px);
|
|
}
|
|
}
|
|
|
|
/* 🪄 Animasi Minion Melambai (kiri bawah) */
|
|
@keyframes wave {
|
|
0%, 100% {
|
|
transform: rotate(2deg);
|
|
}
|
|
50% {
|
|
transform: rotate(-3deg);
|
|
}
|
|
}
|
|
|
|
.animate-hang {
|
|
animation: hang 3s ease-in-out infinite;
|
|
transform-origin: top center;
|
|
}
|
|
|
|
.animate-wave {
|
|
animation: wave 4s ease-in-out infinite;
|
|
transform-origin: bottom left;
|
|
}
|
|
</style>
|