CSS Бесконечная вертикальная прокрутка для фона изображения стрелки без пробелов ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект бесконечной вертикальной прокрутки для изображения стрелки (высотой 1101 пиксель), которое прокручивается сверху вниз без каких-либо видимых промежутков. Изображение должно плавно повторяться, создавая эффект непрерывно прокручивающейся стрелки.
изображение, которое я хочу бесконечно прокручивать

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

import { useEffect, useRef } from "react";
import Heading from "../Heading/Heading";
import BodyText from "../BodyText/BodyText";
import infinteArrows from "../../assets/icons/arrowinfinte.png";
import './index.css';

const BusinessSuccess = () => {
const containerRef = useRef(null);

useEffect(() => {
const container = containerRef.current;
const image = container.querySelector(".scrolling-image");

// Clone the image and append it at the bottom for a seamless scroll effect
const clone = image.cloneNode(true);
container.appendChild(clone);

// Reset the scroll position when the first image scrolls up fully
const handleAnimationEnd = () => {
container.scrollTop = 0;
};
container.addEventListener("animationiteration", handleAnimationEnd);

return () => {
container.removeEventListener("animationiteration", handleAnimationEnd);
};
}, []);

return (

{/* Left Column - Spans 8 columns on medium and larger screens */}




{/* Right Column - Scrolling Image Effect */}


[img]{infinteArrows} alt=[/img]



);
};

export default BusinessSuccess;

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

.scrolling-image-container {
position: relative;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}

.scrolling-image {
flex-shrink: 0;
height: 130%; /* Adjust to ensure the image goes out of view */
animation: scrollVertically 5s linear infinite;
}

@keyframes scrollVertically {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%); /* Move the image fully out of view */
}
}

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

Подробнее здесь: https://stackoverflow.com/questions/791 ... thout-gaps