웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 : 6643
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 : 6643
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
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
픽토그램 프로젝트 iPad 큐레이션커머스 타이포그래피 습관 html5 셀렉트박스 파트너 인맥관리 모바일 트랜드 런처 UX Resource 개발자 실패 생산성 홈페이지 디자인 체크리스트 디자인 다운로드 결제 조직문화 팀 버너스 리 이미지 태블릿 안드로이드 Mac 프로그램 Layoutit 로고디자인 기술 서비스 로고 보편디자인 핸드폰 플래시