81 | 
86 |
91 |
96 | 
101 | 
106 |
107 |
125 |
126 |
108 |
109 | 
110 | 
111 | 
112 |
120 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
121 |
124 | {{^HBD_MSG}}
122 |{{^NICKNAME}}
123 |
127 |
131 |
132 |
133 |
134 |
128 |
130 | {{^SCROLL_MSG}}
129 |
135 |
139 |
140 | Wow! That was something weird.
136 |Hey look! There's a gift for you..
137 |C'mon, let's open it and see what's in there!
138 |
141 |
146 |
147 | Hey!
142 |Maybe it's a bit late to move in the hallway,
143 |Things are creepy here...
144 |I think we should go back inside.
145 |
148 |
152 |
153 | Ok! Why is it so empty here?
149 |You know what, let's move outside.
150 |Let's see if anyone's over there...
151 |
154 |
160 |
161 |
162 |
163 |
164 |
165 |
--------------------------------------------------------------------------------
/src/js/animation.js:
--------------------------------------------------------------------------------
1 | //jshint esversion:6
2 |
3 | const button = document.querySelector(".btn"),
4 | darkroom = document.querySelector(".darkroom"),
5 | giftroom = document.querySelector(".giftroom"),
6 | hallway = document.querySelector(".hallway"),
7 | room = document.querySelector(".empty-room"),
8 | flash = document.querySelector(".flash");
9 |
10 | // These are the text elements that hold messages to be displayed in the respective screes
11 |
12 | const blackText = document.querySelectorAll(".bb-text"), // msgs in the dark room scene
13 | giftText = document.querySelectorAll(".gift-text"), // msgs in the gift scene
14 | hallText = document.querySelectorAll(".hall-text"), // msgs in the hallway scene
15 | roomText = document.querySelectorAll(".room-text"), // msgs in empty room scene
16 | CTAtext = document.querySelector(".btn-ref");
17 |
18 | //Elements in the card page
19 |
20 | const frames = document.querySelectorAll(".frame"),
21 | msgWindow = document.querySelector(".scroll"), // this one has the message frame in [0] and card fram in [1]
22 | msg = document.querySelector(".text"); // the Message para
23 |
24 | //Sfx files
25 |
26 | const light = document.querySelector(".switch-aud"),
27 | blast = document.querySelector(".blast-aud"),
28 | door = document.querySelector(".door-aud"),
29 | haunt = document.querySelector(".haunt-aud"),
30 | music = document.querySelector(".hbd-aud");
31 |
32 | // readMsg() displays the paras in each scene successively. It takes an array of the para elements as input.
33 |
34 | const readMsg = (text) => {
35 | for (let i = 0; i < text.length; i++) {
36 | // this loop goes through all the text msg paras
37 | setTimeout(() => {
38 | // A timeout of 5s ia applied to all text elements so that appear successively one after the other
39 | text[i].classList.add("read"); // this adds a fadeIn-fadeOut animation to elements
40 | if (i === text.length - 1) {
41 | // this ensures that the button appears only after the last text is displayed.
42 | button.style.display = "inline-block";
43 | CTAtext.style.display = "block";
44 | }
45 | }, 5000 * i);
46 | }
47 | };
48 |
49 | // transition() is animation for change from one scene to another. It takes the current scene div element as input.
50 |
51 | const transition = (currentScene) => {
52 | currentScene.classList.add("fade-in");
53 | currentScene.style.opacity = "0";
54 | button.style.display = "none";
55 | CTAtext.style.display = "none";
56 | };
57 |
58 | //Animation Code
59 |
60 | /*
61 | In the beginning, the black page appears signifying a dark room and after displaying the msg paras
62 | one by one, a button(bulb) appears and the user is asked to click the button to swith on the lights.
63 | */
64 |
65 | export const animate = function () {
66 | CTAtext.innerHTML = "Click the Light Bulb.";
67 |
68 | readMsg(blackText);
69 |
70 | button.addEventListener("click", function () {
71 | if (button.classList.contains("switch")) {
72 | /*
73 | When the switch is pressed, the black div will wipe out and the backgroung scene with no
74 | elements will appear, signifying that the lights are turned on and the room is empty. Then
75 | the msg will be displayed after which, the user will be asked to move out and the button with
76 | door icon will appear.
77 | */
78 |
79 | light.play();
80 | transition(darkroom);
81 | CTAtext.innerHTML = "Click the Door";
82 | setTimeout(function () {
83 | button.classList.add("door-out");
84 | button.classList.remove("switch");
85 | darkroom.style.display = "none";
86 | readMsg(roomText);
87 | }, 4000);
88 | } else if (button.classList.contains("door-out")) {
89 | /*
90 | when the door is pressed, scene changes to cemetry. Again, the msg will be displayed, after
91 | which, the user will be asked to come inside and the button with door will appear again.
92 | */
93 |
94 | door.play();
95 | transition(room);
96 | setTimeout(function () {
97 | haunt.play();
98 | haunt.loop = true;
99 | button.classList.add("door-in");
100 | button.classList.remove("door-out");
101 | room.style.display = "none";
102 | readMsg(hallText);
103 | }, 4000);
104 | } else if (button.classList.contains("door-in")) {
105 | /*
106 | when the door is pressed, scene changes to the gift room. Again, the msg will be displayed, after
107 | which, the user will be asked to open the gift and the button with gift will appear.
108 | */
109 |
110 | door.play();
111 | transition(hallway);
112 | CTAtext.innerHTML = "Click the Gift";
113 | setTimeout(function () {
114 | button.classList.add("gift");
115 | button.classList.remove("door-in");
116 | hallway.style.display = "none";
117 | readMsg(giftText);
118 | }, 4000);
119 | } else if (button.classList.contains("gift")) {
120 | /*
121 | when the gift is pressed, the gift scene vanishes and the white div fades slowly giving a sense
122 | of explosion. After that, the message frame appears and moves up until the message completes. Then,
123 | the message frame fades away and the card appears.
124 | */
125 |
126 | haunt.pause();
127 | blast.play();
128 | giftroom.style.display = "none";
129 | transition(flash);
130 |
131 | music.loop = true;
132 | music.play();
133 |
134 | if (!process.env.SCROLL_MSG) {
135 | frames[0].style.display = "flex";
136 | setTimeout(() => {
137 | frames[0].classList.add("appear");
138 | frames[0].style.opacity = "1";
139 | }, 1500);
140 | return;
141 | }
142 |
143 | //This value is stored in the --readTime css variable of root element and is calculated dynamically at build time.
144 | const readTime =
145 | parseInt(
146 | getComputedStyle(document.documentElement).getPropertyValue(
147 | "--readTime"
148 | )
149 | ) + 5;
150 |
151 | frames[1].style.display = "flex";
152 |
153 | setTimeout(() => {
154 | frames[1].classList.add("appear");
155 | frames[1].style.opacity = "1";
156 | msg.classList.add("move-up");
157 | }, 1500);
158 |
159 | setTimeout(() => {
160 | msg.style.transform = "translateY(-100%)";
161 | flash.style.display = "none";
162 | }, 5000);
163 |
164 | setTimeout(() => {
165 | msgWindow.classList.add("fade-in");
166 | msgWindow.style.opacity = "0";
167 | }, readTime * 1000);
168 |
169 | setTimeout(() => {
170 | frames[1].style.display = "none";
171 | frames[0].style.display = "flex";
172 | frames[0].classList.add("appear");
173 | frames[0].style.opacity = "1";
174 | }, (readTime + 3) * 1000);
175 | }
176 | });
177 | };
178 |
--------------------------------------------------------------------------------
/src/scss/_components.scss:
--------------------------------------------------------------------------------
1 | // DECORATIONS
2 |
3 | .balloon {
4 | grid-row: 1 / -1;
5 | width: 130%;
6 |
7 | &--left {
8 | grid-column: balloon-l-start / balloon-l-end;
9 | animation: balloon-move 4s linear 0s infinite;
10 | @media (max-width: 800px) {
11 | margin-left: -25%;
12 | }
13 |
14 | @media (max-width: 500px) {
15 | margin-left: -40%;
16 | }
17 | }
18 |
19 | &--right {
20 | grid-column: balloon-r-start / balloon-r-end;
21 | margin-left: -20%;
22 | animation: balloon-move 4s linear 0s infinite reverse;
23 | @media (max-width: 800px) {
24 | margin-left: 25%;
25 | }
26 | }
27 |
28 | @media (max-width: 800px) {
29 | width: 100%;
30 | }
31 |
32 | @media (max-width: 500px) {
33 | width: 120%;
34 | }
35 | }
36 |
37 | .flag {
38 | grid-row: 1/2;
39 | z-index: 0;
40 |
41 | &--c-left {
42 | grid-column: flag-cl-start / flag-cl-end;
43 | @media (max-width: 800px) {
44 | display: none;
45 | }
46 | }
47 |
48 | &--c-right {
49 | grid-column: flag-cr-start / flag-cr-end;
50 | @media (max-width: 800px) {
51 | display: none;
52 | }
53 | }
54 |
55 | &--left {
56 | grid-column: flag-l-start / flag-l-end;
57 | }
58 |
59 | &--right {
60 | grid-column: flag-r-start / flag-r-end;
61 | }
62 |
63 | @media (max-width: 800px) {
64 | transform: scale(1.2);
65 | margin-top: 20%;
66 | }
67 | }
68 |
69 | // BIRTHDAY CARD
70 |
71 | .img-back {
72 | position: relative;
73 | background-color: #ffa8dc;
74 | height: 20rem;
75 | width: 20rem;
76 | border-radius: 50%;
77 |
78 | @media (max-width: 800px) {
79 | height: 35rem;
80 | width: 35rem;
81 | }
82 |
83 | @media (max-width: 500px) {
84 | height: 20rem;
85 | width: 20rem;
86 | }
87 | }
88 |
89 | .bd-pic {
90 | @include position;
91 |
92 | height: 83.33333333%;
93 | width: 83.33333333%;
94 | overflow: hidden;
95 |
96 | border-color: #fff;
97 | border-style: dotted;
98 | border-radius: 50%;
99 |
100 | background-image: url(../pic.jpeg);
101 | background-position: top;
102 | background-repeat: no-repeat;
103 | background-size: cover;
104 | }
105 |
106 | .cap {
107 | @include position(-15%, 50%, 0, 0);
108 |
109 | height: 33.33333333%;
110 | }
111 |
112 | .confetti {
113 | @include position;
114 |
115 | height: 150%;
116 | width: 150%;
117 | }
118 |
119 | .cake {
120 | @include position(90%);
121 |
122 | height: 70%;
123 | width: 70%;
124 | }
125 |
126 | .HBD-text {
127 | width: 90%;
128 | }
129 |
130 | .HBD {
131 | font-size: 2.4rem;
132 | padding: 0;
133 |
134 | @media (max-width: 800px) {
135 | font-size: 3.4rem;
136 | }
137 |
138 | @media (max-width: 500px) {
139 | font-size: 3rem;
140 | }
141 | }
142 |
143 | .nickname {
144 | font-size: 3.2rem;
145 | padding: 0;
146 |
147 | @media (max-width: 800px) {
148 | font-size: 4.2rem;
149 | }
150 | @media (max-width: 500px) {
151 | font-size: 3.8rem;
152 | }
153 | }
154 |
155 | // SCROLL
156 |
157 | .scroll {
158 | position: relative;
159 | overflow-y: hidden;
160 | height: 70%;
161 | width: 80%;
162 | font-size: 2.4rem;
163 |
164 | @media (max-width: 800px) {
165 | // width: 60%;
166 | height: 60%;
167 | }
168 |
169 | @media (max-width: 500px) {
170 | height: 80%;
171 | font-size: 2.2rem;
172 | }
173 | }
174 |
175 | .text {
176 | @include position(50%, 0, 0, 0);
177 | text-align: center;
178 | }
179 |
180 | // BUTTONS
181 |
182 | .btn {
183 | @include position(60%, 50%, 0, -50%);
184 |
185 | display: none;
186 | overflow: hidden;
187 | height: 15rem;
188 | width: 15rem;
189 |
190 | background-repeat: no-repeat;
191 | background-size: contain;
192 | background-position: center;
193 | animation: heart-beat 2s linear 0s infinite alternate;
194 | }
195 |
196 | .btn-ref {
197 | @include position(90%, 50%, -50%, 0);
198 |
199 | text-align: center;
200 |
201 | color: #fff;
202 | display: none;
203 | font-size: 1.8rem;
204 | }
205 |
206 | .switch {
207 | background-image: url("../resources/img/bulb.svg");
208 | }
209 |
210 | .gift {
211 | background-image: url("../resources/img/gift.svg");
212 | }
213 |
214 | .door-in,
215 | .door-out {
216 | background-image: url("../resources/img/door.svg");
217 | }
218 |
219 | //ROOMS
220 |
221 | .darkroom,
222 | .flash,
223 | .giftroom,
224 | .empty-room,
225 | .hallway {
226 | text-align: center;
227 | position: absolute;
228 | height: 100vh;
229 | width: 100vw;
230 | }
231 |
232 | .darkroom {
233 | background-color: #000;
234 | }
235 |
236 | .flash {
237 | background-color: #fff;
238 | }
239 |
240 | .giftroom,
241 | .empty-room {
242 | background-color: #141852;
243 | }
244 |
245 | .hallway {
246 | background-image: radial-gradient(transparent, #000),
247 | url(../resources/img/Hallway.svg);
248 | background-position: center;
249 | background-repeat: no-repeat;
250 | background-size: cover;
251 |
252 | overflow: hidden;
253 | }
254 |
255 | .empty-room,
256 | .giftroom,
257 | .content {
258 | background-image: radial-gradient(transparent, rgba(0, 0, 0, 0.65)),
259 | url(../resources/img/bedroom.svg);
260 | background-position: 70%;
261 | background-repeat: no-repeat;
262 | background-size: cover;
263 | }
264 |
265 | // TEXT CONTAINERS
266 |
267 | .bb-text,
268 | .gift-text,
269 | .hall-text,
270 | .room-text {
271 | @include position(20%, 50%, -50%, -50%);
272 |
273 | display: inline-block;
274 | text-align: center;
275 | width: 80vw;
276 | opacity: 0;
277 | font-size: 3.2rem;
278 | }
279 |
280 | // CANDLE -> https://codepen.io/rizqyhi/pen/BsAFn
281 |
282 | .velas {
283 | background: #ffffff;
284 | border-radius: 0.625rem;
285 | position: absolute;
286 | top: 70%;
287 | left: 50%;
288 | width: 1.5%;
289 | height: 12%;
290 | backface-visibility: hidden;
291 | }
292 | .velas:after,
293 | .velas:before {
294 | background: rgba(255, 0, 0, 0.4);
295 | content: "";
296 | position: absolute;
297 | width: 100%;
298 | height: 5%;
299 | }
300 | .velas:after {
301 | top: 25%;
302 | left: 0;
303 | }
304 | .velas:before {
305 | top: 45%;
306 | left: 0;
307 | }
308 |
309 | /* Fire */
310 |
311 | .fuego {
312 | border-radius: 100%;
313 | position: absolute;
314 | top: -50%;
315 | left: 60%;
316 | margin-left: -2.6px;
317 | width: 100%;
318 | height: 40%;
319 | }
320 | .fuego:nth-child(1) {
321 | animation: fuego 2s 6.5s infinite;
322 | }
323 | .fuego:nth-child(2) {
324 | animation: fuego 1.5s 6.5s infinite;
325 | }
326 | .fuego:nth-child(3) {
327 | animation: fuego 1s 6.5s infinite;
328 | }
329 | .fuego:nth-child(4) {
330 | animation: fuego 0.5s 6.5s infinite;
331 | }
332 | .fuego:nth-child(5) {
333 | animation: fuego 0.2s 6.5s infinite;
334 | }
335 |
336 | /* Animation Fire */
337 |
338 | @keyframes fuego {
339 | 0%,
340 | 100% {
341 | background: rgba(254, 248, 97, 0.5);
342 | box-shadow: 0 0 250% 62.5% rgba(248, 233, 209, 0.2);
343 | transform: scale(1);
344 | }
345 | 50% {
346 | background: rgba(255, 50, 0, 0.1);
347 | box-shadow: 0 0 250% 125% rgba(248, 233, 209, 0.2);
348 | transform: scale(0);
349 | }
350 | }
351 |
352 | @keyframes in {
353 | to {
354 | transform: translateY(0);
355 | }
356 | }
357 |
--------------------------------------------------------------------------------
/src/resources/img/gift.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/img/door.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/img/balloon-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/img/balloon-left.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/img/stars.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/img/cake.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/img/confetti.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
Hey!
155 |Why is it so dark here?
156 |157 | {{^NAME}}! Can you please switch on the lights? 158 |
159 |