152 lines
7.2 KiB
Plaintext
152 lines
7.2 KiB
Plaintext
<div class="select-none w-full flex items-center justify-center py-8 overflow-x-hidden max-w-6xl mx-auto">
|
|
<div class="w-full text-center whitespace-nowrap flex flex-col md:flex-row items-center md:items-stretch justify-center gap-4 md:gap-6 px-4">
|
|
@* Item 1 *@
|
|
<div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[22vw] md:h-[28vh] lg:w-[18vw] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative border-2 border-white/20 hover:border-white/40 overflow-hidden group shadow-lg hover:shadow-xl" style="background-image: url('@Url.Content("~/assets/images/home/bg-1.jpg")')">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent rounded-b-2xl"></div>
|
|
<div class="cover absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-[1px]">
|
|
<h3 class="title text-white text-lg md:text-xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110">DLH</h3>
|
|
</div>
|
|
<div class="absolute top-2 right-2 w-3 h-3 bg-green-700/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse"></div>
|
|
<div class="action-button absolute bottom-4 left-0 right-0 opacity-0 transition-all duration-500 flex items-center justify-center px-4">
|
|
<a href="#" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-2xl backdrop-blur-sm border border-white/10">Telusuri</a>
|
|
</div>
|
|
</div>
|
|
|
|
@* Item 2 *@
|
|
<div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[22vw] md:h-[28vh] lg:w-[18vw] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative border-2 border-white/20 hover:border-white/40 overflow-hidden group shadow-lg hover:shadow-xl" style="background-image: url('https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?auto=format&fit=crop&w=800&q=60')">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent rounded-b-2-2xl"></div>
|
|
<div class="cover absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-[1px]">
|
|
<h3 class="title text-white text-lg md:text-xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110">BPS-RW</h3>
|
|
</div>
|
|
<div class="absolute top-2 right-2 w-3 h-3 bg-green-700/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse"></div>
|
|
<div class="action-button absolute bottom-4 left-0 right-0 opacity-0 transition-all duration-500 flex items-center justify-center px-4">
|
|
<a href="#" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-2xl backdrop-blur-sm border border-white/10">Telusuri</a>
|
|
</div>
|
|
</div>
|
|
|
|
@* Item 3 *@
|
|
<div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[22vw] md:h-[28vh] lg:w-[18vw] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative border-2 border-white/20 hover:border-white/40 overflow-hidden group shadow-lg hover:shadow-xl" style="background-image: url('https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&w=800&q=60')">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent rounded-b-2-2xl"></div>
|
|
<div class="cover absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-[1px]">
|
|
<h3 class="title text-white text-lg md:text-xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110">AMDAL</h3>
|
|
</div>
|
|
<div class="absolute top-2 right-2 w-3 h-3 bg-green-700/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse"></div>
|
|
<div class="action-button absolute bottom-4 left-0 right-0 opacity-0 transition-all duration-500 flex items-center justify-center px-4">
|
|
<a href="#" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-2xl backdrop-blur-sm border border-white/10">Telusuri</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<register-block dynamic-section="scripts" key="jsSlider">
|
|
<script>
|
|
// GSAP logic as received
|
|
const items = document.querySelectorAll(".item");
|
|
const covers = document.querySelectorAll(".cover");
|
|
const actionButtons = document.querySelectorAll(".action-button");
|
|
const isMobile = window.innerWidth <= 768;
|
|
|
|
const expand = (item, i) => {
|
|
const cover = item.querySelector(".cover");
|
|
const button = item.querySelector(".action-button");
|
|
|
|
items.forEach((it, ind) => {
|
|
if (i === ind) return;
|
|
it.clicked = false;
|
|
const otherCover = it.querySelector(".cover");
|
|
const otherButton = it.querySelector(".action-button");
|
|
|
|
gsap.to(otherCover, { opacity: 1, duration: 0.8, ease: "power2.out" });
|
|
gsap.to(otherButton, {
|
|
opacity: 0,
|
|
y: 20,
|
|
duration: 0.5,
|
|
ease: "power2.out",
|
|
});
|
|
gsap.to(it, { scale: 1, rotationY: 0, duration: 0.8, ease: "power2.out" });
|
|
});
|
|
|
|
if (isMobile) {
|
|
gsap.to(items, {
|
|
height: item.clicked ? "18vh" : "12vh",
|
|
duration: 1.5,
|
|
ease: "elastic(1, .6)",
|
|
});
|
|
|
|
item.clicked = !item.clicked;
|
|
gsap.to(item, {
|
|
height: item.clicked ? "35vh" : "18vh",
|
|
duration: 2,
|
|
ease: "elastic(1, .3)",
|
|
scale: item.clicked ? 1.02 : 1,
|
|
});
|
|
} else {
|
|
gsap.to(items, {
|
|
width: item.clicked ? "18vw" : "12vw",
|
|
duration: 2,
|
|
ease: "elastic(1, .6)",
|
|
});
|
|
|
|
item.clicked = !item.clicked;
|
|
gsap.to(item, {
|
|
width: item.clicked ? "48vw" : "18vw",
|
|
duration: 2.5,
|
|
ease: "elastic(1, .3)",
|
|
scale: item.clicked ? 1.05 : 1,
|
|
rotationY: item.clicked ? 5 : 0,
|
|
});
|
|
}
|
|
|
|
gsap.to(cover, {
|
|
opacity: item.clicked ? 0 : 1,
|
|
duration: 0.8,
|
|
ease: "power2.out",
|
|
});
|
|
|
|
gsap.to(button, {
|
|
opacity: item.clicked ? 1 : 0,
|
|
y: item.clicked ? 0 : 20,
|
|
duration: item.clicked ? 0.8 : 0.5,
|
|
delay: item.clicked ? 0.3 : 0,
|
|
ease: "power2.out",
|
|
});
|
|
};
|
|
|
|
items.forEach((item, i) => {
|
|
item.clicked = false;
|
|
item.addEventListener("click", (e) => {
|
|
if (!e.target.closest(".action-button")) expand(item, i);
|
|
});
|
|
|
|
item.addEventListener("mouseenter", () => {
|
|
if (!item.clicked) {
|
|
gsap.to(item, { scale: 1.03, duration: 0.3, ease: "power2.out" });
|
|
}
|
|
});
|
|
|
|
item.addEventListener("mouseleave", () => {
|
|
if (!item.clicked) {
|
|
gsap.to(item, { scale: 1, duration: 0.3, ease: "power2.out" });
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
gsap.fromTo(
|
|
items,
|
|
{ opacity: 0, y: 50, scale: 0.8 },
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
duration: 1,
|
|
stagger: 0.2,
|
|
ease: "back.out(1.7)",
|
|
}
|
|
);
|
|
|
|
setTimeout(() => expand(items[0], 0), 1200);
|
|
});
|
|
|
|
</script>
|
|
</register-block> |