728x90
HTML
<!-- 스와이프 슬라이드메뉴 -->
<div class="slider">
<div class="list">
<div class="item" style="--position: 1">
<img src="img/swiper-1.jpg" />
</div>
<div class="item" style="--position: 2">
<img src="img/swiper-2.jpg" />
</div>
<div class="item" style="--position: 3">
<img src="img/swiper-3.jpg" />
</div>
<div class="item" style="--position: 4">
<img src="img/swiper-4.jpg" />
</div>
<div class="item" style="--position: 5">
<img src="img/swiper-5.jpg" />
</div>
<div class="item" style="--position: 6">
<img src="img/swiper-6.jpg" />
</div>
<div class="item" style="--position: 7">
<img src="img/swiper-7.jpg" />
</div>
<div class="item" style="--position: 8">
<img src="img/swiper-8.jpg" />
</div>
<div class="item" style="--position: 9">
<img src="img/swiper-9.jpg" />
</div>
<div class="item" style="--position: 10">
<img src="img/swiper-10.jpg" />
</div>
<!-- 반복을 위해 처음 5개 이미지를 추가 -->
<div class="item" style="--position: 1">
<img src="img/swiper-1.jpg" />
</div>
<div class="item" style="--position: 2">
<img src="img/swiper-2.jpg" />
</div>
<div class="item" style="--position: 3">
<img src="img/swiper-3.jpg" />
</div>
<div class="item" style="--position: 4">
<img src="img/swiper-4.jpg" />
</div>
<div class="item" style="--position: 5">
<img src="img/swiper-5.jpg" />
</div>
</div>
</div>
포지션 쓴거 신경 X
지워주기
내가 짠 오류 코드
// <!-- 스와이프 슬라이드메뉴 -->
.slider {
background-color: $main_color;
overflow: hidden;
height: 250px;
margin: auto; /* 슬라이더를 가운데 정렬 */
display: grid; /* 그리드 레이아웃 사용 */
place-items: center; /* 아이템을 가운데로 정렬 */
width: 90%; /* 슬라이더의 너비를 부모 요소의 90%로 설정 */
.list {
display: flex;
width: calc(250px * 10);
animation: scroll 40s linear infinite; /* 40초 동안 linear(선형) 무한히 반복하는 애니메이션 설정 */
}
.item {
height: 200px; /* 슬라이드의 높이 설정 */
width: 250px; /* 슬라이드의 너비 설정 */
padding: 15px; /* 슬라이드 안쪽 여백 설정 */
perspective: 100px;
img {
width: 100%;
transition: transform 1s;
}
}
}
@keyframes scroll {
0% {
transform: translate3d(0, 0, 0);
} // 확인하기.
100% {
transform: translateX(calc(-250px * 5));
}
}
수정 코드 (1)
// <!-- 스와이프 슬라이드메뉴 -->
.slider {
background-color: $main_color;
overflow: hidden;
height: 250px;
margin: auto; /* 슬라이더를 가운데 정렬 */
display: grid; /* 그리드 레이아웃 사용 */
place-items: center; /* 아이템을 가운데로 정렬 */
width: 90%; /* 슬라이더의 너비를 부모 요소의 90%로 설정 */
.list {
display: flex;
width: calc(250px * 15);
animation: scroll 40s linear infinite; /* 40초 동안 linear(선형) 무한히 반복하는 애니메이션 설정 */
}
.item {
height: 250px; /* 슬라이드의 높이 설정 */
width: 250px; /* 슬라이드의 너비 설정 */
padding: 15px; /* 슬라이드 안쪽 여백 설정 */
perspective: 100px;
img {
width: 100%;
transition: transform 1s;
}
}
}
@keyframes scroll {
0% {
transform: translate3d(0, 0, 0);
} // 확인하기.
100% {
transform: translateX(calc(-250px * 10));
}
}
차이점
첫 번째 코드와 두 번째 코드의 주요 차이점은
.list의 width와 애니메이션의 translateX 값입니다.
첫 번째 코드
.list {
width: calc(250px * 10);
animation: scroll 40s linear infinite;
}
@keyframes scroll {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translateX(calc(-250px * 5));
}
}
두 번째 코드
.list {
width: calc(250px * 15);
animation: scroll 40s linear infinite;
}
@keyframes scroll {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translateX(calc(-250px * 10));
}
}
list의 너비를 width * 이미지 개수로 설정한 이유는
슬라이드의 각 항목(.item)이 정확하게 리스트 안에 배치되도록 하기 위함입니다.
이렇게 하면 슬라이드가 이동할 때 이미지가 끊기지 않고 자연스럽게 이어질 수 있습니다.
이미지 개수와 애니메이션 이동 거리
리스트에 실제로 포함된 이미지 개수는 15개입니다.
이 중 처음 10개의 이미지는 고유한 이미지이고, 마지막 5개의 이미지는 반복된 이미지입니다.
애니메이션이 자연스럽게 반복되도록 하기 위해,
전체 이미지의 절반이나 고유 이미지의 개수에 맞춰 이동 거리를 설정하는 경우도 있지만,
이 경우에는 이미지가 자연스럽게 반복될 수 있도록 전체 고유 이미지 수를 기준으로 이동 거리를 설정한 것입니다.
왜 10개 이동하는가?
리스트의 전체 너비를 calc(250px * 15)로 설정하고,
애니메이션의 이동 거리를 translateX(calc(-250px * 10))로 설정한 이유는 다음과 같습니다:
- 연속적인 순환: 애니메이션이 한 주기 동안 고유한 10개의 이미지를 모두 보여준 후,
- 반복된 이미지 5개를 통해 자연스럽게 다시 처음 이미지로 돌아옵니다.
- 이렇게 하면 슬라이드가 매끄럽고 자연스럽게 반복됩니다.
- 부드러운 전환: 애니메이션이 끝난 후 다시 시작할 때,
- 리스트의 처음과 끝이 자연스럽게 연결되도록 합니다.
- 이렇게 하면 사용자는 슬라이드가 끊김 없이 연속적으로 진행되는 것처럼 느낄 수 있습니다.
이미지와 리스트 구성
- 리스트에 포함된 이미지는 총 15개입니다.
- 고유 이미지: 10개
- 반복된 이미지: 5개
각 이미지의 너비가 250px이라면, 전체 리스트의 너비는 다음과 같이 계산됩니다:
width=250px×15=3750px\text{width} = 250\text{px} \times 15 = 3750\text{px}
애니메이션의 원리
- 리스트의 너비:
- 리스트의 너비를 전체 이미지 개수(15개)와 각 이미지의 너비(250px)를 곱하여 설정합니다.
- 따라서, 리스트의 너비는 3750px입니다.
- 애니메이션 이동 거리:
- 애니메이션의 이동 거리 translateX(calc(-250px * 10))은 10개의 이미지를 이동하는 것입니다.
- 따라서, 이동 거리는 -2500px입니다.
왜 10개의 이미지를 이동하는가?
- 고유 이미지 10개와 반복된 이미지 5개로 리스트를 구성한 이유는
- 애니메이션이 자연스럽게 반복되도록 하기 위함입니다.
- 애니메이션이 10개의 이미지를 이동한 후, 반복된 5개의 이미지가 나옵니다.
- 이 반복된 이미지는 고유 이미지의 처음 5개와 동일하므로,
- 애니메이션이 처음 상태로 돌아오는 것처럼 보이게 됩니다.
728x90
'> 포트폴리오 > wiggle wiggle' 카테고리의 다른 글
wiggle wiggle 준완성본 (0) | 2024.08.10 |
---|---|
[JS] 5초마다 지나가고 반복하는 캐러셀 배너 만들기 (0) | 2024.08.10 |
[JS/CSS] 드래그와 터치되는 캐러셀 만들기 (3) (1) | 2024.07.22 |
하단 여백 없애기 (1) | 2024.07.20 |
[SCSS] 전광판 안 멈추는 오류 (0) | 2024.07.20 |