diff --git a/wiki/pages/home.html b/wiki/pages/home.html index 24e534e392eaa50d230efdc2d082b4ed67c87f9d..fcb7573242dba0e023a379a0817151fd1d689f5a 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>