본문 바로가기

직접 캐러셀 스크롤(Carousel Scroll) 구현 들어가기이전에는 최대한 CSS를 사용해서 캐러셀 스크롤을 기능을 만들었다면 이번에는 직업 스크롤 기능 자체를 구현해보았다. 이전 구현에는 동작 자체는 문제가 없지만 스크롤링 동작에서 부드럽지 못한 부분이 있었는데 이 부분을 직접 구현해서 해결해보았다. 조금 복잡할지는 모르지만 최대한 간단하게 작성하도록 노력하였다.작성자: http://ospace.tistory.com/ (ospace114@empal.com)기본 HTML 구성먼저, 이전에 구현했던 부분을 가져왔고 필요없는 곳을 제거했다. 먼저 HTML 페이지는 크게 변경되는 부분이 없이 그대로 사용했다. 단순히 목록 태그를 사용해서 10개 아이템을 추가했다. Item 01 Item 02 Item 03 Item 04 Item .. 더보기
간단한 캐러셀 스크롤(Carousel Scroll) 만들기 들어가기캐러셀(Carousel)은 보통 무한으로 스크롤하는 UI 형태이다. 다른 말로는 무한 스크롤(Infinite Scroll)이라고 한다. 스크롤 형태는 수직 또는 수평에서 일정 개수의 아이템이 스크롤되면 끝단에서 처음으로 또는 처음에서 끝단으로 계속적으로 이어지면서 무한으로 스크롤되는 형태를 말한다. 간단한 스크롤 예를 살펴보고 본격적인 캐러셀 UI를 구현하는 방향으로 차근차근 살펴보자.작성자: http://ospace.tistory.com/ (ospace114@empal.com)간단한 스크롤캐러셀을 구현하기 전에 간단한 스크롤 형태 예제를 만들어보자. 여기서 사용할 예제는 수직방향으로 스크롤하는 리스트 형태이다. 단순 아이템 목록으로 전형적인 스크롤 예제이다.이를 HTML로 작성하면 다음과 같다... 더보기

반응형