Bladeren bron

dummy intro

master
azri 4 maanden geleden
bovenliggende
commit
3f0824377c

+ 15
- 8
resources/css/app.css Bestand weergeven

@@ -137,6 +137,16 @@ body.no-scroll {
137 137
     }
138 138
 }
139 139
 
140
+@keyframes to-left {
141
+    from {
142
+        transform: translateX(0)
143
+    }
144
+
145
+    to {
146
+        transform: translateX(-100%)
147
+    }
148
+}
149
+
140 150
 @keyframes to-right {
141 151
     from {
142 152
         transform: translateX(0)
@@ -147,13 +157,10 @@ body.no-scroll {
147 157
     }
148 158
 }
149 159
 
160
+.to-left-animation{
161
+    animation: to-left 2s forwards;
162
+}
150 163
 
151
-@media (prefers-reduced-motion: no-preference) {
152
-    @supports (animation-timeline: scroll()) {
153
-        #right-cover {
154
-            animation: to-right linear both;
155
-            animation-timeline: scroll();
156
-            animation-range: contain;
157
-        }
158
-    }
164
+.to-right-animation{
165
+    animation: to-right 2s forwards;
159 166
 }

+ 20
- 33
resources/js/app.js Bestand weergeven

@@ -24,47 +24,37 @@ document.addEventListener('click', function () {
24 24
         part.classList.add("shadow-lg")
25 25
     }
26 26
 
27
-    let body = document.querySelector("body");
28
-    body.classList.remove("no-scroll");
29
-
30 27
     // the intro - only done once and
31 28
     if (initLoad == "true") {
32 29
         playMusic();
30
+
31
+        let leftCover = document.querySelector(".dummy-cover .left-dummy");
32
+        let rightCover = document.querySelector(".dummy-cover .right-dummy");
33
+        leftCover.classList.add("to-left-animation")
34
+        rightCover.classList.add("to-right-animation")
35
+        setTimeout(()=>{
36
+            //dummy-cover
37
+            let parts = document.querySelectorAll(".dummy-cover .part");
38
+            for (let part of parts) {
39
+                part.remove("hidden")
40
+            }
41
+
42
+            let body = document.querySelector("body");
43
+            body.classList.remove("no-scroll");
44
+
45
+        },2500)
46
+
33 47
         sessionStorage.removeItem("initial-load")
34
-        // delay timer to have that umpph feels my G
35
-        setTimeout(() => {
36
-            // smooth scroll only happen for first render
37
-            smoothScrollBy(100, 3500);
38
-        }, 600)
39 48
     }
40 49
 
41 50
     setTimeout(() => {
42 51
         eventCountdown();
43 52
         let petalOverlay = document.getElementById("petalOverlay");
44 53
         petalOverlay.classList.remove("hidden");
45
-
46
-    }, 5000)
54
+    }, 2000)
47 55
 
48 56
 });
49 57
 
50
-function smoothScrollBy(distance, duration) {
51
-    const start = window.pageYOffset;
52
-    const startTime = performance.now();
53
-
54
-    function scroll() {
55
-        const now = performance.now();
56
-        const time = Math.min(1, (now - startTime) / duration);
57
-        const timeFunction = time * (2 - time); // Ease out effect
58
-        window.scrollTo(0, start + timeFunction * distance);
59
-
60
-        if (time < 1) {
61
-            requestAnimationFrame(scroll);
62
-        }
63
-    }
64
-
65
-    requestAnimationFrame(scroll);
66
-}
67
-
68 58
 // to ensure all images is loaded before starting animation and gimmick
69 59
 function imageLoading() {
70 60
     const images = document.querySelectorAll("img");
@@ -151,12 +141,9 @@ function reset() {
151 141
 
152 142
     // reset to top
153 143
     let body = document.querySelector("body");
154
-    body.classList.remove("no-scroll");
155
-    window.scrollTo(0, 0);
144
+    window.scrollTo(0, document.body.scrollHeight * 0.05);
145
+    body.classList.add("no-scroll");
156 146
 
157
-    setTimeout(() => {
158
-        body.classList.add("no-scroll");
159
-    }, 100)
160 147
 }
161 148
 
162 149
 function playMusic() {

+ 22
- 0
resources/views/components/front-cover-intro-dummy.blade.php Bestand weergeven

@@ -0,0 +1,22 @@
1
+<div class="part left-dummy fixed left-0 w-1/2 h-screen bg-babyblue hidden">
2
+    <div class="flex flex-col justify-center h-full gap-10">
3
+        <div class="flex justify-end items-center animate__animated animate__fadeIn animate__delay-1s">
4
+            <img src="{{ asset('assets/logo-left.webp') }}" alt="Logo" class="logo-img">
5
+        </div>
6
+        <div class="flex justify-end items-center animate__animated animate__fadeIn animate__delay-1s">
7
+            <img src="{{ asset('assets/name-left.webp') }}" alt="Name Left" class="logo-img">
8
+        </div>
9
+        <img src="{{asset('assets/flower-left.webp')}}" alt="" class="absolute -left-2/4 top-72 h-96 w-96 animate__animated animate__fadeIn animate__delay-2s">
10
+    </div>
11
+</div>
12
+<div class="part right-dummy fixed right-0 w-1/2 h-screen bg-babyblue hidden">
13
+    <div class="flex flex-col justify-center h-full gap-10">
14
+        <div class="flex justify-start items-center animate__animated animate__fadeIn animate__delay-1s">
15
+            <img src="{{ asset('assets/logo-right.webp') }}" alt="Logo" class="logo-img">
16
+        </div>
17
+        <div class="flex justify-start items-center animate__animated animate__fadeIn animate__delay-1s">
18
+            <img src="{{ asset('assets/name-right.webp') }}" alt="Name Right" class="logo-img">
19
+        </div>
20
+        <img src="{{asset('assets/flower-right.webp')}}" alt="" class="absolute -right-2/4 top-32 h-96 w-96 animate__animated animate__fadeIn animate__delay-2s">
21
+    </div>
22
+</div>

+ 3
- 0
resources/views/digital-card.blade.php Bestand weergeven

@@ -32,6 +32,9 @@
32 32
         <div class="parent absolute h-screen w-screen" style="z-index: 999">
33 33
             @include('components.front-cover')
34 34
         </div>
35
+        <div class="parent absolute h-screen w-screen dummy-cover" style="z-index: 999">
36
+            @include('components.front-cover-intro-dummy')
37
+        </div>
35 38
         <div class="petal-overlay hidden" id="petalOverlay">
36 39
             <img src="{{ asset('assets/petal.gif') }}" alt="Falling Petals">
37 40
         </div>

Laden…
Annuleren
Opslaan