Skip to content

Commit fc5ac23

Browse files
dewanakldewanakl
committed
fix: image loading and animation
1 parent 2ba521e commit fc5ac23

File tree

2 files changed

+52
-48
lines changed

2 files changed

+52
-48
lines changed

‎index.html

+20-20
Original file line numberDiff line numberDiff line change
@@ -120,12 +120,12 @@
120120

121121
<!-- Home -->
122122
<section id="home" class="bg-light position-relative overflow-hidden p-0 m-0">
123-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="./assets/images/bg.webp" alt="bg" class="position-absolute opacity-25 top-50 start-50 translate-middle bg-cover-home">
123+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="./assets/images/bg.webp" alt="bg" class="position-absolute opacity-25 top-50 start-50 translate-middle bg-cover-home">
124124

125125
<div class="position-relative text-center p-2">
126126
<h1 class="font-esthetic my-4 fw-medium" style="font-size: 2.5rem;">Undangan Pernikahan</h1>
127127

128-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="./assets/images/bg.webp" alt="bg" onclick="undangan.guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
128+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="./assets/images/bg.webp" alt="bg" onclick="undangan.guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
129129

130130
<h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
131131
<p class="my-2" style="font-size: 1.25rem;">Rabu, 15 Maret 2023</p>
@@ -158,7 +158,7 @@ <h2 class="font-esthetic py-4 m-0" style="font-size: 2rem;">Assalamualaikum Wara
158158
<!-- Love animation -->
159159
<div class="position-relative">
160160
<div class="position-absolute" style="top: 0%; right: 5%;">
161-
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="undangan.guest.animate(this, 500, 'animate-love')" viewBox="0 0 16 16">
161+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" data-time="500" data-class="animate-love" viewBox="0 0 16 16">
162162
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
163163
</svg>
164164
</div>
@@ -167,7 +167,7 @@ <h2 class="font-esthetic py-4 m-0" style="font-size: 2rem;">Assalamualaikum Wara
167167
<div class="overflow-x-hidden pb-4">
168168

169169
<div data-aos="fade-right" data-aos-duration="2000">
170-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="./assets/images/cowo.webp" alt="cowo" onclick="undangan.guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
170+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="./assets/images/cowo.webp" alt="cowo" onclick="undangan.guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
171171
<h2 class="font-esthetic m-0" style="font-size: 2rem;">Nama Wahyu Siapa</h2>
172172
<p class="mt-3 mb-1" style="font-size: 1.25rem;">Putra ke-1</p>
173173
<p class="mb-0" style="font-size: 0.95rem;">Bapak ... dan Ibu ...</p>
@@ -176,7 +176,7 @@ <h2 class="font-esthetic m-0" style="font-size: 2rem;">Nama Wahyu Siapa</h2>
176176
<!-- Love animation -->
177177
<div class="position-relative">
178178
<div class="position-absolute" style="top: 0%; left: 5%;">
179-
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="undangan.guest.animate(this, 2000, 'animate-love')" viewBox="0 0 16 16">
179+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" data-time="2000" data-class="animate-love" viewBox="0 0 16 16">
180180
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
181181
</svg>
182182
</div>
@@ -187,14 +187,14 @@ <h2 class="font-esthetic my-4" style="font-size: 4rem;">&amp;</h2>
187187
<!-- Love animation -->
188188
<div class="position-relative">
189189
<div class="position-absolute" style="top: 0%; right: 5%;">
190-
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="undangan.guest.animate(this, 3000, 'animate-love')" viewBox="0 0 16 16">
190+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" data-time="3000" data-class="animate-love" viewBox="0 0 16 16">
191191
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
192192
</svg>
193193
</div>
194194
</div>
195195

196196
<div data-aos="fade-left" data-aos-duration="2000">
197-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="./assets/images/cewe.webp" alt="cewe" onclick="undangan.guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
197+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="./assets/images/cewe.webp" alt="cewe" onclick="undangan.guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
198198
<h2 class="font-esthetic m-0" style="font-size: 2rem;">Nama Riski Siapa</h2>
199199
<p class="mt-3 mb-1" style="font-size: 1.25rem;">Putri ke-2</p>
200200
<p class="mb-0" style="font-size: 0.95rem;">Bapak ... dan Ibu ...</p>
@@ -204,7 +204,7 @@ <h2 class="font-esthetic m-0" style="font-size: 2rem;">Nama Riski Siapa</h2>
204204
<!-- Love animation -->
205205
<div class="position-relative">
206206
<div class="position-absolute" style="top: 0%; left: 5%;">
207-
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="undangan.guest.animate(this, 2000, 'animate-love')" viewBox="0 0 16 16">
207+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" data-time="2000" data-class="animate-love" viewBox="0 0 16 16">
208208
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
209209
</svg>
210210
</div>
@@ -266,7 +266,7 @@ <h2 class="d-inline m-0 p-0" id="second">0</h2><small class="ms-1 me-0 my-0 p-0
266266
<!-- Love animation -->
267267
<div class="position-relative">
268268
<div class="position-absolute" style="top: 0%; right: 5%;">
269-
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="undangan.guest.animate(this, 3000, 'animate-love')" viewBox="0 0 16 16">
269+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" data-time="3000" data-class="animate-love" viewBox="0 0 16 16">
270270
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
271271
</svg>
272272
</div>
@@ -289,7 +289,7 @@ <h2 class="font-esthetic m-0 py-2" style="font-size: 2rem;">Resepsi</h2>
289289
<!-- Love animation -->
290290
<div class="position-relative">
291291
<div class="position-absolute" style="top: 0%; left: 5%;">
292-
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="undangan.guest.animate(this, 2000, 'animate-love')" viewBox="0 0 16 16">
292+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" data-time="2000" data-class="animate-love" viewBox="0 0 16 16">
293293
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
294294
</svg>
295295
</div>
@@ -323,13 +323,13 @@ <h2 class="font-esthetic text-center py-2 m-0" style="font-size: 2.5rem;">Galeri
323323

324324
<div class="carousel-inner rounded-4">
325325
<div class="carousel-item active">
326-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="https://picsum.photos/1280/720?random=1" alt="image 1" class="d-block w-100" onclick="undangan.guest.modal(this)">
326+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="https://picsum.photos/1280/720?random=1" alt="image 1" class="d-block w-100" onclick="undangan.guest.modal(this)">
327327
</div>
328328
<div class="carousel-item">
329-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="https://picsum.photos/1280/720?random=2" alt="image 2" class="d-block w-100" onclick="undangan.guest.modal(this)">
329+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="https://picsum.photos/1280/720?random=2" alt="image 2" class="d-block w-100" onclick="undangan.guest.modal(this)">
330330
</div>
331331
<div class="carousel-item">
332-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="https://picsum.photos/1280/720?random=3" alt="image 3" class="d-block w-100" onclick="undangan.guest.modal(this)">
332+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="https://picsum.photos/1280/720?random=3" alt="image 3" class="d-block w-100" onclick="undangan.guest.modal(this)">
333333
</div>
334334
</div>
335335

@@ -353,13 +353,13 @@ <h2 class="font-esthetic text-center py-2 m-0" style="font-size: 2.5rem;">Galeri
353353

354354
<div class="carousel-inner rounded-4">
355355
<div class="carousel-item active">
356-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="https://picsum.photos/1280/720?random=4" alt="image 4" class="d-block w-100" onclick="undangan.guest.modal(this)">
356+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="https://picsum.photos/1280/720?random=4" alt="image 4" class="d-block w-100" onclick="undangan.guest.modal(this)">
357357
</div>
358358
<div class="carousel-item">
359-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="https://picsum.photos/1280/720?random=5" alt="image 5" class="d-block w-100" onclick="undangan.guest.modal(this)">
359+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="https://picsum.photos/1280/720?random=5" alt="image 5" class="d-block w-100" onclick="undangan.guest.modal(this)">
360360
</div>
361361
<div class="carousel-item">
362-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="https://picsum.photos/1280/720?random=6" alt="image 6" class="d-block w-100" onclick="undangan.guest.modal(this)">
362+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="https://picsum.photos/1280/720?random=6" alt="image 6" class="d-block w-100" onclick="undangan.guest.modal(this)">
363363
</div>
364364
</div>
365365

@@ -389,7 +389,7 @@ <h2 class="font-esthetic pt-2 mb-4" style="font-size: 2.5rem;">Love Gift</h2>
389389
<p class="mb-3" style="font-size: 0.95rem;">Dengan hormat, bagi Anda yang ingin memberikan tanda kasih kepada kami, dapat melalui:</p>
390390

391391
<div class="bg-theme-dark rounded-4 shadow p-4 mx-4 mt-2 mb-4 text-start" data-aos="fade-up" data-aos-duration="2500">
392-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Bank_Central_Asia.svg/1598px-Bank_Central_Asia.svg.png" class="img-fluid p-1 rounded" style="max-width: 9vh; background-color: var(--bs-gray-300);" alt="bca">
392+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Bank_Central_Asia.svg/1598px-Bank_Central_Asia.svg.png" class="img-fluid p-1 rounded" style="max-width: 9vh; background-color: var(--bs-gray-300);" alt="bca">
393393

394394
<div class="d-flex justify-content-between align-items-center mt-2">
395395
<p class="m-0 p-0" style="font-size: 0.95rem;">---- ---- ---- 4567</p>
@@ -401,7 +401,7 @@ <h2 class="font-esthetic pt-2 mb-4" style="font-size: 2.5rem;">Love Gift</h2>
401401
</div>
402402

403403
<div class="bg-theme-dark rounded-4 shadow p-4 mx-4 mt-2 text-start" data-aos="fade-up" data-aos-duration="2500">
404-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="https://upload.wikimedia.org/wikipedia/id/thumb/5/55/BNI_logo.svg/1024px-BNI_logo.svg.png" class="img-fluid p-1 rounded" style="max-width: 9vh; background-color: var(--bs-gray-300);" alt="bni">
404+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="https://upload.wikimedia.org/wikipedia/id/thumb/5/55/BNI_logo.svg/1024px-BNI_logo.svg.png" class="img-fluid p-1 rounded" style="max-width: 9vh; background-color: var(--bs-gray-300);" alt="bni">
405405

406406
<div class="d-flex justify-content-between align-items-center mt-2">
407407
<p class="m-0 p-0" style="font-size: 0.95rem;">---- ---- ---- 4567</p>
@@ -497,7 +497,7 @@ <h2 class="font-arabic pt-4" style="font-size: 2rem;">اَلْحَمْدُ لِ
497497
<div class="text-center">
498498
<h2 class="font-esthetic mb-4" style="font-size: 2.5rem;">The Wedding Of</h2>
499499

500-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="./assets/images/bg.webp" alt="background" class="img-center-crop rounded-circle border border-3 border-light shadow mb-4 mx-auto">
500+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="./assets/images/bg.webp" alt="background" class="img-center-crop rounded-circle border border-3 border-light shadow mb-4 mx-auto">
501501

502502
<h2 class="font-esthetic mb-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
503503
<div id="guest-name" data-message="Kepada Yth Bapak/Ibu/Saudara/i"></div>
@@ -549,7 +549,7 @@ <h2 class="font-esthetic mb-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
549549
<div class="modal-content rounded-4">
550550
<div class="modal-body p-0">
551551
<div class="d-flex justify-content-center align-items-center" style="height: 100%;">
552-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" loading="lazy" data-src="./assets/images/bg.webp" class="img-fluid w-100 rounded-4" alt="image" id="show-modal-image">
552+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw" data-src="./assets/images/bg.webp" class="img-fluid w-100 rounded-4" alt="image" id="show-modal-image">
553553
</div>
554554
</div>
555555
</div>

0 commit comments

Comments
 (0)