jQuery Plugin 100선 - 2013년도 모음집

• 페이지 내용에 대한 스크롤 관련
• 평행 스크롤 관련
• 스크롤 정위치 관련
• 기타 스크롤 작업 보조 관련
• 스크롤 막대 관련
• 레스폰시브 관련
• 효과관련
• 네비게이션 관련
• 레이아웃 관련
• 이미지 갤러리 관련
• 이미지 확대,배치,캡션 관련
• 콘텐츠 슬라이더 관련
• 회전목마 슬라이더 관련
• 애니메이션 관련
• 폼 관련
• 콘텐츠 투어 관련
• 텍스트 관련
• 탭 관련
• 테이블 목록 차트 관련
• 패널박스 관련
• 박스툴팁 관련
• 사운드 관련
• 사용자 최적화, AB 테스트 관련
• 그 외

페이지 내용에 대한 스크롤 관련

fullPage.js
브라우저 가득히 표시하고 수평,수직으로 스크롤하여 콘텐츠를 표시합니다.

One Page Scroll
iPhone5s 제품 페이지처럼 한 페이지에 여러 패널을 수직 방향으로 배치하고 스크롤 효과를 사용하여 보여줍니다.

Panelize
1페이지로 수직으로 구성된 콘텐츠 패널을 한장한장 넘기는 재미있는 효과를 주어 표시합니다

jIntvertScroll
세로로 스크롤하면 내용이 "가로"로 이동합니다.

slideme
페이지로 구성된 수직의 페이지에 평형 슬라이드를 설치할 수 있습니다.

평행 스크롤 관련

Parallax.js
패널을 매트릭스 형태로 배치하여 수평,수직으로 이동 가능한 패럴랙스위한 스크립트

Jarallax
페이드를 사용한 아름다운 애니메이션으로 콘텐츠를 표시하는 스크립트

Parallax.js
스마트폰 등의 자이로스코프에도 대응하는 색다른 패럴랙스를 구현합니다

fullContent
브라우저 가득 콘텐츠를 표시하는 패럴랙스위한 스크립트

jQuery Parallax
배경과 요소를 서로 다른 시간에 스크롤에 따라 움직이는 패럴 랙스위한 스크립트

Scroll Path
스크롤하면 다양한 경로를따라 요소가 연속적으로 표시됩니다. 곡선 및 회전 등의 까다로운 움직임에도 대응

Scrolly
간단하게 시차 스크롤을 구현하는 스크립트입니다.

스크롤 정위치 관련

Headroom.js
헤더를 스크롤에 따라 고정으로 볼뿐만 아니라 가시성에도 유용한 스크립트

Sticky Kit
스크롤 할 때 사이드 바 등의 요소를 붙인 것처럼 항상 표시합니다. 여러 요소를 다른 범위에도 대응.

autofix anything
스크롤에 맞게 페이지의 다양한 요소를 최적 인 포지션 스타일로 표시합니다.

Clingify
헤더를 스크롤 할 때 상단에 고정으로 볼뿐만 아니라 중간에 변경도 가능합니다.

Scrolld.js
페이지 상단에 탐색을 고정 표시하여 애니메이션 스크롤 콘텐츠를 표시합니다.

Oh Snap
다양한 메시지를 지정된 위치에 애니메이션으로 표시합니다.
스크롤 할때 제자리에 나타나고 페이드 효과도 자연스럽게하고 근사하네요

Smint
네비게이션을 상단에 고정하고 각 섹션을 애니메이션으로 스크롤 이동합니다.

End Page Box
페이지의 끝으로 이동하면 패널을 표시합니다.

기타 스크롤 작업 보조 관련

AnimateScroll
스크롤 가속이나 바운드, 조금지나 되돌아 가거나 다음과 같은 30 가지 이상의 애니메이션 효과를 붙이거나 개별적으로 스크롤 후 위치 보정도 가능합니다.

FancyScroll
스마트폰이나 태블릿처럼 페이지의 맨 아래까지 스크롤했을 때에 튀는 것을 비롯해 조금 재미있는 다양한 효과 스크롤을 제공합니다.

windows
수직으로 배치 한 내용을 스크롤했을 때에, 어중간한 스크롤 위치에서 지정된 위치에 스냅(자동 보정)합니다.

pullupScroll
스크롤하여 다음 표시 할 콘텐츠를 끌어 올리도록 표시합니다.

Hook.js
스마트폰이나 태블릿처럼 아래로 당기면 페이지를 새로 고침합니다.

FoldScroll
스크롤하면 패널이 부러진것 같이 위로 빨려 들어갑니다.

Scrollcue
오토 큐 및 텔레 프롬프터처럼 문장이나 가사, 대사, 기사, 원고 등의 텍스트를 순차적으로 스크롤하여 표시합니다.

BackgroundCheck
탐색 등의 제자리 요소의 배색. 배경에 어두운 밝은을 자동으로 판정하고, 텍스트 등을 최적의 색상으로 표시합니다.
캡처는 어두운 배경 위에이므로 서클은 밝은 색상으로되어 있습니다.

Scrollsnap
스크롤 할 때 머리글이나 동영상 등의 요소를 끝가지 볼수있게 자동 보정합니다.

스크롤 막대 관련

custom content scroller
페이지의 내용에 스크롤 막대를 설치할 수 있습니다 중첩과 무한 스크롤에도 대응.

perfect-scrollbar
디자인을 해치지 않는 스크롤 막대를 설치합니다.

레스폰시브 관련

Jresponsive
화면 크기에 맞게 다양한 요소의 크기와 레이아웃을 애니메이션으로 변경합니다.

Rubberband
레스 폰 시브 용 브레이크 포인트를 최대or최소폭,최대or최소높이에서 여러설정이나 각기 다른 액션을 넣을 수 있습니다.

Responsive Elements
페이지의 요소 각각에 레스 폰 시브에 맞게 디자인을 적용 할 수 있습니다.

효과관련

Snap.js
플릭이나 드래그하여 좌우로 콘텐츠를 이동한 다음 다시 표시합니다.

onScreen
요소가 뷰포트에 표시 될 때 다양한 효과를줍니다.

Navi.js
여러 페이지를 로드없이, 애니메이션이 차례로 표시됩니다.

네비게이션 관련

Box Lid Menu
사이드 버튼을 클릭하면 콘텐츠를 기울어 역동적인 애니메이션의 탐색을 표시합니다.

Bounce Menu
튀는 효과가 기분좋다, 스마트폰,태블릿을 위한 네비게이션

Square menu
스퀘어 모양의 탐색 애니메이션을 사용하여 표시합니다.

Sidr
콘텐츠의 측면에서 쏙 들어가는듯한 효과가 있는 네비게이션

bigSlide
사이드 슬라이드 애니메이션으로 네비게이션을 표시하는 간단한 타입

Multi Level Push Menu
다중 계층 네비게이션 사이드를 이용하여 푸시의 상호작용을 추가배치합니다.

FlexNav
다중계층 네비게이션을 데스크탑에서도,스마트폰에서도 최적으로 표시합니다.

kamens
Amazon에서 사용되는 것 같은 조작성이 뛰어난 메가드롭 형의 네비게이션

Navgoco
ul 요소에서 구현한 다중계층 네비게이션을 애니메이션으로 표시합니다.

Responsive Nav
레스 폰 시브 대응의 심플하면서도 고성능의 굉장한 네비게이션

scrollNav
스크롤에 따라 실시간으로 반응하는 디자인도 귀여운 네비게이션

레이아웃 관련

diamonds.js
대각선 격자를 사용한 아름다운 레이아웃을 쉽게 구현할 수 있습니다.

dylay
부들부들 귀여운 애니메이션으로 레이아웃을 변경합니다.

Freewall
Pinterest이나 Wall등 최근에 빈번한 카드를 사용한 레이아웃을 만듭니다.

Shapeshift
Pinterest풍 레이아웃으로 드래그 앤 드롭으로 위치를 변경할 수 있습니다.

waterfall
높이가 다른 패널을 벽돌 모양으로 배치하는 기능. 최소화,실용성 중시의 초경량 스크립트.

Mason.js
패널을 벽돌 모양으로 배치해 다른 스크립트에서 생기는 가장자리도 채웁니다.

Nested
Pinterest 풍 레이아웃을 구축합니다. 애니메이션이 근사하다.

Volley
모든 요소를 ​​외형의 항목에 따라 열 · 행에 배치합니다.

Equal Height Columns 2.0
다른 높이의 패널을 높은 것으로 가지런히 하거나 지정된 높이에 맞춥니다.

이미지 갤러리 관련

least.js
레스 폰 시브 대응의 아주 아름다운 이미지 갤러리를 쉽게 설치할 수 있습니다.

Fotorama
실제 크기로 보기에도 대응한 대박력의 이미지 갤러리.

jq-tiles
타일모양 애니메이션 이미지를 연속적으로 표시하는 이미지 갤러리

Photobox
CSS3애니메이션을 사용한 경량 이미지 갤러리

CollagePlus
이미지를 다양한 크기의 컨테이너에 자동으로 맞춥니다.

이미지 확대,배치,캡션 관련

Superbox
lightbox의 진화형, 레스 폰 시브 대응으로 이미지를 확대합니다.

Image Scale
사이즈가 불명한 이미지를 지정된 영역에 맞추거나 위치를 조정할 수 있습니다.

HCaptions
이미지후버로 다양한 요소를 배치한 반투명 패널을 애니메이션으로 표시합니다.

wallpaper
지정된 요소를 배경 이미지로 최적 배치합니다.

TwentyTwenty
비포,애프터 2페이지의 이미지를 알기 쉽게 비교할 수 있도록 표시합니다.

Unveil
1페이지로 구성된 긴 페이지에 유용합니다. 이미지 로드를 지연시킵니다. 표시 할 때 커스터마이즈도 가능

콘텐츠 슬라이더 관련

Destaque
패럴랙스 효과와 함께 슬라이드 쇼 (데모가 섹시하므로 주의;).

FractionSlider
슬라이드에 여러 요소를 배치하고 각각 다른 시간에 다른 애니메이션을 설정할 수있습니다.

unslider
키보드 조작이나 스와이프 조작에도 대응한 간단한 HTML로 구현된 레스 폰 시브 대응의 슬라이더.

mmenu
스마트폰 어플처럼 좌우로 슬라이드하여 내용을 표시합니다.

Flowtime
패널을 매트릭스 형태로 배치하고 프레젠테이션이 가능합니다.

Bespoke
프리젠테이션 등에 여러 패널을 다양한 애니메이션으로 연속적으로 밉니다.

slideToucher
수평,수직,스와이프 조작에 대응한 터치 스크린용 프레젠테이션.

jKit
슬라이드쇼 라이트박스 탭아코디언 등 다양한 UI관계를 구현할 수 있습니다.

회전목마 슬라이더 관련

Owl Carousel
스와이프 조작에 대응한 레스 폰 시브 대응 슬라이드.

Film Roll
영화 필름롤처럼 패널을 차례차례로 표시하는 슬라이더.

Scrollbox
목록에서 배치한 아이템을 수평,수직 슬라이더에 표시합니다.

애니메이션 관련

animo.js
여러 CSS 애니메이션을 쉽게 조합하여 사용할 수 있습니다.

Lazy Line Painter
일러스트의 패스(path)를 애니메이션으로 그립니다.

폼 관련

Parsley
경량으로 구현이 간단한 양식검증

Validetta
필수 입력의 유무나 이메일 확인등 양식검증을 합니다.

label better
폼에 포커스하면 개체 틀에 배치한 레이블이 애니메이션으로 폴짝 이동합니다.

FancyInput
폼에 입력 할 때 조금 재미있는 애니메이션을 제공합니다.(5 종류)

iCheck
폼 디자인을 미니멀 혹은 플랫하게, 입력 컨트롤등 기능을 강화합니다.

콘텐츠 투어 관련

Chardin.js
페이지에 배치된 요소 각각에 대한 설명을 더하는 오버레이를 만들어냅니다.

Intro.js
페이지의 가이드를 표시합니다.

텍스트 관련

Textillate
텍스트를 CSS3의 다양한 애니메이션으로 표시합니다.

Text Effects
임의의 문자를 차례차례로 표시, 하나의 텍스트를 애니메이션으로 생성합니다.

CircleType
이미지를 사용하지 않고 텍스트를 귀여운 서클 모양으로 배치합니다.

jqVintageTxt
터미널과 같은 디자인으로 텍스트를 애니메이션으로 표시합니다.

rcrumbs
레스 폰 시브 대응으로 breadcrumbs list가 길어서 곤란했던 것을 해결해줍니다.

탭 관련

Tabulous.js
슬라이드와 플립 등 4가지 효과를 제공하는 탭

BasicTabs
애니메이션으로 콘텐츠를 전환하는 심플한 탭

테이블 목록 차트 관련

ParamQuery
엑셀과 같은 고성능의 표를 설치합니다.

ReStable
데스크톱에 구현한 테이블 배치를 스마트폰에서도 괜찮게 표시합니다.

Animated Table Sorter
멋진 애니메이션에서 테이블의 데이터를 정렬합니다.

Sortable
테이블과 목록 탐색 등을 정렬 가능합니다.

Gantt
애니메이션으로 동작하는 갠트 차트(Gantt chart)를 만듭니다.

Pizza Pie Charts
그래프를 피자와 도넛에 비유하여 1조각을 빼내는 같은 애니메이션이 귀엽다.

bullet graph
애니메이션으로 동작하는 뷰렛 타입의 그래프를 설치합니다.

패널박스 관련

Stacky
카드 모양의 여러 패널을 쌓아 애니메이션으로 축소합니다.

Kontext
여러 패널을 iOS풍의 효과로 전환합니다.

CSSMatrix
불연속 레이어 요소를 배치하고, 각각을 분리하여 3D로 빙글빙글 회전시킵니다.

박스툴팁 관련

Pop Easy
텍스트, 이미지 및 양식, 동영상, Google Maps등을 배치 할 수있는 모달 윈도우를 쉽게 구현합니다.

Opentip
다양한 스타일이 준비된 CANVAS기반 툴팁.

PowerTip
다양한 방향으로 툴팁을 애니메이션으로 표시합니다.

사운드 관련

Ion.Sound
버튼을 클릭 할 때 소리를 내는등 이벤트에 사운드를 할당합니다.

사용자 최적화, AB 테스트 관련

Aware.JS
신규 or 리피터, 시간대 등 사용자의 방문 여부에 대해 콘텐츠를 변경하여 표시합니다.

easyAB
Google Analytics를 사용한 AB 테스트를 쉽게 할 수 있습니다.

그 외

jQuery Migrate
jQuery1.9에서 제거 된 기능을 보완하고 과거의 플러그인 에서도 작동하도록합니다. 2013 년의 최신 버전은 1.2.1

version.js
jQuery 여러 버전의 플러그인과 웹 사이트 작동 테스트를 쉽게 할 수 있습니다.

device.js
iPhone, Android 등 스마트폰,태블릿,데스크탑 장치를 판단하고 CSS의 class로 쉽게 사용할 수 있습니다.

Arbitrary anchors
일반적으로 요소의 id를 지정하고 #(해시) 링크하는 페이지에서 앵커를 id지정 이외에 class나 p또는 footer 등에도 전환 할 수 있습니다. 또한 개별적으로 스크롤 속도를 바꿀 수 있습니다.