function revealElements(selector) { var elements = document.querySelectorAll(selector); var windowHeight = window.innerHeight; var elementVisible = 150; elements.forEach(function(element) { var elementTop = element.getBoundingClientRect().top; if (elementTop < windowHeight - elementVisible) { element.classList.add("active"); } else { element.classList.remove("active"); } }); } window.addEventListener("scroll", function() { revealElements(".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"); }); /* Fade In */ .wdpal-fade-in { opacity: 0; transition: opacity 1s ease-in-out; } .wdpal-fade-in.active { opacity: 1; } /* Muncul Atas */ .wdpal-muncul-atas { transform: translateY(100%); opacity: 0; transition: transform 1s ease, opacity 1s ease; } .wdpal-muncul-atas.active { transform: translateY(0); opacity: 1; } /* Muncul Bawah */ .wdpal-muncul-bawah { transform: translateY(-100%); opacity: 0; transition: transform 1s ease, opacity 1s ease; } .wdpal-muncul-bawah.active { transform: translateY(0); opacity: 1; } /* Muncul Kiri */ .wdpal-muncul-kiri { position: relative; transform: translateX(-100%) scale(0.93); opacity: 0; transition: opacity 0.5s ease, transform 1s ease; } .wdpal-muncul-kiri.active { transform: translateX(0); opacity: 1; } /* Muncul Kanan */ .wdpal-muncul-kanan { position: relative; transform: translateX(100%) scale(0.93); opacity: 0; transition: opacity 0.5s ease, transform 1s ease; } .wdpal-muncul-kanan.active { transform: translateX(0); opacity: 1; } /* Rotate In */ .wdpal-rotate-in { transform: rotate(-180deg); opacity: 0; transition: transform 1s ease-out, opacity 1s ease-out; } .wdpal-rotate-in.active { transform: rotate(0deg); opacity: 1; } /* Flip X */ .wdpal-flip-x { transform: rotateX(90deg); opacity: 0; transition: transform 1s ease, opacity 1s ease; } .wdpal-flip-x.active { transform: rotateX(0deg); opacity: 1; } /* Flip Y */ .wdpal-flip-y { transform: rotateY(90deg); opacity: 0; transition: transform 1s ease, opacity 1s ease; } .wdpal-flip-y.active { transform: rotateY(0deg); opacity: 1; } /* Zoom In */ .wdpal-zoom-in { transform: scale(0.5); opacity: 0; transition: transform 1s ease, opacity 1s ease; } .wdpal-zoom-in.active { transform: scale(1); opacity: 1; } /* Zoom Out */ .wdpal-zoom-out { transform: scale(1.5); opacity: 0; transition: transform 1s ease, opacity 1s ease; } .wdpal-zoom-out.active { transform: scale(1); opacity: 1; }