/* ===========================
ATURAN UMUM UNTUK LXAL
=========================== */
.lxal-fade-in,
.lxal-muncul-atas,
.lxal-muncul-bawah,
.lxal-muncul-kiri,
.lxal-muncul-kanan,
.lxal-rotate-in,
.lxal-flip-x,
.lxal-flip-y,
.lxal-zoom-in,
.lxal-zoom-out {
opacity: 0;
transition-property: transform, opacity;
transition-timing-function: ease;
position: relative;
z-index: 1;
}
.lxal-fade-in.active,
.lxal-muncul-atas.active,
.lxal-muncul-bawah.active,
.lxal-muncul-kiri.active,
.lxal-muncul-kanan.active,
.lxal-rotate-in.active,
.lxal-flip-x.active,
.lxal-flip-y.active,
.lxal-zoom-in.active,
.lxal-zoom-out.active {
opacity: 1;
}
/* ===========================
DURASI ANIMASI
=========================== */
.lxal-fade-in,
.lxal-muncul-atas,
.lxal-muncul-bawah,
.lxal-muncul-kiri,
.lxal-muncul-kanan,
.lxal-rotate-in,
.lxal-flip-x,
.lxal-flip-y,
.lxal-zoom-in,
.lxal-zoom-out {
transition-duration: 1.25s; /* Default: Smooth */
}
.very-slow {
transition-duration: 3s;
}
.slow {
transition-duration: 2s;
}
.fast {
transition-duration: 0.75s;
}
.very-fast {
transition-duration: 0.3s;
}
/* ===========================
PENAMBAHAN DELAY DINAMIS
=========================== */
.delay05 {
transition-delay: 0.5s;
}
.delay1 {
transition-delay: 1s;
}
.delay15 {
transition-delay: 1.5s;
}
.delay2 {
transition-delay: 2s;
}
.delay25 {
transition-delay: 2.5s;
}
/* ===========================
EFEK FADE IN
=========================== */
.lxal-fade-in {
transition-delay: 0.2s;
}
.lxal-fade-in.no-delay {
transition-delay: 0s;
}
/* ===========================
EFEK MUNCUL ATAS
=========================== */
.lxal-muncul-atas {
transform: translateY(50px);
opacity: 0;
transition-delay: 0.3s;
}
.lxal-muncul-atas.active {
transform: translateY(0);
opacity: 1;
}
.lxal-muncul-atas.no-delay {
transition-delay: 0s;
}
/* ===========================
EFEK MUNCUL BAWAH
=========================== */
.lxal-muncul-bawah {
transform: translateY(-50px);
opacity: 0;
transition-delay: 0.3s;
}
.lxal-muncul-bawah.active {
transform: translateY(0);
opacity: 1;
}
.lxal-muncul-bawah.no-delay {
transition-delay: 0s;
}
/* ===========================
EFEK MUNCUL KIRI
=========================== */
.lxal-muncul-kiri {
transform: translateX(-50px) scale(0.95);
opacity: 0;
transition-delay: 0.4s;
}
.lxal-muncul-kiri.active {
transform: translateX(0);
opacity: 1;
}
.lxal-muncul-kiri.no-delay {
transition-delay: 0s;
}
/* ===========================
EFEK MUNCUL KANAN
=========================== */
.lxal-muncul-kanan {
transform: translateX(50px) scale(0.95);
opacity: 0;
transition-delay: 0.5s;
}
.lxal-muncul-kanan.active {
transform: translateX(0);
opacity: 1;
}
.lxal-muncul-kanan.no-delay {
transition-delay: 0s;
}
/* ===========================
EFEK ROTATE IN
=========================== */
.lxal-rotate-in {
transform: rotate(-180deg);
opacity: 0;
transition-delay: 0.5s;
}
.lxal-rotate-in.active {
transform: rotate(0deg);
opacity: 1;
}
.lxal-rotate-in.no-delay {
transition-delay: 0s;
}
/* ===========================
EFEK FLIP X
=========================== */
.lxal-flip-x {
transform: rotateX(90deg);
transform-style: preserve-3d;
backface-visibility: hidden;
visibility: hidden;
pointer-events: none;
transition-delay: 0.6s;
}
.lxal-flip-x.active {
transform: rotateX(0deg);
visibility: visible;
pointer-events: auto;
}
.lxal-flip-x.no-delay {
transition-delay: 0s;
}
/* ===========================
EFEK FLIP Y
=========================== */
.lxal-flip-y {
transform: rotateY(90deg);
transform-style: preserve-3d;
backface-visibility: hidden;
visibility: hidden;
pointer-events: none;
transition-delay: 0.6s;
}
.lxal-flip-y.active {
transform: rotateY(0deg);
visibility: visible;
pointer-events: auto;
}
.lxal-flip-y.no-delay {
transition-delay: 0s;
}
/* ===========================
EFEK ZOOM IN
=========================== */
.lxal-zoom-in {
transform: scale(0.7);
opacity: 0;
transition-delay: 0.2s;
}
.lxal-zoom-in.active {
transform: scale(1);
opacity: 1;
}
.lxal-zoom-in.no-delay {
transition-delay: 0s;
}
/* ===========================
EFEK ZOOM OUT
=========================== */
.lxal-zoom-out {
transform: scale(1.3);
opacity: 0;
transition-delay: 0.2s;
}
.lxal-zoom-out.active {
transform: scale(1);
opacity: 1;
}
.lxal-zoom-out.no-delay {
transition-delay: 0s;
}
/* ===========================
ATURAN UMUM
=========================== */
.wdpal-fade-in,
.wdpal-muncul-atas,
.wdpal-muncul-bawah,
.wdpal-muncul-kiri,
.wdpal-muncul-kanan,
.wdpal-rotate-in,
.wdpal-flip-x,
.wdpal-flip-y,
.wdpal-zoom-in,
.wdpal-zoom-out {
opacity: 0;
transition-property: transform, opacity;
transition-timing-function: ease;
position: relative;
z-index: 1;
}
.wdpal-fade-in.active,
.wdpal-muncul-atas.active,
.wdpal-muncul-bawah.active,
.wdpal-muncul-kiri.active,
.wdpal-muncul-kanan.active,
.wdpal-rotate-in.active,
.wdpal-flip-x.active,
.wdpal-flip-y.active,
.wdpal-zoom-in.active,
.wdpal-zoom-out.active {
opacity: 1;
}
/* ===========================
DURASI ANIMASI
=========================== */
.wdpal-fade-in,
.wdpal-muncul-atas,
.wdpal-muncul-bawah,
.wdpal-muncul-kiri,
.wdpal-muncul-kanan,
.wdpal-rotate-in,
.wdpal-flip-x,
.wdpal-flip-y,
.wdpal-zoom-in,
.wdpal-zoom-out {
transition-duration: 1.25s; /* Default: Smooth */
}
.very-slow {
transition-duration: 3s;
}
.slow {
transition-duration: 2s;
}
.fast {
transition-duration: 0.75s;
}
.very-fast {
transition-duration: 0.3s;
}
/* ===========================
PENAMBAHAN DELAY DINAMIS
=========================== */
.delay05 {
transition-delay: 0.5s;
}
.delay1 {
transition-delay: 1s;
}
.delay15 {
transition-delay: 1.5s;
}
.delay2 {
transition-delay: 2s;
}
.delay25 {
transition-delay: 2.5s;
}
/* ===========================
EFEK FADE IN
=========================== */
.wdpal-fade-in {
transition-delay: 0.2s;
}
/* ===========================
EFEK MUNCUL ATAS
=========================== */
.wdpal-muncul-atas {
transform: translateY(50px);
opacity: 0;
transition-delay: 0.3s;
}
.wdpal-muncul-atas.active {
transform: translateY(0);
opacity: 1;
}
/* ===========================
EFEK MUNCUL BAWAH
=========================== */
.wdpal-muncul-bawah {
transform: translateY(-50px);
opacity: 0;
transition-delay: 0.3s;
}
.wdpal-muncul-bawah.active {
transform: translateY(0);
opacity: 1;
}
/* ===========================
EFEK MUNCUL KIRI
=========================== */
.wdpal-muncul-kiri {
transform: translateX(-50px) scale(0.95);
opacity: 0;
transition-delay: 0.4s;
}
.wdpal-muncul-kiri.active {
transform: translateX(0);
opacity: 1;
}
/* ===========================
EFEK MUNCUL KANAN
=========================== */
.wdpal-muncul-kanan {
transform: translateX(50px) scale(0.95);
opacity: 0;
transition-delay: 0.5s;
}
.wdpal-muncul-kanan.active {
transform: translateX(0);
opacity: 1;
}
/* ===========================
EFEK ROTATE IN
=========================== */
.wdpal-rotate-in {
transform: rotate(-180deg);
opacity: 0;
transition-delay: 0.5s;
}
.wdpal-rotate-in.active {
transform: rotate(0deg);
opacity: 1;
}
/* ===========================
EFEK FLIP X
=========================== */
.wdpal-flip-x {
transform: rotateX(90deg);
transform-style: preserve-3d;
backface-visibility: hidden;
visibility: hidden;
pointer-events: none;
transition-delay: 0.6s;
}
.wdpal-flip-x.active {
transform: rotateX(0deg);
visibility: visible;
pointer-events: auto;
}
/* ===========================
EFEK FLIP Y
=========================== */
.wdpal-flip-y {
transform: rotateY(90deg);
transform-style: preserve-3d;
backface-visibility: hidden;
visibility: hidden;
pointer-events: none;
transition-delay: 0.6s;
}
.wdpal-flip-y.active {
transform: rotateY(0deg);
visibility: visible;
pointer-events: auto;
}
/* ===========================
EFEK ZOOM IN
=========================== */
.wdpal-zoom-in {
transform: scale(0.7);
opacity: 0;
transition-delay: 0.2s;
}
.wdpal-zoom-in.active {
transform: scale(1);
opacity: 1;
}
/* ===========================
EFEK ZOOM OUT
=========================== */
.wdpal-zoom-out {
transform: scale(1.3);
opacity: 0;
transition-delay: 0.2s;
}
.wdpal-zoom-out.active {
transform: scale(1);
opacity: 1;
}
(function () {
// Fungsi utama untuk mengaktifkan animasi
function revealElements(selector) {
const elements = document.querySelectorAll(selector);
const windowHeight = window.innerHeight;
const elementVisible = 150;
elements.forEach(function (element) {
const elementTop = element.getBoundingClientRect().top;
if (elementTop {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("active");
} else {
entry.target.classList.remove("active");
}
});
};
const observer = new IntersectionObserver(observerCallback, observerOptions);
// Panggil fungsi revealElements untuk semua efek animasi
document.addEventListener("DOMContentLoaded", () => {
// Selector untuk WDPAL
const wdpalSelector =
".wdpal-fade-in, .wdpal-muncul-atas, .wdpal-muncul-bawah, .wdpal-muncul-kiri, .wdpal-muncul-kanan, .wdpal-rotate-in, .wdpal-flip-x, .wdpal-flip-y, .wdpal-zoom-in, .wdpal-zoom-out";
// Selector untuk LXAL
const lxalSelector =
".lxal-fade-in, .lxal-muncul-atas, .lxal-muncul-bawah, .lxal-muncul-kiri, .lxal-muncul-kanan, .lxal-rotate-in, .lxal-flip-x, .lxal-flip-y, .lxal-zoom-in, .lxal-zoom-out";
// Observasi elemen dengan Intersection Observer untuk WDPAL
const wdpalElements = document.querySelectorAll(wdpalSelector);
wdpalElements.forEach((element) => {
observer.observe(element);
});
// Observasi elemen dengan Intersection Observer untuk LXAL
const lxalElements = document.querySelectorAll(lxalSelector);
lxalElements.forEach((element) => {
observer.observe(element);
});
// Panggil fungsi revealElements untuk menambahkan kelas active pada elemen yang sudah terlihat
revealElements(wdpalSelector);
revealElements(lxalSelector);
});
// Tambahkan event listener untuk scroll
window.addEventListener("scroll", () => {
const wdpalSelector =
".wdpal-fade-in, .wdpal-muncul-atas, .wdpal-muncul-bawah, .wdpal-muncul-kiri, .wdpal-muncul-kanan, .wdpal-rotate-in, .wdpal-flip-x, .wdpal-flip-y, .wdpal-zoom-in, .wdpal-zoom-out";
const lxalSelector =
".lxal-fade-in, .lxal-muncul-atas, .lxal-muncul-bawah, .lxal-muncul-kiri, .lxal-muncul-kanan, .lxal-rotate-in, .lxal-flip-x, .lxal-flip-y, .lxal-zoom-in, .lxal-zoom-out";
revealElements(wdpalSelector);
revealElements(lxalSelector);
});
})();
