2024-08-07 :: 013 <input type="radio">의 활용 ③

 

 

   슬라이드를 넘길 때마다 화살표 버튼이 화면 밖에서 안으로 나타나는 효과와 글자가 조금씩 움직이는 효과를 추가해보았다. 기존에 radio를 응용하여 슬라이드를 만드는 것이 익숙해졌다면 추가적인 움직임을 주는 것은 크게 어렵지 않았지만 아직 미숙한 탓인지 조금 헤맸던 부분이 있어 남기고자 한다.

 

   일단 이번에는 버튼이 고정된 위치가 아닌, 각 <li> 항목 아래에 화면과 같이 움직이는 label을 삽입해서 진행했다. 처음에 한 생각은 버튼이 좌우로 벌어져 뷰포인트를 벗어 나 있다가 checked 항목을 주면 안쪽으로 모이는 것을 하고자 했는데 버튼을 묶음으로 해둔 박스에게 position 값을 주다보니 원하는 방향대로 움직이기가 힘들어 생각대로 나와주지 않았다.

   그래서 다시 처음으로 돌아와 각 버튼에 relative값을 주어 원하는 방향으로 움직이기로 했다.

 

 

   처음부터 버튼을 나눴다면 더 빨리 해냈을텐데... 왼쪽과 오른쪽을 나눈 상태에서 opacity값을 준 이유는 아무리 ul화면 밖을 나갔다 한들 다른 페이지에서 넘어오는 버튼까지는 감춰줄 수 없기 때문에 불투명도 값을 주었다. 그러면 다른 페이지로 버튼이 넘어와도 해당 페이지에 checked가 되지 않는 이상 보이지 않게 된다.