본문 바로가기

Design/퍼블리싱 지식창고

JS유틸 모음

반응형

CSS로 웹페이지와 홈페이지에 대한 디자인을 만족시킨 후 움직이는 다양한 스크립트 소스로 화려한 동작을 부여하는 단계로 만들어진 웹페이지에 임팩트를 줄 수 있습니다. 또한 JS로 제작할 수 있는 기능적인 부분은 개발자에게 부탁하지 않고도 퍼블리싱 쪽에서 간단하게 처리될 수 있는 부분 또한 있어서 다양한 유틸리티를 숙지하고 있는 것도 중요합니다.(즐겨찾기)

 

■ MOBISCROLL : 별도의 개발 없이 달력을 지원하는 기능

달력의 기능조차도 사실은 개발자가 만들어야 하는 기술 중에 하나입니다. (동작으로 작동해야 하기 때문에 퍼블리싱도 한계가 있을 수 있습니다) 그 작업을 유틸리티로 적용해 사용할 수 있는 기능이며, 달력뿐만이 아닌 다양한 유틸리티를 지원합니다. 무, 유료의 사용에 따라 지원하는 범위도 다르고 유료의 경우에는 퍼블리싱에서 관할이 가능하며 스크립트등을 이용해 디자인 커스텀이 가능합니다.

 

Advanced calendaring and scheduling solutions | Mobiscroll

Date & time pickers, event calendars, schedulers for plain JS, jQuery, jQuery Mobile, Angular, AngularJS, Ionic and React.

mobiscroll.com

 

 

■ Chart.js : 퍼블리싱에서 세팅하는 그래프 기능

chart.js는 퍼블리싱에서 그래프 기능을 세팅할 수 있게 도와주는 유틸리티로 꺾은선, 막대그래프 등 다양한 그래프의 기능을 섭렵합니다. 값을 수치화하는 쪽을 제외한 나머지 부분은 자바스크립트를 통해 제어가 가능합니다.

 

Chart.js | Chart.js

Chart.js Welcome to Chart.js! Why Chart.js Among many charting libraries (opens new window) for JavaScript application developers, Chart.js is currently the most popular one according to GitHub stars (opens new window) (~60,000) and npm downloads (opens ne

www.chartjs.org

 

 

반응형

 

 

■ 갤러리 스크립트 소스

[비디오 영상 넣기]

비디오 영상을 좀 더 자연스럽게 넣고 세팅을 도와주는 소스 코드. 
[prettyPhoto]

이미지를 눌렀을 때 큰 창으로 보여주는데 쓰이는 갤러리 전용 스크립트 입니다. 오래된 스크립트 이미지만 안정감이 있어 보편적으로 사용됩니다.
[SIDEWAYS]

슬라이드쇼와 이미지로만 구성된 홈페이지를 꾸밀 떄 참고 할 수 있는 기반의 소스 입니다.
[Colorbox]

눌렀을 때 실행되는 갤러리 시리즈를 다양하게 샘플로 볼 수 있는 곳 입니다.
[Fancybox]

FancyBox는 멀티미디어 디스플레이에서 프리미엄 사용자 경험의 표준을 설정하는 궁극적인 JavaScript 라이트박스 대안입니다.
[Spacegallery]

마치 영사기의 앨범을 보는것 처럼 슬라이드된 앨범을 차례대로 무빙할 수 있는 갤러리 소스입니다.

 

 

■ 팝업 스크립트 소스

[컨텐츠 클릭 모션주기]

웹페이지에 기재된 컨텐츠에 다양한 움직이는 모션을 줄 수 있는 스크립트를 할 수 있는 유틸입니다. 
[bPopup]

bPopup은 가벼운 jQuery 모달 팝업 플러그인입니다(단지 1.49KB gzip). 팝업을 생성하거나 스타일을 지정하지는 않지만 가운데 맞춤, 모달 오버레이, 이벤트 등과 같은 모든 논리를 제공합니다. 필요에 맞게 사용자 정의할 수 있습니다.
[Magnific]

가볍고 심플한 팝업 소스 사이트 입니다. 
[Toastr]

토스트 팝업을 실행 시킬 수 있는 이벤트 소스 파일로 데모파일을 통해 다양한 상황에 따른 팝업을 확인 할 수 있다.
[OpenPopupTools]

간단하게 자바스크립트를 추가하고 팝업을 사용자에 맞게 수정해서 노출 할 수 있는 팝업 

 

반응형