웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX





WEBDESK
Web Standard
HOME WEBDESK Web Standard
16가지의 다양한 JQuery 소스들과 예제
Posted by kimdirector | 2014.11.13 | Hit : 7278
jQuery  반응형 웹  Parallax 
목록보기이전보기
소개하고 있는 16가지의 다양한 JQuery 소스들과 예제들입니다.
JQuery에 대해서 공부하고 싶은 디자이너와 퍼블리셔들에게는 좋은 참고자료가 될 것으로 생각합니다. 반응형 웹페이지 예제, Parallax 예제, 다양한 오브젝트 활용 예제 등... 참고할 만한 예제들을 선별해서 공유합니다.

간단한 설명을 붙여 놓았으니 이해하는데 어렵지 않을 갑니다.
이미지를 클릭하면 해당 화면으로 이동합니다.

 
Intention.js
반응형 웹 디자인 적용 사례에 대한 좋은 예를 잘 보여줍니다.
브라우저에 따라 어떻게 보여주고 있는 실제로 확인하면서 어떻게 구현했는지 알 수 있습니다.


Salvattore: A jQuery Masonry alternative with CSS-driven configuration
반응형 웹디자인의 또다른 예입니다. 브라우저 사이즈에 따라 오브젝트들이 어떻게 변형되어 배치되는지 볼 수 있습니다.


Responsive Web CSS
반응형 웹페이지의 또다른 좋은 예입니다. 브라우저 사이즈에 따라서 어떻게 재배치 되는지 잘 보여주고 있습니다.


Parallax.js
아주 유명하죠. 많은 사람들이 알고 있는 소스이기도 하지요.
반응형 사이트에 Parallax를 하나의 페이지에서 구현된 흔하지 않는 예제입니다.
리소스도 다운로드 받아서 어떻게 구현되었는지 확인할 수 있습니다. 강력 추천 예제입니다.


Bootstrap Magic


Hopscotch (툴팁 활용 팁)


favico.js (구글 크롬 탭에 파비콘과 뱃지 구현 예제)


NProgress.js (프로그래스바 활용 예제)


Glide.js (배경이미지 슬라이드와 애니메이션 구현 예제)


iosOverlay.js - iOS-style overlays/notifications for the web
버튼에 따라 반응하는 예제


animo.js: A powerful little tool for managing CSS animations
애니메이션 예제


Medium.js: Taking control of content editable
메뉴바의 슬라이딩과 Onepage 스크롤 예제


FlowType.JS (슬라이드바에 반응하는 예제)


Tridiv: a web-based editor for creating 3D shapes in CSS
CSS를 활용한 3D 구현 예제


Random User Generator: Like Lorem Ipsum, but for people
랜덤으로 바뀌는 사용자의 정보를 버튼에 따라 반응하는 예제


Create CSS3: easy CSS3 generator
CSS를 생성하여 활용할 수 있는 사이트 실제로 내가 만든 CSS를 이용하여 미리보기를 할 수 있음

 
Posted by kimdirector | 2014.11.13 | Hit : 7278
Origin http://www.designyourway.net/blog/resources/new-jquery-goodies-and-online-tools-for-web-designers/
Tags jQuery  반응형 웹  Parallax 
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=106

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile Work IT Information Web Identity Work Everyday Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
유저 웹브라우저 대시보드 디자인 메모 타이포그래피 유틸리티 PSD HTML5 플래시 혁신 홈페이지 App 디자이너 소프트웨어뱅크 원칙 가이드 웹기획 반응형 웹 이커머스 상호작용 아이덴티티 마케팅 IT 로고 독창성 관점 디자이너 애니메이션 서비스 셀렉트박스 Wireframe 솔루션 Pixel Ruler 역량 안드로이드 어플리케이션 토론 홈페이지 피드백 트로이