Browse Source

add gif after click

am
Amirul Anwar 5 months ago
parent
commit
61f4562464
1 changed files with 9 additions and 2 deletions
  1. 9
    2
      resources/views/digital-card.blade.php

+ 9
- 2
resources/views/digital-card.blade.php View File

@@ -36,6 +36,7 @@
36 36
                 pointer-events: none; /* Allows interactions through the overlay */
37 37
                 z-index: 9999; /* Ensures it is on top of other elements */
38 38
                 opacity: 0.3; /* Set the opacity to a lower value */
39
+                display: none; /* Initially hidden */
39 40
             }
40 41
             .petal-overlay img {
41 42
                 width: 100%;
@@ -45,7 +46,7 @@
45 46
         </style>
46 47
     </head>
47 48
     <body class="antialiased font-serif no-scroll">
48
-        <div class="petal-overlay">
49
+        <div class="petal-overlay" id="petalOverlay">
49 50
             <img src="{{ asset('assets/petal.gif') }}" alt="Falling Petals">
50 51
         </div>
51 52
     
@@ -53,7 +54,13 @@
53 54
             <source src="{{ asset('assets/background-musicv2.mp3') }}" type="audio/mp3">
54 55
             Your browser does not support the audio element.
55 56
         </audio>
56
-    
57
+        <script>
58
+            document.addEventListener('click', function () {
59
+                setTimeout(function () {
60
+                    document.getElementById('petalOverlay').style.display = 'block';
61
+                }, 1000); // Delay of 1 second (1000 milliseconds)
62
+            });
63
+        </script>
57 64
         <script>
58 65
             document.addEventListener('DOMContentLoaded', function() {
59 66
                 var audioElement = document.getElementById('player');

Loading…
Cancel
Save