Browse Source

fix fade-element and set duration based on screen size

master
farhan 4 months ago
parent
commit
6b3fb1afb9

+ 10
- 1
resources/js/app.js View File

124
             } else {
124
             } else {
125
                 var start = window.pageYOffset;
125
                 var start = window.pageYOffset;
126
                 var target = start + scrollAmount;
126
                 var target = start + scrollAmount;
127
-                var duration = 5000; // duration of the animation
127
+                 // Set duration based on screen size
128
+                var screenWidth = window.innerWidth;
129
+                var duration;
130
+                if (screenWidth < 600) {
131
+                    duration = 3000; // Smaller screen
132
+                } else if (screenWidth < 1200) {
133
+                    duration = 4000; // Medium screen
134
+                } else {
135
+                    duration = 7000; // Larger screen
136
+                }
128
                 var startTime = null;
137
                 var startTime = null;
129
 
138
 
130
                 function scrollStep(timestamp) {
139
                 function scrollStep(timestamp) {

+ 1
- 1
resources/views/components/countdown.blade.php View File

1
-<div class="flex flex-col gap-5 w-4/5 py-8 fade-element">
1
+<div class="flex flex-col gap-5 w-4/5 py-3 fade-element">
2
     <hr class="border-t-1 border-gray-300 mt-3 mb-5 w-4/5 self-center">
2
     <hr class="border-t-1 border-gray-300 mt-3 mb-5 w-4/5 self-center">
3
     <h1 class="font-medium text-gray-600 self-center">Majlis Bermula</h1>
3
     <h1 class="font-medium text-gray-600 self-center">Majlis Bermula</h1>
4
     <div class="flex justify-center" id="countdown"></div>
4
     <div class="flex justify-center" id="countdown"></div>

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

30
         <div class="section bg-babyblue min-h-screen flex justify-center items-center pb-20">
30
         <div class="section bg-babyblue min-h-screen flex justify-center items-center pb-20">
31
             @include('components.main-event')
31
             @include('components.main-event')
32
         </div>
32
         </div>
33
-        <div class="section bg-babyblue min-h-screen flex justify-center pb-20">
33
+        <div class="section bg-babyblue min-h-screen flex justify-center pb-5">
34
             @include('components.event-info')
34
             @include('components.event-info')
35
         </div>
35
         </div>
36
-        <div class="section bg-babyblue flex justify-center pb-20">
36
+        <div class="section bg-babyblue flex justify-center pb-5">
37
             @include('components.countdown')
37
             @include('components.countdown')
38
         </div>
38
         </div>
39
-        <div class="section bg-babyblue flex justify-center pt-5 pb-20">
39
+        <div class="section bg-babyblue flex justify-center pt-5 pb-5">
40
             @include('components.guestbook')
40
             @include('components.guestbook')
41
         </div>
41
         </div>
42
         <div class="section bg-babyblue flex justify-center pt-5 pb-20">
42
         <div class="section bg-babyblue flex justify-center pt-5 pb-20">

Loading…
Cancel
Save