웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
kimdirector is Creative Web & Mobile UI/UX Planner and Designer
WEBDESK
Web Development
HOME WEBDESK Web Development
16가지의 다양한 JQuery 소스들과 예제
Posted by kimdirector | 2014.11.13 | Hit : 7744
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 : 7744
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
Webdesign Report
Web Plan Report
Inspiration
Web Development
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 Development Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site  ETC. Work  Artwork  Typography Work
Tags
iOS 7 디자인 디자인 기업 클라이언트 사업 디자인씽킹 쇼핑몰 무료 설득 기획서 배경이미지 일러스트 이벤트 퍼스널 브랜드 프로젝트 Pixel Ruler 컨텐츠 PC iOS7 윈도우7 적응형 트렌드 모바일 프리젠테이션 웹디자인 익스플로워 메일폼 프린트 가이드북 디자인정글 Ubuntu Renewal 소프트웨어 레지스트리 벡터 무료 아이디어 반응형
Recommend Tags
디자인 씽킹 퍼스널 브랜드 사용자 경험 서비스 디자인