Added background video

package-lock.json

@@ -7,6 +7,9 @@
 		"": {
 			"name": "openbirchmockupsite",
 			"version": "0.0.1",
+			"dependencies": {
+				"svelte-parallax": "^0.6.0"
+			},
 			"devDependencies": {
 				"@fontsource/fira-mono": "^4.5.10",
 				"@neoconfetti/svelte": "^1.0.0",
@@ -1457,6 +1460,11 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/focus-options-polyfill": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/focus-options-polyfill/-/focus-options-polyfill-1.6.0.tgz",
+			"integrity": "sha512-uyrAmLZrPnUItQY5wTdg31TO9GGZRGsh/jmohUg9oLmLi/sw5y7LlTV/mwyd6rvbxIOGwmRiv6LcTS8w7Bk9NQ=="
+		},
 		"node_modules/foreground-child": {
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
@@ -2704,6 +2712,14 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-parallax": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/svelte-parallax/-/svelte-parallax-0.6.0.tgz",
+			"integrity": "sha512-W2dGPNmK274AmL8Ibzr96luh24jr3u2MfAmAJTpnhAZwxkRws5MKgCxfxBBPvpRUc2GpGGIGanhTYXoHV6DcBw==",
+			"dependencies": {
+				"focus-options-polyfill": "^1.6.0"
+			}
+		},
 		"node_modules/svelte-preprocess": {
 			"version": "5.1.4",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz",

package.json

@@ -26,5 +26,8 @@
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"svelte-parallax": "^0.6.0"
+	}
 }

src/routes/+layout.svelte

@@ -23,14 +23,7 @@
 	}
 
 	main {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		padding: 1rem;
 		width: 100%;
-		max-width: 64rem;
-		margin: 0 auto;
-		box-sizing: border-box;
 	}
 
 	footer {

src/routes/+page.svelte

@@ -2,14 +2,15 @@
 	import Counter from './Counter.svelte';
 	import welcome from '$lib/images/svelte-welcome.webp';
 	import welcome_fallback from '$lib/images/svelte-welcome.png';
+	import differencialBackgroundVideo from '$lib/videos/DifferentialEquation.gif';
 	import "tailwindcss/tailwind.css";
 
-	const sleep = (ms) => {
+	const sleep = (ms: number) => {
 		return new Promise((resolve) => setTimeout(resolve, ms));
 	};
 
 	let isAutoTyping = true;
-	let textField;
+	let textField: HTMLInputElement;
 	async function startTyping(){
 		for (let charecter of "testing..."){
 			if (!isAutoTyping) break;
@@ -18,8 +19,14 @@
 		}
 	}
 
+	async function resetFeild() {
+		textField.value = "";
+	}
+
 	import { onMount } from 'svelte';
+    import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
 	onMount(() => {
+		resetFeild();
 		startTyping();
 	})
 </script>
@@ -30,7 +37,12 @@
 </svelte:head>
 
 <section>
-	<div class="double_centered_boxes py-16">
+	<Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
+		<ParallaxLayer rate={0} span={0.6}>
+			<div class="relative fill">
+				<img class="backgroundVideoContainer" src="{differencialBackgroundVideo}" alt="Background"/>
+				<div class="top-0 left-0 w-full py-16 absolute">
+					<div class="centerAndLimit double_centered_boxes">
 						<div>
 							<h1 class="text-neutral-content">
 								Welcome to<br/>
@@ -42,6 +54,23 @@
 							<input bind:this={textField} type="text" class="input input-bordered w-3/4 max-w-screen-xl text-neutral-content">
 						</div>
 					</div>
+				</div>
+			</div>
+		</ParallaxLayer>
+		<ParallaxLayer rate={0.2} offset={0.6} span={1} class="bg-base-100">
+			<div class="double_centered_boxes py-16">
+				<div>
+					<h1 class="text-neutral-content">
+						Welcome to<br/>
+						<b class="text-primary">OpenBirch</b>
+					</h1>
+				</div>
+				<div></div>
+				<div class="h-80 flex items-end justify-center">
+				</div>
+			</div>
+		</ParallaxLayer>
+	</Parallax>
 </section>
 
 <style lang="scss">
@@ -49,4 +78,28 @@
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 	}
+
+	.centerAndLimit {
+		max-width: 64rem;
+		min-width: 32rem;
+		width: 50%;
+  		margin: 0 auto;
+		// border: red 1mm solid;
+	}
+
+	.backgroundVideoContainer{
+		filter: blur(10px);
+	}
+
+	.fill {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		overflow: hidden
+	}
+	.fill img {
+		flex-shrink: 0;
+		min-width: 100%;
+		min-height: 100%
+	}
 </style>