mirfalah-tech
/
digital-card
Watch 12
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add gif after click

am
Amirul Anwar 4 months ago
parent
2e6cfdb961
commit
61f4562464
1 changed files with 9 additions and 2 deletions
Unified View Show Diff Stats
  1. 9
    2
      resources/views/digital-card.blade.php

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

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

Write Preview
Loading…
Cancel
Save