What I mean by that is if Im scrolling down, my character will move along the path, but the view will ALWAYS show him in the center of my view. I need this to see upcoming obstacles in my way.
Here is my code (html):
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div style="height: 175px"></div>
<div class="container">
<div style="position: relative">
<img
class="crossLine"
src="/public/pngegg.png"
width="580"
height="1500"
alt=""
/>
<svg
width="540"
height="2990"
viewBox="0 0 540 2990"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="middlePath"
>
<defs>
<path
id="Path_440"
d="M253.744 2C253.744 2 8.36236 68.4995 17.2435 261C26.1246 453.5 380.243 311.5 380.243 531C380.243 750.5 15.2436 631.5 2.24357 826C-10.7564 1020.5 500.798 1091 535.244 1258.5C569.689 1426 296.243 1473 279.744 1460.5"
stroke="#F39029"
stroke-width="4"
/>
</defs>
<use href="#Path_440" stroke-dasharray="20 10" />
<use id="theFill" href="#Path_440" />
</svg>
<svg
id="pathIcon"
viewBox="0 0 100 191"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<rect width="100" height="191" fill="url(#pattern0)" />
<defs>
<pattern
id="pattern0"
patternContentUnits="objectBoundingBox"
width="1"
height="1"
>
<use
xlink:href="#image0_126_965"
transform="matrix(0.00376726 0 0 0.00197239 -0.00104536 0)"
/>
</pattern>
<image
id="image0_126_965"
width="266"
height="507"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUh"
/>
</defs>
</svg>
</div>
</div>
</body>
</html>
Here is my code (css):
height: 500vh;
background: #f1f1f1;
}
.container {
display: flex;
justify-content: center;
}
#pathIcon {
position: absolute;
inset: 0;
width: 100px;
height: 100px;
offset-rotate: 0rad;
}
.middlePath {
position: absolute;
}
.crossLine {
position: absolute;
}
Here is my code (js):
pathIcon.style.offsetPath = `path('${Path_440.getAttribute("d")}')`;
const pathLength = Path_440.getTotalLength();
function clamp(min, val, max) {
return Math.min(Math.max(min, val), max);
}
function updatePath() {
const docElt = document.documentElement;
const pathBox = theFill.getBoundingClientRect();
// calculates scroll progress based on viewport progress
const scrollProgress = clamp(
0,
-pathBox.y / (pathBox.height - docElt.clientHeight),
1
);
pathIcon.style.offsetDistance = `${scrollProgress * 100}%`;
// These lines fill in the dashes as you scroll down.
const drawLength = pathLength * scrollProgress;
const rest = pathLength - drawLength;
theFill.style.strokeDasharray = `${drawLength}px ${rest}px`;
}
updatePath();
window.addEventListener("scroll", () => updatePath());
I want to see the character move center of viewport but alway move along the path. Please help me