scrolling

package.json

@@ -13,6 +13,7 @@
     "@astrojs/tailwind": "^5.1.3",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
+    "@use-gesture/vanilla": "^10.3.1",
     "astro": "^5.0.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/pages/index.astro

@@ -15,6 +15,10 @@ import '@/styles/globals.css'
 		<link rel="preload" href="al-naslaa-black-white.jpg" as="image" />
 		<title>Al Naslaa</title>
 		<style is:inline>
+			:root {
+				--scrolling: 100%;
+				--cutit: inset(0 0 var(--scrolling) 0);
+			}
 			@font-face {
 			font-family: 'Gotham Rounded Bold'; 
 			src: url('./gotham-rounded-bold.otf') format('opentype');
@@ -67,6 +71,7 @@ import '@/styles/globals.css'
 			<img class="w-[100vw] col-start-1 row-start-1 object-cover object-[center_75%]" src="./al-naslaa-art.png" />
 			<img 
 			transition-style="out:wipe:up4"
+			data-alnaslaa
 			class="w-[100vw] col-start-1 row-start-1 object-cover object-[center_75%]" src="al-naslaa.jpg" />
 			<img 
 			transition-style="out:wipe:up3"
@@ -78,11 +83,59 @@ import '@/styles/globals.css'
 			transition-style="out:wipe:up"
 			class="w-[100vw] col-start-1 row-start-1 object-cover object-[center_75%]" src="al-naslaa-black-white.jpg" />
 		</main>
+		<script>
+			import { Gesture } from "@use-gesture/vanilla"
+			let scrolling = 100;
+			const main_ = document.querySelector<HTMLElement>("main");
+			const AWheelGesture = new Gesture(
+			//@ts-ignore
+			main_, {
+				onWheel: (state) => {
+					if(state.axis == "y"){
+						//@ts-ignore
+						document.documentElement.style.setProperty("--scrolling", scrolling + "%");
+						document.querySelector("[data-alnaslaa]")
+						?.setAttribute("style", `clip-path: var(--cutit) !important`);
+						//console.log(state.axis, )
+						if(state.delta[1] > 0){
+							if(document.documentElement.style.getPropertyValue("--scrolling")){
+								scrolling -= 1;
+							}
+						}
+						if(state.delta[1] < 0){
+							scrolling += 1;
+						}
+					}
+				},
+				onDrag: (state) => {
+					if(state.axis == "y"){
+						//@ts-ignore
+						document.documentElement.style.setProperty("--scrolling", scrolling + "%");
+						document.querySelector("[data-alnaslaa]")
+						?.setAttribute("style", `clip-path: var(--cutit) !important`);
+						//console.log(state.axis, )
+						if(state.delta[1] > 0){
+							if(document.documentElement.style.getPropertyValue("--scrolling")){
+								scrolling -= 1;
+							}
+						}
+						if(state.delta[1] < 0){
+							scrolling += 1;
+						}
+					}
+				},
+			});
+		</script>
 		<script is:inline>
-			function sleepFor(sleepDuration){
-				var now = new Date().getTime();
-				while(new Date().getTime() < now + sleepDuration){ /* Do nothing */ }
-			}
+			// .addEventListener("wheel", (e)=>{
+			// 	if(e.deltaY > 0){
+			// 		scrolling += 1
+			// 	} else {
+			// 		scrolling -= 1 
+			// 	}
+			// 	console.log(scrolling, e.deltaY)
+			// 	document.querySelector("[data-alnaslaa]").style = `--scrolling: ${scrolling}%; clip-path: var(--cutit) !important`
+			// });
 			// document.querySelectorAll("img").forEach(
 			// 	(elm) => {
 			// 		window.requestAnimationFrame(()=>{