(3단 이상도 rolling_row를 계속 추가하고 --left/--right를 번갈아 지정하면 됨)
- rolling_row--right : 오른쪽으로 흐르는 롤링
- rolling_row--left : 왼쪽으로 흐르는 롤링
- rolling_track 안의 이미지 목록은 JS(initRollingSlide)가 자동으로 1회 복제하여 이음매 없이 무한 반복시킴
→ 마크업에는 이미지를 딱 1세트만 작성하면 됨 (직접 두 번 안 써도 됨)
- 속도는 --rolling-duration 변수로 페이지별/행별 조절 가능 (기본 40s, 숫자가 작을수록 빠름)
예) .conSecXX .rolling_slide_wrap { --rolling-duration: 34s; }
- 이미지 간격/크기는 페이지별 main.css에서 .rolling_track / .rolling_track img 를 오버라이드
- 정지시키고 싶으면 rolling_slide_wrap에 is-paused 클래스 추가
자세한 사용 가이드(주석)는 assets/data/js/promotion/promotion_base.js의
initRollingSlide() 위 주석에도 동일하게 정리되어 있음.
사용 예시: promotion/FreepassEarlyBird_v.php (conSec11, conSec12),
promotion/cnuABCDPrgm_v.php (conSec3) */
.rolling_slide_wrap {
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
}
.rolling_row {
overflow: hidden;
width: 100%;
}
.rolling_track {
display: flex;
width: max-content;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
animation-duration: var(--rolling-duration, 40s);
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.rolling_row--right .rolling_track {
animation-name: rollingRight;
}
.rolling_row--left .rolling_track {
animation-name: rollingLeft;
}
.rolling_slide_wrap.is-paused .rolling_track {
animation-play-state: paused;
}
@keyframes rollingLeft {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes rollingRight {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.rolling_track img {
flex-shrink: 0;
display: block;
}