CSS로 이미지 슬라이드 만들기 - 2. 이동 효과
슬라이드의 기본 구조와 구현 방법은
-> CSS로 이미지 슬라이드 만들기 - 1. 투명 전환 효과
와 동일하고, 슬라이드를 전환하는 애니메이션 효과만 다르게 구현한 것입니다.
기본적인 슬라이드의 구조와 레이아웃을 만드는 자세한 방법은 첫 번째 슬라이드 만들기를 참고하시기 바랍니다.
완성된 이미지 슬라이드 소스는 다음 다운로드 링크에서 다운로드 받을 수 있습니다.
만들게 되는 슬라이드는 오른쪽에서 왼쪽으로 이동하는 애니메이션으로 구현됩니다. 현재 보이는 슬라이드를 제외한 나머지 안보이는 슬라이드들은 오른쪽에 감추어져 있고, 불릿을 클릭하는데 따라 해당 순서의 슬라이드가 오른쪽에서 왼쪽으로 이동하면서 표시되는 슬라이드입니다.
먼저 HTML 코드를 확인하겠습니다.
라디오박스로 슬라이드 이동을 구현하며, 실제 클릭 이동 구현은 슬라이드 하단의 라벨 태그로 만든 불릿(Bullets)으로 구현합니다.
<div class="slider">
<input type="radio" name="slide" id="slide1" checked>
<input type="radio" name="slide" id="slide2">
<input type="radio" name="slide" id="slide3">
<input type="radio" name="slide" id="slide4">
<ul id="imgholder" class="imgs">
<li><img src="./backup/815/img/slide1.jpg"></li>
<li><img src="./backup/815/img/slide2.jpg"></li>
<li><img src="./backup/815/img/slide3.jpg"></li>
<li><img src="./backup/815/img/slide4.jpg"></li>
</ul>
<div class="bullets">
<label for="slide1"> </label>
<label for="slide2"> </label>
<label for="slide3"> </label>
<label for="slide4"> </label>
</div>
</div>CSS로 슬라이드의 기본 구조를 만들어보겠습니다.
슬라이드 이미지 크기는 640x480px 입니다. 슬라이드 이미지 크기에 맞춰 슬라이드 기본 크기를 정의합니다.
640x480px 크기의 슬라이드를 가운데 정렬("margin: 0 auto;")하고 슬라이드 영역 바깥에 위치한 요소들은 보이지 않도록 해서("overflow: hidden;") 현재 슬라이드 오른쪽에 위치한 나머지 슬라이드들이 보이지 않도록 합니다.
불릿을 클릭하는데 따라 오른쪽의 안보이는 위치에 있던 슬라이드가 외쪽으로 이동하면서 표시되는 구조입니다.
.slider{
width: 640px;
height: 480px;
position: relative;
margin: 0 auto;
overflow: hidden; /* 현재 슬라이드 오른쪽에 위치한 나머지 슬라이드 들이 보이지 않도록 가림 */
}
.slider input[type=radio]{
display: none;
}슬라이드 이미지 목록을 배치합니다.
기본적으로 슬라이드 영역 크기 오른쪽 바깥에 위치를 시킵니다.
중요한 것은 개별 슬라이드("ul.imgs li")의 트랜지션 지연을 1초를 지정("transition-delay: 1s;")하는 것입니다.
이렇게 지연을 시킴으로써 새 슬라이드가 오른쪽에서 움직여 들어오는 동안 이전 슬라이드가 배경에 1초동안 애니메이션 지연 대기를 함으로써 배경이 웹페이지 빈 배경으로 보이는 문제를 막아줍니다.
ul.imgs{
padding: 0;
margin: 0;
list-style: none;
}
ul.imgs li{
position: absolute;
left: 640px;
transition-delay: 1s; /* 새 슬라이드가 이동해 오는 동안 이전 슬라이드 이미지가 배경이 보이도록 지연 */
padding: 0;
margin: 0;
}불릿은 라디오박스와 조합된 라벨("<label>") 태그로 만듭니다.
라이오박스는 보이지 않지만, 라벨 태그를 클릭하면 라디오박스를 클릭해 선택한 것과 동일한 이벤트가 발생하기 때문에, 라벨을 슬라이드 이동 불릿으로 만들어서 슬라이드 가운데 하단에 배치를 합니다.
.bullets{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
z-index: 2;
}
.bullets label{
display: inline-block;
border-radius: 50%;
background-color: rgba(0,0,0,0.55);
width: 20px;
height: 20px;
cursor: pointer;
}
/* 현재 선택된 불릿 배경 흰색으로 구분 표시 */
.slider input[type=radio]:nth-child(1):checked~.bullets>label:nth-child(1){
background-color: #fff;
}
.slider input[type=radio]:nth-child(2):checked~.bullets>label:nth-child(2){
background-color: #fff;
}
.slider input[type=radio]:nth-child(3):checked~.bullets>label:nth-child(3){
background-color: #fff;
}
.slider input[type=radio]:nth-child(4):checked~.bullets>label:nth-child(4){
background-color: #fff;
}가장 중요한 슬라이드 이동 애니메이션 효과를 만듭니다.
현재 슬라이드를 제외한 나머지 슬라이드들은 오른쪽 안보이는 위치(왼쪽에서 640px 위치)에 있고, 불릿을 클릭해 선택하면 해당 순서의 슬라이드가 왼쪽으로 이동("left: 0") 합니다.
애니메이션 시간을 0.5초로 비교적 짧게 한 것은 불릿 클릭을 연달아 빠르게 하면 이동 애니메이션이 중간에 끊기면서 슬라이드들이 다소 거칠게 움직이기 때문에 애니메이션을 빠르게 마무리하기 위해 적절하게 조정한 것입니다.
새로 이동해서 들어오는 슬라이드는 현재 표시되고 있는 슬라이드보다 앞쪽 순서에 있어야 하기 때문에 레이어 순서를 올려서(z-index: 1;) 앞쪽에서 이동하도록 합니다.
.slider input[type=radio]:nth-child(1):checked~ul.imgs>li:nth-child(1){
left: 0;
transition: 0.5s;
z-index:1;
}
.slider input[type=radio]:nth-child(2):checked~ul.imgs>li:nth-child(2){
left: 0;
transition: 0.5s;
z-index:1;
}
.slider input[type=radio]:nth-child(3):checked~ul.imgs>li:nth-child(3){
left: 0;
transition: 0.5s;
z-index:1;
}
.slider input[type=radio]:nth-child(4):checked~ul.imgs>li:nth-child(4){
left: 0;
transition: 0.5s;
z-index:1;
}완성된 슬라이드는 아래처럼 이동하는 애니메이션을 보여주면서 슬라이드가 바뀌게 됩니다.
보다 완성도 있는 슬라이드를 만들기 위해서는 트랜지션 지연 시간을 지정하는 것과 같은 작은 팁들을 잘 활용해야 합니다.
소스에서 "transition-delay" 속성을 지우면 현재 슬라이드와 새 슬라이드가 동시에 교차가 되면서 다소 이상한 동작을 보이는 것을 확인할 수 있습니다.
