zeein-yellow 테마는 single page 사이트 이지만 다양한 기능을 넣었으며 차후 사이트 제작시에 유용한 스크립트를 소개해 드립니다.
slick slider
반응형 슬라이더로 테마 상단의 메인 슬라이드에 사용됩니다. with jQuery
bootstrap에서 제공하는 Carousel 을 수정해서 메인 슬라이드로 사용할 수도 있는데 이번 테마에서는 slick slider를 사용할 예정이며 대체 슬라이더로 swiper 슬라이더도 권장해 드립니다.
Scrollspy
화면 이동에 따른 메뉴 하일라이트
single page 방식이지만 현재 보는 메뉴의 위치를 직관적으로 보여주기 위해 Scrollspy 라이브러리를 이용했으며 우리 사이트에 맞도록 일부 수정해서 사용할 예정입니다.
skrollr
parallax scrolling library로 시간차 스크롤링 효과를 편리하게 구현할수 있는 라이브러리 입니다.
해당 사이트에서도 확인할 수 있지만 화면 스크롤에 따른 다양한 효과들 구현이 가능합니다.
스크롤에 따른 배경의 시간차 스크롤, 텍스트의 에니메이션 효과, 페이든 인, 페이드 아웃 효과등 활용법에 따라 사이트 분위기를 역동적으로 바꿀 수 있는 라이브러리 입니다.
Masonry
벽돌형 리스트를 생성 with jQuery
많은 사이트들에서 볼 수 있는 레이아웃으로 마치 벽돌이 쌓이는 형식이여서 라이브러리 이름도 Masonry.
오래전 부터 사용해 온 레이아웃이지만 여전히 포트폴리오 혹은 갤러리 사이트에서 이용하면 사이트 방문자의 시선을 끓어 모으는데 한 몫을 합니다.
zeein-yellow 테마에서는 Masonry 외에 jQuery의 ajax 기능을 이용해서 view more portfolio 버튼 클릭시 자동으로 하단에 추가 포트폴리오를 노출 하는 방식을 구현했습니다. 이러한 기능을 infinite scrolloing 이라 하며 적절히 이용하면 재미있는 페이지 추가 화면을 구현할 수 있습니다.
imagesLoaded
이미리 로딩 관련 라이브러리 with jQuery
Masonry 이용시 이미지가 있는 경우 이미지 로딩후 Masonry 레이아웃을 재정렬 해 주는 라이브러리 입니다.
이미지가 아주 작거나 이미지 없이 텍스트로 이루어진 Masonry은 경우는 괜찮지만 이미지가 큰 경우 Masonry의 배열 요청에 따른 화면 레이아웃 구성이 이미지 로딩 전에 이루어지게 되면 화면이 정상적으로 노출되지 않을 수 있기 때문에 Masonry 요소 안에 이미지가 있는 경우에는 imagesLoaded 라이브러리와 함께 사용하는 것을 권장 합니다.
Magnific Popup
반응형 라이트박스 팝업
이미지, youtube, vimoe 등을 라이트 박스 팝업으로 노출해주는 라이브러리 입니다.
single image, library 형식등 다양한 기능을 제공해 주기 때문에 기능을 익혀 두면 갤러리, 포트폴리오 사이트에 유용하게 사용될 수 있습니다.
Counter-Up
카운트 업 효과
시선을 모을 수 있는 효과 중 하나로 적당한 위치의 화면에 노출되었을때 숫자가 올라가는 효과를 제공합니다. 다만 적당한 위치의 노출 이라는 위치 때문에 waypoints 라이브러리와 함께 사용하여야 합니다.
Waypoints
Counter-Up 효과와 함께이용할 스크립트로 일정 화면의 위치에 노출시 반응
Counter-Up 뿐만이 아니라 화면 스크롤에 따른 다양한 효과를 연출하고자 한다면 꼭 알아두어야 할 스크립트 입니다.
enquire.js
css 미디어 쿼리를 이용한 반응형 스크립트
보통 반응형 웹의 경우 css 에서 모든 처리를 하고 있습니다.
사이즈(Device)에 따라 이미지 크기를 조절 하거나 폰트 조절, 위치 변경, visible 컨트롤 등을 하는데 enquire.js를 이용하면 script 에서도 이러한 기능을 제어할 수 있습니다.
zeein-yellow 테마에서는 enquire.js를 이용해서 PC 환경에서는 parallax 효과를 on 하고 모바일에서는 parallax 효과를 off 하는 방법을 소개 하고 있으며 차후 웹반응형 사이트 제작시에 많은 도움이 될 수 있는 스크립트 입니다.
Modernizr
사용자 브라우저가 제공하는 html, css, javascript 기능을 알려줌
한번쯤 들어봤을 라이브러리로 브라우저의 기능을 검사해주는 강력한 라이브러리 입니다.