From 9e8d7c07714f00fe21d92e25e2f9afe305ccc555 Mon Sep 17 00:00:00 2001
From: Shraddha <ShraddhaRaghuram@student.tudelft.nl>
Date: Mon, 16 Sep 2024 16:53:13 +0200
Subject: [PATCH] timeline
---
wiki/pages/home.html | 59 ++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 59 insertions(+)
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index 24e534e..fcb7573 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -177,6 +177,65 @@
</div>
</div>
<canvas id="timeline"></canvas>
+
+<script>
+ function drawTimeline() {
+ const canvas = document.getElementById('timeline');
+ if (!canvas.getContext) return;
+ const ctx = canvas.getContext('2d');
+
+ // Clear the canvas before each redraw
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Get the current scroll position
+ const scrollY = window.scrollY || window.pageYOffset;
+
+ // Get the canvas position relative to the viewport
+ const canvasRect = canvas.getBoundingClientRect();
+
+ // Calculate the starting point of the canvas relative to the document
+ const canvasTop = scrollY + canvasRect.top;
+
+ // Determine the scroll progress relative to the canvas
+ const viewportHeight = window.innerHeight;
+ const scrollProgress = (scrollY + viewportHeight - canvasTop) / (canvas.height + viewportHeight);
+
+ // Clamp progress between 0 and 1
+ const progress = Math.max(0, Math.min(scrollProgress, 1));
+
+ // Drawing parameters
+ ctx.strokeStyle = '#185A4F';
+ ctx.lineWidth = 17;
+ ctx.lineCap = 'round';
+ ctx.lineJoin = 'round';
+
+ // Begin drawing
+ ctx.beginPath();
+
+ // Define your path here (customize as needed)
+ const startX = canvas.width / 2;
+ const startY = 0;
+ const endY = canvas.height;
+
+ // Calculate the current drawing point based on progress
+ const currentY = startY + (endY - startY) * progress;
+
+ // Move to the start point
+ ctx.moveTo(startX, startY);
+
+ // Draw line to the current point
+ ctx.lineTo(startX, currentY);
+
+ // Stroke the path
+ ctx.stroke();
+ }
+
+ // Initial draw
+ drawTimeline();
+
+ // Add scroll event listener
+ window.addEventListener('scroll', drawTimeline);
+</script>
<!--
<div class="homepage-content-img8 homepage-elements reveal" id="homepage-content-img8"></div>
<div class="homepage-content-img9 homepage-elements reveal" id="homepage-content-img9"></div>
--
GitLab