I am working on a page design that requires an Infinite Scrolling Background Image with a looping effect to create the illusion of infinity. On top of this background, a content card is displayed. However, the image extends beyond the page width on smaller screens, causing horizontal scrolling and layout issues.
Below is the React code snippet:
"use client";
import React from "react";
// Remaining code omitted for brevity...
export default Landing;
Here is the accompanying CSS used:
.infinite-scrolling {
// CSS properties for the infinite scrolling background image...
}
.glassy {
// Styling properties for glassy effect...
}
@keyframes slide {
// Keyframes animation for the sliding effect...
}
You can view the code demo here.
The goal is to achieve a seamless looped scrolling background without expanding the page horizontally on smaller devices. If you have any suggestions or know of a package that can help with this issue, your input would be greatly appreciated. Thank you!