[CSS] 터치 슬라이드 CSS

안녕하세요. J4J입니다.

 

이번 포스팅은 터치 슬라이드 CSS에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

들어가기에 앞서 슬라이드 구현 원리에 대한 간단한 설명은 여기를 참고해주시면 됩니다.

 

 

 

터치 슬라이드 CSS

 

기본적인 슬라이드 구현은 위의 링크를 참고해주시면 되고 이곳에서는 웹 페이지에서 마우스를 클릭하여 슬라이드를 넘기거나 또는 모바일 웹 페이지에서 손으로 화면을 터치하여 슬라이드를 넘기는 CSS를 구현해보려고 합니다.

 

해당 기능을 구현하기 위해 필요한 이벤트는 각각 총 3가지입니다.

 

• 화면을 처음 클릭(터치)할 때
• 화면을 클릭(터치) 한 상태로 움직일 때
• 화면에서 클릭(터치)을(를) 멈출 때

 

 

반응형

 

 

화면을 처음 클릭(터치)할 때 필요한 것은 클릭(터치) 한 위치의 좌표값입니다.

 

좌표값을 구해서 저장해둔 뒤 화면을 클릭(터치)한 상태로 움직일 때 움직여진 좌표값과 비교하여 값의 차이만큼 화면을 이동시켜주면 됩니다.

 

마지막으로 화면에서 클릭(터치)을(를) 멈출 때는 구해진 차이 값과 화면이 넘어가지기 위한 기준 값을 서로 비교하여 상황에 따른 행동을 취해주면 됩니다.

 

 

 

한 가지 더 말씀드리자면 자연스러운 화면 이동을 위해 transition적용을 대부분 하실 겁니다.

 

하지만 하기 구현 방법은 transition이 적용되어 있다면 화면을 클릭(터치)하여 이동시킬 때 transition에 적용된 시간만큼의 딜레이가 생깁니다.

 

이를 해결하기 위해서는 화면을 처음 클릭(터치)할 때 transition 정보를 저장해 두고 속성 값을 제거했다가 화면에서 클릭(터치)을(를) 멈출 때 다시 값을 부여해주면 됩니다.

 

 

 

위의 내용을 기반으로 다음과 같이 구현할 수 있습니다. (모바일로 보시는 분들중 화면이 이상하게 나오시는 분들은 코드펜 우측 하단에 있는 Rerun을 한번 눌러주시길 바랍니다 ㅠㅠ.. 이유를 모르겠네요 ㅠㅠ..)

 

See the Pen 슬라이드 (클릭 이벤트) by 김 성찬 (@ksccmp) on CodePen.

 

 

728x90

 

 

코드에 적어둔 것처럼 마우스 이벤트를 등록해야만 웹 페이지에서 마우스 클릭으로 화면 이동이 가능해집니다.

 

반대로 터치 이벤트를 등록해야 모바일에서도 터치로 화면 이동이 가능해집니다.

 

 

 

 

 

 

 

이상으로 터치 슬라이드 CSS에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.