Как я могу сохранить персонаж на экране при прокрутке и при этом продолжать перемещать его по пути? [закрыто] ⇐ CSS

[Гость]

Это мой вопрос.
Пожалуйста, помогите мне рассчитать прогресс прокрутки, чтобы мой значок пути всегда оставался внутри экрана при прокрутке. Или, если у вас есть другие идеи, дайте мне знать.
Вот мой код:

Код: Выделить всё

  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());

Код: Выделить всё

 body {
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;
}

Код: Выделить всё

[img]/public/pngegg.png[/img]
          width="580"
height="1500"
alt=""
/>

It looks fine at first glance, but when I scroll, the pathIcon moves too fast and sometimes goes off-screen. Я хочу, чтобы он замедлился или остался неподвижным в середине экрана, но все еще двигался по пути. Это сделает его более плавным и даст лучший обзор пути.
Вот текущее состояние и желаемый результат.
Пожалуйста, помогите мне. Спасибо за все ваши ответы


Источник: https://stackoverflow.com/questions/781 ... ve-it-move