화면을 더 풍성하게 해주는 javascript library
웹사이트를 만들다 보면 고마운 javascript library 들이 많은데 그중에서 화면을 좀 더 풍성하고, 예쁘게 해줬던 library 들을 몇가지 소개해드리겠습니다.
- 슬라이더
항상 빠지지 않고 슬라이더를 쓰곤하는데요, 슬라이더만 해도 여러가지 라이브러리들이 있습니다.
그중에서 종종 쓰던걸 공유합니다.
als 슬라이더입니다.
붙이기도 쉽고, 로고 슬라이더 같은데 붙이기 좋습니다.
1–2 fotorama 입니다.
다양하게 customize 할 수 있는 장점이 있습니다. 단, ie8 을 지원 안해서 결국 ie8 용 슬라이더를 붙였던 기억이 납니다.
ex)fit 관련 옵션들
그밖에 Dimensions, Thumbnails, Fullscreen, Video, HTML, Transition, Captions, Hash 등 옵션을 줄 수 있습니다.
1–3 부트스트랩 carousel 입니다.
부트스트랩을 쓸때에 제일 쉽게 가져다 쓸 수 있고, 이슈가 없어서 기본 슬라이더로 쓰기 좋습니다.
2. 풀페이지
풀페이지는 화면 단위로 페이지가 내려가는 효과를 줘서 일반적으로 스크롤을 내리는 느낌보다 더 화려한 느낌을 줍니다.
주의할 점은 화면 사이즈를 따라가기 때문에 너무 많은 컨텐츠를 넣을 경우 화면이 작거나, 창을 작게 둔 경우 컨텐츠가 짤릴 수 있습니다. 그래서 메인페이지에서 강조할 내용을 간결하게 정리해서 넣어서 사용하면 좋습니다.
3. 트윈맥스
트윈맥스는 다양한 애니메이션 효과를 줄 수 있게 도와주는 라이브러리 입니다. CSS3 애니메이션을 지원하면서 크로스 브라우징과 하위 브라우저 대응을 모두 지원합니다.
위의 영상으로 애니메이션 효과를 내고, 사용하는 방법을 확인할 수 있습니다.
4. sticky
스티키는 따라다니는 로고 같이 스크롤을 내리더라도 항상 페이지에 노출시켜주는 라이브러리입니다.
스크롤을 내리더라도, 상단의 sticky 와 download plugin 버튼이 상단에서 계속 노출되어있는걸 확인 할 수 있습니다.
5. 차트
여기에서 다양한 차트 예제를 확인하고, 사용할 수 있습니다.
api 로 값만 내려주면 차트를 만들 수 있어서, 시각적으로 값을 표현해주길 원 할때 유용하게 쓰일 수 있습니다.
자바스크립트 라이브러리를 잘 사용하면, 심심한 페이지에서 벗어나 다양한 효과를 손쉽게 줄 수 있는데, ie 환경이나 지원 버전을 꼭 확인해야 합니다. 그리고 너무 라이브러리를 많이 가져다 쓰면, 속도이슈나 서로 충돌하는 경우도 있기때문에 주의해야합니다.
감사합니다.
