본문 바로가기

프로그래밍/web

stroll.js - 멋있는 스크롤 효과 in 웹

어디를 가나 스크롤 화면은 밋밋합니다. 긴 평면을 세로로 움직인다는 느낌이라고 할까요? 여러가지 이유 때문에 스크롤 화면은 평면을 유지했지요. 기술적인 어려움도 있고 괜히 스크롤 화면이 움직이면 거슬리기도 하기 때문이죠. 항상 새로운 디자인을 선보이는 애플의 제품에서도 역동적인 스크롤 효과는 본적이 없는듯 합니다.

최근에 웹에서 CSS 3D가 지원되기 시작하면서 역동적이고 멋있는 효과들이 많이 생겨나기 시작했습니다. 그중 대표적인 예가 웹 사이트 acko.net입니다.

acko.net: http://acko.net/


위 사이트가 Acko.net입니다. 이 사이트는 three.js위에 CSS Renderer를 구현하고 이를 통해 만들어진 사이트 입니다. 이 사이트에서는 기울어져 있는 화면이 스크롤 함에 따라 적당하게 변하는 것을 볼 수 있습니다. 이 사이트에서 사용된 CSS Renderer는 gthub를 통해 공개되어 있습니다. 아직 실험적인 기능이라고 설명되어 있습니다. 그리고 webkit의 CSS 3D를 사용하기 때문에 사파리, 크롬에서만 작동됩니다. 어쨋든 멋있는 효과임에는 틀림 없습니다.

CSS Renderer: https://github.com/unconed/CSS3D.js

스크롤은 일반적으로 긴 페이지에서 많이 쓰이지만 긴 리스트에서도 많이 쓰입니다. 특히 아이폰이 터치 스크롤형 리스트로 큰 반향을 일으킴에 따라 모바일에서의 리스트 스크롤은 빼놓을 수 없는 것이 되었습니다. stroll.js는 이런 리스트 스크롤을 위한 스크롤 효과입니다. Stroll.js에 있는 스크롤 효과는 크게 두가지로 나눌 수 있는데, CSS 3D를 사용한 스크롤 효과와 그렇지 않은 스크롤 효과입니다. CSS 3D효과를 사용한 scroll.js는 위의 Acko.net에서 쓰인 기술과는 조금 다르게 순수 CSS 3D transform 효과로 구현되었습니다. CSS 3D를 사용하여 만들어 졌기 때문에 사파리(아이폰, 아이패드 포함), 크롬, 파이어폭스 에서만 작동되는 것을 확인할 수 있습니다. IE에서는 그냥 평면 스크롤처럼 보이므로 유의해 주세요. 

Stroll.js Demo: http://lab.hakim.se/scroll-effects/

Stroll.js Github: https://github.com/hakimel/stroll.js

위 사진은 Stroll의 많은 스크롤 효과중 하나인 Curl 효과입니다. 이런 효과가 16개가 있습니다.


각각의 효과가 개성있고 멋있습니다. Stroll.js를 이용하면 어렵지 않게 멋있는 스크롤 효과를 구현할 수 있습니다. 너무 역동적인 효과를 많이 사용하면 사용자가 굉장히 신경쓰일 수 있으므로 적당히 사용을 하면 멋진 웹 페이지 또는 웹 앱을 만들 수 있을 것입니다.