Как сделать мой вертикальный образ параллакса более гладким? ⇐ Javascript

[Anonymous]

Я пытаюсь сделать эффект параллакса, аналогичный эффектам парящего на изображениях на этом сайте: https://www.framer.com/gallery/categori ... lioобразно class = "Snippet-Code-JS Lang-JS PrettyPrint-Override">document.querySelectorAll('.image-container').forEach(item => {
const img = item.querySelector('img');

item.addEventListener('mousemove', (e) => {
const rect = item.getBoundingClientRect();
const mouseY = e.clientY - rect.top; // Mouse Y position relative to the item
const halfHeight = rect.height / 2; // Midpoint of the element
const imgHeight = img.height - rect.height
const mousePercentage = mouseY/imgHeight*100

img.style.transform = `translateY(-${mousePercentage}px)`; // Move up
img.style.transition = "transform 0s ease-out"

});

item.addEventListener('mouseleave', () => {
img.style.transform = 'translateY(0)'; // Reset position when mouse leaves
img.style.transition = " transform 2s ease-out"
});

item.addEventListener('mouseenter', () =>{
img.style.transition = "transform 2s ease-out"
})
});< /code>
#display-grid{
display: grid;
width: 80%;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(24%, 1fr));

}

.cell{
border: 1px solid #EEEEEE;
border-radius: 1rem;
width: 100%;
overflow-y: hidden;
position: relative;
overflow: hidden;
border-radius: 12px;
aspect-ratio: 1 / 1.2;
}

.cell .image-container{
width: 100%;
height: 90%;
position: relative;
aspect-ratio: 1 / 1;
border-radius: 1rem;
overflow-y: hidden;

}

.cell img {
width: 100%;
height: auto;
object-fit: cover;
object-position: top;
border-radius: 1rem;
}< /code>





Image Title





InfoSwap

< /code>
< /div>
< /div>
< /p>
Я сделал его в том, что в том, что прокрутка изображения в рамке вверх и вниз по переменной % в зависимости от того, где мышь находится в контентаре изображения, но я обнаружил, что, когда мышь вступает в изображение-контентер, изображение перепадает в координаты. Если я добавлю время перехода к моей таблице стиля или слушателю «MouseMove», я обнаружил, что изображение ждет, пока мышь перестанет двигаться, прежде чем медленно перемещаться туда, где должно быть изображение.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... x-smoother