diff --git a/src/containers/main/CropLine/index.tsx b/src/containers/main/CropLine/index.tsx index 79e173c1..28eeb618 100644 --- a/src/containers/main/CropLine/index.tsx +++ b/src/containers/main/CropLine/index.tsx @@ -16,7 +16,7 @@ const cropImageList = [ const CropLine = ({ reverse = false }: CropLineProps) => { const [cropListCount, setCropListCount] = useState(0); useEffect(() => { - setCropListCount(Math.ceil(window.innerHeight / cropImageList.length) + 1); + setCropListCount(Math.ceil(window.innerHeight / 136 / cropImageList.length) + 1); }, []); const cropList = Array.from({ length: cropListCount * cropImageList.length }).map((_, index) => ({ @@ -31,6 +31,11 @@ const CropLine = ({ reverse = false }: CropLineProps) => { crop ))} + + {cropList.map((crop) => ( + crop + ))} + ); }; diff --git a/src/containers/main/CropLine/style.css b/src/containers/main/CropLine/style.css index 6d66cd75..4d0f0e44 100644 --- a/src/containers/main/CropLine/style.css +++ b/src/containers/main/CropLine/style.css @@ -1,25 +1,69 @@ +:root { + --duration: 20s; +} + .rolling_crop { - animation: 1000s linear 0s infinite normal forwards running rolling_top; + animation: var(--duration, 10s) linear 0s infinite normal forwards running rollingtop; +} +.rolling_crop_clone { + animation: var(--duration, 10s) linear 0s infinite normal none running rollingtopclone; } .rev_rolling_crop { - animation: 1000s linear 0s infinite normal forwards running rolling_bottom; + animation: var(--duration, 10s) linear 0s infinite normal forwards running rollingbottom; +} +.rev_rolling_crop_clone { + animation: var(--duration, 10s) linear 0s infinite normal none running rollingbottomclone; } @keyframes rolling_top { 0% { - transform: translateY(0%); + transform: translateY(0); } 50% { + display: none; + transform: translateY(-100%); + } + 50.1% { + display: none; + transform: translateY(99.8%); + } + 100% { + transform: translateY(0); + } +} + +@keyframes rolling_top_clone { + 0% { + transform: translateY(100%); + } + 100% { transform: translateY(-100%); } } @keyframes rolling_bottom { 0% { - transform: translateY(-99%); + transform: translateY(0); + } + 50% { + display: none; + transform: translateY(100%); + } + 50.1% { + display: none; + transform: translateY(-99.8%); + } + 100% { + transform: translateY(0); + } +} + +@keyframes rolling_bottom_clone { + 0% { + transform: translateY(-100%); } 100% { - transform: translateY(1%); + transform: translateY(100%); } }