izu/student-web-if-development-kit
2
0
Fork 11
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat: add animation

Browse Source
This commit is contained in:
tistopandita
2026-06-05 13:09:29 +07:00
parent ad70dbd2d5
commit b856dce066
2 changed files with 103 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/HarusSelesaiKP/index.html
+38 -19
View File
@@ -1277,13 +1277,12 @@
<section class="hero-section">
<div class="hero-overlay"></div>
<h1 class="hero-title">
<h1 class="hero-title reveal">
Study at
<span class="highlight-text">Universitas Tanjungpura</span> Pontianak
</h1>
<p class="hero-description" data-skp-i18n="skp_hero_desc">
<p class="hero-description" data-skp-i18n="skp_hero_desc">
<p class="hero-description reveal" data-skp-i18n="skp_hero_desc">
Kuliah di kampus unggulan Kalimantan Barat dengan fasilitas lengkap,
lingkungan nyaman dan kehidupan mahasiswa yang terjangkau
</p>
@@ -1291,12 +1290,12 @@
<!-- ABOUT SECTION -->
<section class="about-section">
<div class="about-image-wrapper">
<span class="image-bg-decorator"></span>
<div class="about-image-wrapper reveal>
<span class=" image-bg-decorator"></span>
<div class="main-image"></div>
</div>
<div class="about-content">
<div class="about-content reveal">
<span class="eyebrow-component" data-skp-i18n="skp_about_eyebrow">Tentang Untan</span>
<h2 class="about-title" data-skp-i18n="skp_about_title">
@@ -1337,7 +1336,7 @@
<section class="facilities-section">
<span class="eyebrow-component" data-skp-i18n="skp_fac_eyebrow">Fasilitas Kampus</span>
<h2 class="facilities-title" data-skp-i18n="skp_fac_main_title">
<h2 class="facilities-title reveal" data-skp-i18n="skp_fac_main_title">
Fasilitas Kampus untuk Pengalaman Belajar yang Nyaman
</h2>
@@ -1348,10 +1347,10 @@
<section class="campus-section">
<span class="eyebrow-component" data-skp-i18n="skp_campus_eyebrow">Kehidupan Kampus</span>
<h2 class="campus-title" data-skp-i18n="skp_campus_title">
<h2 class="campus-title reveal data-skp-i18n=" skp_campus_title">
Aktivitas Mahasiswa & Organisasi Kampus
</h2>
<p class="campus-subtitle" data-skp-i18n="skp_campus_subtitle">
<p class="campus-subtitle reveal data-skp-i18n=" skp_campus_subtitle">
Mahasiswa UNTAN memiliki berbagai kesempatan untuk berkembang melalui
organisasi, UKM, komunitas, dan kegiatan ekstrakurikuler.
</p>
@@ -1367,8 +1366,8 @@
<section class="pontianak-city-section">
<div class="pontianak-overlay"></div>
<div class="pontianak-content">
<span class="eyebrow-component" data-skp-i18n="skp_pontianak_eyebrow">Kota Pontianak</span>
<div class="pontianak-content reveal>
<span class=" eyebrow-component" data-skp-i18n="skp_pontianak_eyebrow">Kota Pontianak</span>
<h2 class="pontianak-title" data-skp-i18n="skp_pontianak_title">
Live In Pontianak
</h2>
@@ -1387,7 +1386,7 @@
<section class="destination-section">
<span class="eyebrow-component" data-skp-i18n="skp_dest_eyebrow">Wisata & Destinasi</span>
<h2 class="destination-title" data-skp-i18n="skp_dest_title">
<h2 class="destination-title reveal data-skp-i18n=" skp_dest_title">
Tempat Menarik di Pontianak
</h2>
@@ -1400,7 +1399,7 @@
<section class="culinary-section">
<span class="eyebrow-component" data-skp-i18n="skp_cul_eyebrow">Cafe & Kuliner</span>
<h2 class="culinary-title" data-skp-i18n="skp_cul_title">
<h2 class="culinary-title reveal" data-skp-i18n="skp_cul_title">
Kuliner dan Coffee Shop Favorit Mahasiswa
</h2>
<hr class="culinary-divider" />
@@ -1417,7 +1416,7 @@
<div class="cost-banner-overlay"></div>
</div>
<div class="cost-info-panel">
<div class="cost-info-panel reveal">
<span class="eyebrow-component" data-skp-i18n="skp_cost_eyebrow">Biaya Hidup Mahasiswa</span>
<h2 class="cost-title" data-skp-i18n="skp_cost_title">
@@ -1715,7 +1714,7 @@
typeof skpT === "function" ? skpT(item.descKey) : item.descKey;
cardsHtmlHTML += `
<div class="facility-card">
<div class="facility-card reveal">
<img src="${item.imgSrc}" alt="${displayTitle}" class="card-image" loading="lazy" decoding="async" />
<div class="card-body">
<span class="card-icon-badge">
@@ -1855,7 +1854,7 @@
typeof skpT === "function" ? skpT(dir.descKey) : dir.descKey;
return `
<div class="directory-card">
<div class="directory-card reveal">
<div class="img-wrapper">
<img src="${dir.image}" alt="${displayTitle}" loading="lazy" decoding="async" />
</div>
@@ -1991,7 +1990,7 @@
typeof skpT === "function" ? skpT(dest.descKey) : dest.descKey;
return `
<div class="destination-card" style="background-image: url('${dest.image}')">
<div class="destination-card reveal" style="background-image: url('${dest.image}')">
<div class="card-overlay"></div>
<div class="card-content">
<h3 class="card-name">${displayName}</h3>
@@ -2144,7 +2143,7 @@
typeof skpT === "function" ? skpT(item.descKey) : item.descKey;
return `
<div class="culinary-card">
<div class="culinary-card reveal">
<img src="${item.image}" alt="${item.name}" class="card-thumb" loading="lazy" decoding="async" />
<div class="card-body">
<h3>${item.name}</h3>
@@ -2209,7 +2208,7 @@
typeof skpT === "function" ? skpT("skp_cost_period") : "per bulan";
return `
<div class="cost-item-card">
<div class="cost-item-card reveal">
${detail.iconSvg}
<p class="cost-type">${displayType}</p>
<p class="cost-price">Rp ${detail.price}</p>
@@ -2226,6 +2225,26 @@
renderLivingCostCards();
});
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const reveals = document.querySelectorAll(".reveal");
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("active");
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.15
});
reveals.forEach((element) => {
observer.observe(element);
});
});
</script>
</body>
</html>