[반응형웹] 구현 노트
ie HTML5 렌더링
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
반응형웹 무료 템플릿
http://www.egrappler.com/retina-ready-responsive-app-landing-page-website-template-app-landing/
http://www.dzyngiri.com/flat-design-portfolio-template/
http://html5up.net/overflow * Slide
http://html5up.net/big-picture * Slide
http://www.alessioatzeni.com/blog/brushed-template/ * Slide
http://w3layouts.com/runkeeper-mobile-app-responsive-web-template
http://w3layouts.com/pinball-responsive-grid-style-blog-flat-web-template random size grid
http://keyners.pl/freebie/elita-html-css-website
http://www.zerotheme.com/1023/zwisesolutions-free-responsive-html5-theme.html image rolling
http://designscrazed.org/free-responsive-html5-css3-templates/ bootstrap Slide fadeinout
http://html5up.net/prologue left menu - content slide display
http://html5up.net/helios
http://html5up.net/dopetrope
http://w3layouts.com/jetro-flat-corporate-responsive-website-template
http://w3layouts.com/appz-single-page-responsive-website-template
http://w3layouts.com/ios7-app-responsive-landingpage-web-template app style
anchor-animation script
jquery.scrollTo-min.js =============== >$.scrollTo($("#"+showId), 600);
반응형웹 script
easing - 모션효과 | 모션종류 http://jqueryui.com/resources/demos/effect/easing.html
jQuery Masonry - 동적레이아웃 배치
respond.js - ie8 미디어쿼리 지원 패치
slideUp, slideDown, slideToggle - jQueryUI - 슬라이드로 내용 펼침/가림/토글
scrollTop - 현재 scroll의 값을 반환
/*
<div class="lists">
LABEL
<div class="content">내용</div>
</div>
*/
$(".lists").click(function(){
$(this).find('div.content').slideToggle(); // 토글
var top = $(this).find('div.content').offset().top; // 열린객체 offset
$("html,body").animate({ // 포커스이동
"scrollTop": top
},200);
return false;
})
스크롤휠 다양한 효과 : http://johnpolacek.github.io/superscrollorama/
스크롤휠 다양한 효과 : http://www.iutopi.com/
스크롤로 페이지 이동 : http://www.thepetedesign.com/demos/onepage_scroll_demo.html
스크롤시 옆으로 이동 : http://www.pixxelfactory.net/jInvertScroll/
스크롤+링크 연동 : http://www.outyear.co.uk/smint/demo/
기타 http://codegeekz.com/20-jquery-plugins-for-scrolling-effects/
* 참조
$(this).hide('slide',{direction:'right'},1000);
$('#mydiv').animate({ marginLeft: "100%"} , 4000);
jquery on method - 1.7 이상만 사용가능
웹접근성 조치 간, Check point
(update 중)
- <a href="xx"><img xx></a> 이때, img 에 class 를 주고, position:absolute 로 설정할 경우, blur 포커스가 올바르게 잡히지 않는다.
- jQuery focusin 등, focus 및 tab 이동과 관련된 사랑은 a 태그에 한정된다.
