웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 : 6886
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 : 6886
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 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
소프트웨어 홈페이지 Tab Bars 픽토그램 구루 이벤트 모바일 웹 프로젝트 스마트폰 오피스튜터 웹표준 slider 전자칠판 디자인씽킹 아이폰 체크리스트 필립스탁 디자인 사이트 PC 웹타이포그래피 기획 홈페이지 디자인 UX 로고 앱스토어 나눔글꼴에코 에릭 슈미트 컴퓨터 플래시 기획자 Scrolling 윈도우7 기업 이미지 데이터 Prototyping 설득형 디자인 이커머스