Levi & Dio
Ar-Rum:21
"Dan di antara ayat-ayat-Nya ialah Dia menciptakan untukmu istri-istri dari jenismu sendiri, supaya kamu merasa nyaman kepadanya, dan dijadikan-Nya di antaramu mawadah dan rahmah. Sesungguhnya pada yang demikian itu benar-benar terdapat tanda-tanda bagi kaum yang berpikir"
Tanpa mengurangi rasa hormat, perkenankan kami mengundang Bapak/Ibu/Saudara/i, serta kerabat sekalian, untuk menghadiri acara pernikahan kami :
Mempelai Pria
Dio Ahmad
Putra Pertama dari Keluarga
Bapak Lorem & Ibu Ipsum
&
Wedding Story
Awal Bertemu
Januari 202x
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Jalin Komitmen
Mei 202x
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Acara Lamaran
November 202x
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Akad Nikah
Minggu, 12 Desember 202x
08.00 WIB s.d Selesai
Rumah Mempelai Wanita
lorem ipsum dolor sit amet, consectetur adipiscing elit
Resepsi
Minggu, 12 Desember 202x
08.00 WIB s.d Selesai
Aula Gedung Serbaguna
lorem ipsum dolor sit amet, consectetur adipiscing elit
Wedding Gift
Kehadiran Anda merupakan sebuah do'a serta rasa syukur bagi kami, namun jika memberi adalah bentuk Do'a & cinta kasih bagi Anda, Anda dapat memberi kado secara cashless dan kami akan senang hati menerimanya dan tentu semakin melengkapi kebahagiaan kami.
Penerima Kado: Mempelai Wanita
Jl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Beri Doa & Ucapan Terbaikmu
Tuliskan harapan dan doa terbaik Anda
Untuk kedua mempelai
Hope to see you soon, Stay safe and healthy!
Terima Kasih
Atas Kehadiran & Doa Restunya
Merupakan suatu kehormatan dan kebahagiaan bagi kami sekeluarga apabila Bapak/Ibu/Saudara/i berkenan hadir untuk memberikan doa restu kepada kedua mempelai. Atas kehadiran serta doa restu, kami ucapkan terima kasih.
Sampai Jumpa di Hari Bahagia Kami,
Levi & Dio
Keluarga Besar
Mempelai Pria
Bpk. Lorem Ipsum
& Ibu Dolor Sit
Keluarga Besar
Mempelai Wanita
Bpk. Lorem Ipsum
& Ibu Dolor Sit
Turut Mengundang:
Keluarga Besar Bpk. Putra & Ibu Putri
Keluarga Besar Bpk. Dewa & Ibu Dewi
Dan seluruh keluarga lainnya.
// Fungsi utama saat tombol diklik
document.getElementById("tombol-buka").onclick = function() {
unlockSection();
playAudio();
hideButton();
};
// Fungsi untuk membuka scroll halaman
function unlockSection() {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'body.scroll-enabled { overflow: auto; }';
document.getElementsByTagName('head')[0].appendChild(style);
document.body.classList.add("scroll-enabled");
}
// Fungsi untuk memainkan audio
function playAudio() {
var isYT = false;
if (document.body.contains(document.getElementById("song"))) {
document.getElementById("song").play();
isYT = false;
} else {
isYT = true;
if (typeof player !== "undefined") {
player.playVideo();
}
}
}
// Fungsi untuk menyembunyikan tombol
function hideButton() {
document.getElementById("tombol-buka").style.display = 'none';
}
// Fungsi untuk menampilkan tombol saat halaman di-refresh
function showButtonOnRefresh() {
document.getElementById("tombol-buka").style.display = 'block';
}
// Menambahkan CSS untuk menonaktifkan scroll secara default
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'body { overflow: hidden; }';
document.getElementsByTagName('head')[0].appendChild(style);
// Memastikan tombol ditampilkan kembali saat halaman di-refresh
window.onload = function() {
showButtonOnRefresh();
};
//Script Custom Nama Tamu by Andy dari WeddingPress
var urlParams = new URLSearchParams(window.location.search);
if (urlParams) {
var textElement = document.getElementById('namatamu');
var defaultText = textElement.innerHTML;
var newText = defaultText;
if (urlParams.has('to')) {
var toValue = urlParams.get('to');
newText = newText.replace(/Tamu Undangan/g, toValue);
}
if (urlParams.has('dear')) {
var dearValue = urlParams.get('dear');
newText = newText.replace(/Tamu Undangan/g, dearValue);
}
if (urlParams.has('kepada')) {
var kepadaValue = urlParams.get('kepada');
newText = newText.replace(/Tamu Undangan/g, kepadaValue);
}
textElement.innerHTML = newText;
}
//* script show-hide by andy dari weddingpress *//
document.addEventListener("DOMContentLoaded", function () {
var btnAmplop = document.getElementById("btnAmplop");
var btnHide = document.getElementById("btn-hide");
var amplop = document.getElementById("amplop");
// Sembunyikan btn-hide dan amplop saat halaman dimuat
btnHide.style.display = "none";
amplop.style.display = "none";
// Fungsi untuk menampilkan btn-hide dan amplop saat btnAmplop diklik
btnAmplop.onclick = function () {
// Menampilkan btn-hide
btnHide.style.display = "block";
// Menyembunyikan btnAmplop
btnAmplop.style.display = "none";
// Menampilkan section amplop
amplop.style.display = "block";
};
// Fungsi untuk menampilkan btnAmplop kembali dan menyembunyikan btn-hide saat btn-hide diklik
btnHide.onclick = function () {
// Menyembunyikan btn-hide
btnHide.style.display = "none";
// Menampilkan btnAmplop kembali
btnAmplop.style.display = "block";
// Menyembunyikan section amplop
amplop.style.display = "none";
};
});
/* ===========================
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);
});
})();
.goyang-1 {
animation-name: goyang-1;
animation-duration: 5s;
transform-origin: left top;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes goyang-1 {
0% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(-3deg) scale(1.015); }
50% { transform: rotate(0deg) scale(1); }
75% { transform: rotate(3deg) scale(1.015); }
100% { transform: rotate(0deg) scale(1); }
}
.goyang-2 {
animation-name: goyang-2;
animation-duration: 8s;
transform-origin: center bottom; /* Titik goyang tepat di akar bunga */
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes goyang-2 {
0% { transform: rotate(0deg); }
25% { transform: rotate(-2deg); }
75% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
.goyang-3 {
animation-name: goyang-3;
animation-duration: 5s;
transform-origin: right top; /* Titik rotasi dibalik ke kanan atas */
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes goyang-3 {
0% { transform: rotate(0deg) scale(1); }
30% { transform: rotate(3deg) scale(1.015); }
60% { transform: rotate(-3deg) scale(1.015); }
100% { transform: rotate(0deg) scale(1); }
}