432 lines
25 KiB
Plaintext
432 lines
25 KiB
Plaintext
<div class="relative min-h-screen overflow-hidden perspective-container">
|
|
<!-- Animated Background Elements -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-slate-50 to-gray-100">
|
|
<div class="absolute inset-0 bg-grid-pattern opacity-[0.03]"></div>
|
|
<div class="absolute top-0 left-0 w-full h-full overflow-hidden">
|
|
<div class="blob blob-1 absolute top-[10%] right-[15%] w-[40vw] h-[40vw] rounded-full mix-blend-multiply filter blur-[80px] animate-blob-slow opacity-20 bg-green-300"></div>
|
|
<div class="blob blob-2 absolute bottom-[5%] left-[20%] w-[35vw] h-[35vw] rounded-full mix-blend-multiply filter blur-[80px] animate-blob-slow animation-delay-2000 opacity-20 bg-amber-300"></div>
|
|
<div class="blob blob-3 absolute top-[30%] left-[10%] w-[30vw] h-[30vw] rounded-full mix-blend-multiply filter blur-[80px] animate-blob-slow animation-delay-4000 opacity-20 bg-green-400"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header Content -->
|
|
<div class="container mx-auto px-4 pt-24 pb-12 md:pt-28 md:pb-16 relative z-10">
|
|
<div class="max-w-4xl mx-auto text-center mb-6">
|
|
<div class="flex justify-center mb-4 animate-fade-in-up" style="animation-delay: 0.2s">
|
|
<div class="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-green-50 to-emerald-50 shadow-sm border border-green-100 group hover:shadow-md transition-all duration-300">
|
|
<div class="w-2 h-2 rounded-full bg-gradient-to-r from-green-500 to-emerald-500 mr-2 animate-pulse"></div>
|
|
<span class="text-xs md:text-sm bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent font-semibold tracking-wider group-hover:tracking-widest transition-all duration-300">SELAMAT DATANG DI ✨</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="relative inline-block animate-fade-in-up" style="animation-delay: 0.4s">
|
|
<span class="text-4xl md:text-6xl lg:text-7xl font-extrabold bg-gradient-to-br from-orange-500 via-amber-500 to-orange-600 bg-clip-text text-transparent leading-tight">Website Resmi</span>
|
|
<div class="absolute -top-6 -right-6 w-16 h-16 text-amber-500 opacity-30 rotate-12 scale-75 md:scale-100">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 17L6.12199 20.5902L7.84752 13.8906L2.31643 9.40983L9.13801 8.80902L12 2.5L14.862 8.80902L21.6836 9.40983L16.1525 13.8906L17.878 20.5902L12 17Z" fill="currentColor"/>
|
|
</svg>
|
|
</div>
|
|
</h1>
|
|
|
|
<div class="h-16 sm:h-20 md:h-24 flex items-center justify-center overflow-hidden animate-fade-in-up" style="animation-delay: 0.6s">
|
|
<span id="typing-text" class="text-2xl md:text-4xl lg:text-5xl font-bold text-gray-800"></span>
|
|
<span id="cursor" class="text-2xl md:text-4xl lg:text-5xl font-bold animate-blink text-gray-800">|</span>
|
|
</div>
|
|
|
|
<p class="text-gray-600 text-lg max-w-2xl mx-auto leading-relaxed mt-6 animate-fade-in-up" style="animation-delay: 0.8s">
|
|
Temukan layanan inovatif dan informasi terkini untuk menjaga kebersihan dan kelestarian lingkungan DKI Jakarta.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Scroll Indicator -->
|
|
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex flex-col items-center opacity-80 animate-bounce-slow">
|
|
<span class="text-xs text-gray-600 mb-2">Scroll</span>
|
|
<svg class="w-5 h-5 text-oren" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3D Cards Container -->
|
|
<div class="relative max-w-7xl mx-auto px-4 pb-20 md:pb-32">
|
|
<div class="cards-container flex flex-col md:flex-row gap-6 md:gap-4 items-center justify-center">
|
|
<!-- Card 1: DLH -->
|
|
<div class="card-wrapper w-full md:w-1/3 perspective">
|
|
<div class="card-3d relative h-80 md:h-[450px] cursor-pointer group transform-gpu transition-all duration-700">
|
|
<div class="card-face card-front absolute inset-0 rounded-2xl overflow-hidden">
|
|
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('@Url.Content("~/assets/images/home/bg-1.jpg")')">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/60 to-transparent"></div>
|
|
</div>
|
|
<div class="absolute inset-0 p-6 flex flex-col justify-between z-10">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-xs font-semibold bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-white border border-white/30">Layanan Utama</span>
|
|
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-white/20 backdrop-blur-sm border border-white/30 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-3xl font-bold text-white mb-2">Dinas Lingkungan Hidup</h3>
|
|
<p class="text-white/80 text-sm">Pengelolaan dan perlindungan lingkungan hidup untuk kualitas hidup yang lebih baik.</p>
|
|
<div class="card-stats flex mt-4 gap-4">
|
|
<div class="stat text-white/90">
|
|
<span class="block text-lg font-bold">52+</span>
|
|
<span class="text-xs uppercase tracking-wide text-white/70">Program</span>
|
|
</div>
|
|
<div class="stat text-white/90">
|
|
<span class="block text-lg font-bold">1.2K+</span>
|
|
<span class="text-xs uppercase tracking-wide text-white/70">Pengguna</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-face card-back absolute inset-0 rounded-2xl bg-gradient-to-br from-green-700 to-green-900 text-white transform-gpu rotateY-180 p-6 flex flex-col justify-between opacity-0">
|
|
<div>
|
|
<h3 class="text-2xl font-bold mb-2">DLH DKI Jakarta</h3>
|
|
<p class="text-sm text-white/80 mb-4">Bertugas melaksanakan pengelolaan dan perlindungan lingkungan hidup di DKI Jakarta.</p>
|
|
<ul class="space-y-2 mb-6">
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 mr-2 text-green-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span class="text-sm">Pengujian kualitas lingkungan</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 mr-2 text-green-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span class="text-sm">Pengelolaan pertamanan</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 mr-2 text-green-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span class="text-sm">Pengawasan lingkungan</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<a href="#" class="block w-full py-3 px-4 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-lg text-center font-medium transition-all">
|
|
Jelajahi Layanan
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: BPS-RW -->
|
|
<div class="card-wrapper w-full md:w-1/3 perspective">
|
|
<div class="card-3d relative h-80 md:h-[450px] cursor-pointer group transform-gpu transition-all duration-700">
|
|
<div class="card-face card-front absolute inset-0 rounded-2xl overflow-hidden">
|
|
<div class="absolute inset-0 bg-cover bg-center" 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-gray-900 via-gray-900/60 to-transparent"></div>
|
|
</div>
|
|
<div class="absolute inset-0 p-6 flex flex-col justify-between z-10">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-xs font-semibold bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-white border border-white/30">Layanan Kebersihan</span>
|
|
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-white/20 backdrop-blur-sm border border-white/30 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-3xl font-bold text-white mb-2">Bank Sampah RW</h3>
|
|
<p class="text-white/80 text-sm">Pengelolaan sampah masyarakat dengan prinsip ekonomi sirkuler.</p>
|
|
<div class="card-stats flex mt-4 gap-4">
|
|
<div class="stat text-white/90">
|
|
<span class="block text-lg font-bold">325+</span>
|
|
<span class="text-xs uppercase tracking-wide text-white/70">Bank Sampah</span>
|
|
</div>
|
|
<div class="stat text-white/90">
|
|
<span class="block text-lg font-bold">4.5K+</span>
|
|
<span class="text-xs uppercase tracking-wide text-white/70">Nasabah</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-face card-back absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-600 to-amber-800 text-white transform-gpu rotateY-180 p-6 flex flex-col justify-between opacity-0">
|
|
<div>
|
|
<h3 class="text-2xl font-bold mb-2">Bank Sampah RW</h3>
|
|
<p class="text-sm text-white/80 mb-4">Pengelolaan sampah berbasis masyarakat untuk ekonomi sirkuler yang berkelanjutan.</p>
|
|
<ul class="space-y-2 mb-6">
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 mr-2 text-amber-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span class="text-sm">Pemilahan sampah</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 mr-2 text-amber-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span class="text-sm">Penghasilan tambahan warga</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 mr-2 text-amber-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span class="text-sm">Mengurangi limbah ke TPA</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<a href="#" class="block w-full py-3 px-4 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-lg text-center font-medium transition-all">
|
|
Jelajahi Layanan
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: AMDAL -->
|
|
<div class="card-wrapper w-full md:w-1/3 perspective">
|
|
<div class="card-3d relative h-80 md:h-[450px] cursor-pointer group transform-gpu transition-all duration-700">
|
|
<div class="card-face card-front absolute inset-0 rounded-2xl overflow-hidden">
|
|
<div class="absolute inset-0 bg-cover bg-center" 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-gray-900 via-gray-900/60 to-transparent"></div>
|
|
</div>
|
|
<div class="absolute inset-0 p-6 flex flex-col justify-between z-10">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-xs font-semibold bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-white border border-white/30">Layanan Perizinan</span>
|
|
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-white/20 backdrop-blur-sm border border-white/30 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-3xl font-bold text-white mb-2">AMDAL</h3>
|
|
<p class="text-white/80 text-sm">Analisis mengenai dampak lingkungan hidup untuk usaha dan kegiatan.</p>
|
|
<div class="card-stats flex mt-4 gap-4">
|
|
<div class="stat text-white/90">
|
|
<span class="block text-lg font-bold">180+</span>
|
|
<span class="text-xs uppercase tracking-wide text-white/70">Perusahaan</span>
|
|
</div>
|
|
<div class="stat text-white/90">
|
|
<span class="block text-lg font-bold">95%</span>
|
|
<span class="text-xs uppercase tracking-wide text-white/70">Kepuasan</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-face card-back absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-700 to-blue-900 text-white transform-gpu rotateY-180 p-6 flex flex-col justify-between opacity-0">
|
|
<div>
|
|
<h3 class="text-2xl font-bold mb-2">Layanan AMDAL</h3>
|
|
<p class="text-sm text-white/80 mb-4">Analisis Mengenai Dampak Lingkungan untuk pembangunan berkelanjutan.</p>
|
|
<ul class="space-y-2 mb-6">
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 mr-2 text-blue-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span class="text-sm">Kajian lingkungan terperinci</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 mr-2 text-blue-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span class="text-sm">Perizinan usaha dan/atau kegiatan</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 mr-2 text-blue-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span class="text-sm">Monitoring dampak lingkungan</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<a href="#" class="block w-full py-3 px-4 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-lg text-center font-medium transition-all">
|
|
Jelajahi Layanan
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<register-block dynamic-section="css" key="cssSlider">
|
|
<style>
|
|
/* Animations */
|
|
@@keyframes fade-in-up {
|
|
0% { opacity: 0; transform: translateY(20px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
@@keyframes bounce-slow {
|
|
0%, 100% { transform: translateY(0) translateX(-50%); }
|
|
50% { transform: translateY(-10px) translateX(-50%); }
|
|
}
|
|
|
|
@@keyframes blob-slow {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(20px, -15px) scale(1.05); }
|
|
50% { transform: translate(0, 15px) scale(0.95); }
|
|
75% { transform: translate(-20px, -5px) scale(1.05); }
|
|
}
|
|
|
|
.animation-delay-2000 { animation-delay: 2s; }
|
|
.animation-delay-4000 { animation-delay: 4s; }
|
|
|
|
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
|
|
.animate-blink { animation: blink 1s step-end infinite; }
|
|
.animate-bounce-slow { animation: bounce-slow 2s ease-in-out infinite; }
|
|
.animate-blob-slow { animation: blob-slow 10s ease-in-out infinite; }
|
|
|
|
/* 3D Card Styling */
|
|
.perspective { perspective: 2000px; }
|
|
|
|
.card-3d {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.card-3d:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.card-face {
|
|
backface-visibility: hidden;
|
|
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card-back {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
/* Card interactive states */
|
|
.card-wrapper:hover .card-3d {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.card-wrapper:hover .card-front {
|
|
opacity: 0;
|
|
}
|
|
|
|
.card-wrapper:hover .card-back {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Grid background */
|
|
.bg-grid-pattern {
|
|
background-image: radial-gradient(circle, #000 1px, transparent 1px);
|
|
background-size: 30px 30px;
|
|
}
|
|
|
|
/* Responsive design enhancements */
|
|
@@media (max-width: 768px) {
|
|
.cards-container {
|
|
max-width: 450px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|
|
</register-block>
|
|
|
|
<register-block dynamic-section="scripts" key="jsSlider">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const texts = ['Dinas Lingkungan Hidup DKI Jakarta'];
|
|
let textIndex = 0;
|
|
let charIndex = 0;
|
|
let isDeleting = false;
|
|
let typingSpeed = 80;
|
|
|
|
const typingElement = document.getElementById('typing-text');
|
|
const cursorElement = document.getElementById('cursor');
|
|
|
|
function typeWriter() {
|
|
const currentText = texts[textIndex];
|
|
|
|
if (isDeleting) {
|
|
typingElement.textContent = currentText.substring(0, charIndex - 1);
|
|
charIndex--;
|
|
typingSpeed = 40;
|
|
} else {
|
|
typingElement.textContent = currentText.substring(0, charIndex + 1);
|
|
charIndex++;
|
|
typingSpeed = 80;
|
|
}
|
|
|
|
if (!isDeleting && charIndex === currentText.length) {
|
|
setTimeout(() => {
|
|
isDeleting = true;
|
|
}, 2500);
|
|
} else if (isDeleting && charIndex === 0) {
|
|
isDeleting = false;
|
|
textIndex = (textIndex + 1) % texts.length;
|
|
setTimeout(() => {
|
|
typeWriter();
|
|
}, 500);
|
|
return;
|
|
}
|
|
|
|
setTimeout(typeWriter, typingSpeed);
|
|
}
|
|
|
|
// Start typing animation
|
|
setTimeout(typeWriter, 1000);
|
|
|
|
// Parallax effect for cards
|
|
const cards = document.querySelectorAll('.card-3d');
|
|
const cardWrappers = document.querySelectorAll('.card-wrapper');
|
|
|
|
cardWrappers.forEach(wrapper => {
|
|
const card = wrapper.querySelector('.card-3d');
|
|
|
|
wrapper.addEventListener('mousemove', (e) => {
|
|
const rect = wrapper.getBoundingClientRect();
|
|
const centerX = (rect.left + rect.right) / 2;
|
|
const centerY = (rect.top + rect.bottom) / 2;
|
|
const posX = e.clientX - centerX;
|
|
const posY = e.clientY - centerY;
|
|
|
|
// Calculate rotation based on mouse position
|
|
const rotateY = (posX / rect.width) * 5;
|
|
const rotateX = (posY / rect.height) * -5;
|
|
|
|
gsap.to(card, {
|
|
rotateX: rotateX,
|
|
rotateY: rotateY,
|
|
duration: 0.5,
|
|
ease: 'power1.out'
|
|
});
|
|
});
|
|
|
|
wrapper.addEventListener('mouseleave', () => {
|
|
gsap.to(card, {
|
|
rotateX: 0,
|
|
rotateY: 0,
|
|
duration: 0.8,
|
|
ease: 'elastic.out(1, 0.5)'
|
|
});
|
|
});
|
|
});
|
|
|
|
// Animate cards on load
|
|
gsap.fromTo(cards,
|
|
{ y: 100, opacity: 0, rotateX: 15 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
rotateX: 0,
|
|
stagger: 0.15,
|
|
duration: 1.2,
|
|
ease: 'back.out(1.5)',
|
|
delay: 0.5
|
|
}
|
|
);
|
|
});
|
|
</script>
|
|
</register-block> |