uiSlide
이번에 구현할 기능은 슬라이드안에서 고정되는(fixed) 객체에 대한
표현이었다.
시중(?)의 슬라이드는 전부 transform: translate()로 구현되있다보니,
position: fixed or absolute가 정상작동하지 않는 문제가 있었다.
<li> 10개의 슬라이드가 있다.
기본 슬라이드
<ul>
<li class="slide1">
<span>slide1</span>
<img>
</li>
<li class="slide2">
<span>slide2</span>
<img>
</li>
<li class="slide3">
<span>slide3</span>
<img>
</li>
<li class="slide4">
<span>slide4</span>
<img>
</li>
<li class="slide5">
<span>slide5</span>
<img>
</li>
<li class="slide6">
<span>slide6</span>
<img>
</li>
<li class="slide7">
<span>slide7</span>
<img>
</li>
<li class="slide8">
<span>slide8</span>
<img>
</li>
<li class="slide9">
<span>slide9</span>
<img>
</li>
<li class="slide10">
<span>slide10</span>
<img>
</li>
</ul>
슬라이드 1~10까지 움직이는데
이미지정보에 해당하는 텍스트들이 floating된채
상단 고정이라면,
시판중인 슬라이드들의(bx나 swiper)
해결방법이 이랬다.
기본 슬라이드 해결방법
<ul>
<li class="slide1">
<img>
</li>
<li class="slide2">
<img>
</li>
<li class="slide3">
<img>
</li>
<li class="slide4">
<img>
</li>
<li class="slide5">
<img>
</li>
<li class="slide6">
<img>
</li>
<li class="slide7">
<img>
</li>
<li class="slide8">
<img>
</li>
<li class="slide9">
<img>
</li>
<li class="slide10">
<img>
</li>
</ul>
<div>
<span>slide1</span>
<span>slide2</span>
<span>slide3</span>
<span>slide4</span>
<span>slide5</span>
<span>slide6</span>
<span>slide7</span>
<span>slide8</span>
<span>slide9</span>
<span>slide10</span>
</div>
고정되어 표현될 내용을 따로 추출하여
슬라이드의 콜백에 맞게 내용을 바꿔주는 것이다.
또는, 슬라이드가 움직이는 방향으로 반대의 translateX의 값을 주는
황당한 방법도 있긴하겠지만….
그래서 쉽게 해결하기 위해
슬라이드가 margin으로 움직이는 uiSlide를 생각했다.
아마 시판되는 slide들은 reflow에 대한 성능저하를 우려하여 margin을 배제한 것 같은데,
고정된 객체를 표현하기 위해 콜백을 받는것보다는
이 방법이 나아보였다.
단순히 margin과 transition으로만 구현하려고 했는데 몇가지 문제점에 부딛혔다.
역시나 불필요한 reflow발생, 그리고 transition으로 구현하다보니 css의 콜백이 원하는 대로 작동하지 않았다.
슬라이드는 1에서 10을 순차적으로 보여준다.
1,2,3...
그리고 10이 되면
10(슬라이드의 마지막) (슬라이드의 첫번째로 이동)
1,2,3...
이런식으로 보여주게 된다.
10에서 1로 갈때 움직임이 많다보니 이질감이 느껴져서 slide의 옵션에는 infinite가 존재한다.
마치 1~10을 무제한으로 복제해서 보여주는듯한 움직임이 특징이다.
1,2,3...10,1,2,3...10,1,2,3
실제 구현방법은 이렇다. 1(슬라이드의 처음)과 10(슬라이드의 끝)을 복제하여 앞뒤에 붙인다. 실제로 슬라이드될 숫자는 이렇다. 10,1,2,3…10,1(총 12개) 작동법은 복제된 객체로 슬라이드(에니메이션있음)가 움직이면 콜백으로 실제 객체로 슬라이드(에니메이션없음)를 움직이는 것이다. 아래와 같다.
1,2,3...10,1(복제객체),1(실제객체),2,3...
가상의 스타일로 환산하면 대충 이렇다.
margin-left: -100px; transition: 1s, // 1
margin-left: -200px; transition: 1s, // 2
margin-left: -300px; transition: 1s // 3
...
margin-left: -1000px; transition: 1s // 10
margin-left: -1100px; transition: 1s // 복제 1
margin-left: -100px; transition: 0s // 1
margin-left: -200px; transition: 2s // 2
위에서 보듯 복제객체에서 실제 객체로 이동 시 에니메이션을 제거하는 것이 특징이다. 물론 복제1과 1로 이동 시 시간은 적을 수록 문제가 발생하지 않는다. 처음에는 style의 콜백문제라 생각하여 콜백을 따로 구현했지만, 콜백과 무관하게 브라우저의 렌더링 되는 속도에 따라 다르게 표현되어 css로 infitite구현이 문제가 되었다.
여담이지만 setTimeout으로 속도를 20으로주면 잘 작동하는 듯 싶지만, 이것 또한 안전한 속도라는 개념이지 정확히 작동한다고는 볼 수 없어서, transition을 제거하여 구현하기로 방법을 바꾸었다.
현재 1.0.0버전에는 position을 구현하기 위해 필요한 케이스에서만 margin이 작동하고 그 외엔 reflow가 없는 transform으로 작동하도록 변경했다.