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

fix digital onclick

am
Amirul Anwar 4 months ago
parent
06c2276f2b
commit
a355788374
3 changed files with 72 additions and 5 deletions
Split View Show Diff Stats
  1. BIN
      public/assets/background-musicv2.mp3
  2. 71
    4
      resources/views/digital-card.blade.php
  3. 1
    1
      resources/views/rsvp-digital-card.blade.php

BIN
public/assets/background-musicv2.mp3 View File


+ 71
- 4
resources/views/digital-card.blade.php View File 

@@ -12,14 +12,81 @@
12 12 
         <meta name="csrf-token" content="{{ csrf_token() }}">
13 13
14 14 
         @vite(['resources/css/app.css','resources/js/app.js'])
15 
+        <style>
16 
+            html {
17 
+                scroll-behavior: smooth;
18 
+            }
19 
+            body.no-scroll {
20 
+                overflow: hidden;
21 
+            }
22 
+        </style>
15 23 
     </head>
16 
-    <body class="antialiased font-serif">
17 
-        <audio id="player" autoplay="autoplay" loop>
18 
-            <source src="{{asset('assets/background-music.mp3')}}" type="audio/mp3">
24 
+    <body class="antialiased font-serif no-scroll">
25 
+        <audio id="player" loop>
26 
+            <source src="{{ asset('assets/background-musicv2.mp3') }}" type="audio/mp3">
27 
+            Your browser does not support the audio element.
19 28 
         </audio>
29 
+
30 
+        <script>
31 
+            document.addEventListener('DOMContentLoaded', function() {
32 
+                var audioElement = document.getElementById('player');
33 
+                var hasPlayed = false; // To ensure audio only plays once upon clicking and scrolling
34 
+                var scrollCount = 0;
35 
+                var maxScrolls = 7;
36 
+                var scrollInterval = 500; // Time in milliseconds between each scroll
37 
+                var scrollAmount = window.innerHeight / 7; // Amount to scroll per interval
38 
+
39 
+                function playAudio() {
40 
+                    if (!hasPlayed && scrollCount >= maxScrolls) {
41 
+                        var playPromise = audioElement.play();
42 
+
43 
+                        if (playPromise !== undefined) {
44 
+                            playPromise.then(function() {
45 
+                                // Automatic playback started!
46 
+                                hasPlayed = true; // Prevent further attempts to play
47 
+                            }).catch(function(error) {
48 
+                                // Automatic playback failed.
49 
+                                console.log('Autoplay failed: ' + error);
50 
+                            });
51 
+                        }
52 
+                    }
53 
+                }
54 
+
55 
+                function smoothScroll() {
56 
+                    if (!hasPlayed) {
57 
+                        scrollCount++;
58 
+                        if (scrollCount >= maxScrolls) {
59 
+                            playAudio();
60 
+                        } else {
61 
+                            window.scrollBy(0, scrollAmount); // Smooth scroll a fraction of the window height
62 
+                            setTimeout(playOnly, scrollInterval);
63 
+                        }
64 
+                    }
65 
+                }
66 
+
67 
+                function playOnly() {
68 
+                    if (!hasPlayed) {
69 
+                        scrollCount++;
70 
+                        if (scrollCount >= maxScrolls) {
71 
+                            playAudio();
72 
+                        } else {
73 
+                            setTimeout(playOnly, scrollInterval);
74 
+                        }
75 
+                    }
76 
+                }
77 
+
78 
+                function handleInteraction() {
79 
+                    document.body.classList.remove('no-scroll'); // Enable scrolling
80 
+                    setTimeout(smoothScroll, scrollInterval); // Start smooth scrolling after initial delay
81 
+                }
82 
+
83 
+                // Listen for click or touch event to start auto-scrolling
84 
+                window.addEventListener('click', handleInteraction, { once: true });
85 
+            });
86 
+        </script>
20 87 
         <div id="alert-success"></div>
21 88 
         <div class="parent absolute h-screen w-full">
22 
-            <audio src="{{asset('assets/paper-ripping.mp3')}}"></audio>
89 
+            {{-- <audio src="{{asset('assets/paper-ripping.mp3')}}"></audio> --}}
23 90 
             @include('components.front-cover')
24 91 
         </div>
25 92 
         <div class="section bg-babyblue min-h-screen flex justify-center items-center">

+ 1
- 1
resources/views/rsvp-digital-card.blade.php View File 

@@ -15,7 +15,7 @@
15 15 
 </head>
16 16 
 <body class="antialiased font-serif">
17 17 
     <audio id="player" autoplay="autoplay" loop>
18 
-        <source src="{{asset('assets/background-music.mp3')}}" type="audio/mp3">
18 
+        <source src="{{asset('assets/background-musicv2.mp3')}}" type="audio/mp3">
19 19 
     </audio>
20 20 
     <div class="section bg-babyblue h-screen w-screen flex justify-center items-center">
21 21 
         <div class="flex flex-col gap-3 w-4/5 z-10">

Write Preview
Loading…
Cancel
Save