끄적대기

글

2014의 게시물 표시

페럴렉스 레이아웃 예제

10/07/2014

복잡하게 만들려면 한없이 복잡하고 간단하게 만들려고 하면 간단한 머리 아픈 페럴렉스 레이아웃 중에 간편하게 소스를 제공하거나 분석해서 사용하기 편한 것들을 모아 보았음. 너무 많아서 앞으로 계속 업데이트를 해야 할듯... 재미있거나 화려한 효과를 가진 녀석들은 따로 분류를 해야 겠음. 1. A Simple Parallax Scrolling Technique http://code.tutsplus.com/tutorials/simple-parallax-scrolling-technique--net-27641 2. Create a Parallax Scrolling Website Using Stellar.js http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellarjs--webdesign-7307 3. fullPage.js http://alvarotrigo.com/fullPage/ 4. HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 http://dev.classmethod.jp/etc/html5-x-css3-x-jquery-6-parallax/ 5. How to create a parallax scrolling website https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/ 6. parallax scrolling for the masses http://prinzhorn.github.io/skrollr/ 7. jQuery Scrolldeck Parallax Plugin http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/

자세한 내용 보기

[CSS] 스킵네비게이션

10/07/2014

1. 스킵네비게이션은 <body>다음으로 나오는 것이 가장 적절합니다. 2. 본문으로 가는 기능만 제공하고 다른 건너띄기 컨텐츠에 대한 건너띄기는 제공하지 않도록 합니다. 3. 아래 코드는 일반적으로 사용하는 스킵네비를 약간 수정한 것입니다.(개취) 4. 크롬을 위한 tabindex를 추가 하였습니다. <style type="text/css"> /* Skip Nav */ #skipNav{position:relative;z-index:9999;} #skipNav a{display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; font-size:20px; color:#fff; font-weight:bold; background:#2466a6; white-space:nowrap;text-align:center;} #skipNav a:focus, #skipNav a:active{height:auto; width:100%; padding:5px; margin-bottom:10px; position:absolute; left:0; top:0;} </style> </head> <body> <div id="skipNav"><a href="#contents">Skip to the menu / 본문가기</a></div> <ul> <li><a href="#">매뉴1</a></li> <li><a href="#">매뉴2</a></li> <li><a href="#">매뉴3</a></li> </ul> <div id=&qu

자세한 내용 보기

[반응형] 다음 트로이

10/01/2014

반응형 웹을 만들기 위해 미리보기를 지원해주던 다음의 트로이가 기능을 업데이트 하였습니다. 기존에 없었던 최신 스마트기기들이 추가된 것과 한번에 여러가지 기기를 동시에 볼수 있는 멀티스크린 모드가 생겼습니다! 멀티 스크린 모드기능은 다른 미리보기 사이트들은 아마 없을듯 합니다. 아마도... 주로 크롬 디버깅 모드에서 제공하는 에뮬레이터모드에서 작업하기는 하지만 타 파트와 의사소통할 때 트로이로 진행을 한적이 좀 있는데 다들 의외로 모르는 분들이 많더라구요. 이젠 텝과 새로고침 하면서 보여주는게 아니라 한꺼번에 쫘~보여줄 수 있으니 좀더 편해지겠군요~ http://troy.labs.daum.net/

자세한 내용 보기

9/26/2014

1 http://www.wah.or.kr/RIA/Js/example/tab_menu2/tab-menu_2.html 2 http://hsbyun9898.iptime.org/js/tab-menu3/html/ 3 http://demo.hongkiat.com/css3-calc-function/

자세한 내용 보기

13~15

7/15/2014

1411 http://aoiyuki4u.cafe24.com/study/1411/index.html 1408 http://aoiyuki4u.cafe24.com/study/140701/index.html 1408 http://aoiyuki4u.cafe24.com/study/1408/index.html 1407 http://aoiyuki4u.cafe24.com/study/1407/index.html 1405 http://aoiyuki4u.cafe24.com/study/1406/index.html 1402 http://aoiyuki4u.cafe24.com/study/1402/index.html 1401 http://aoiyuki4u.cafe24.com/study/1401/index.html http://aoiyuki4u.cafe24.com/study/1401/index_animate.html http://aoiyuki4u.cafe24.com/study/1401/index_transform.html 1312 http://aoiyuki4u.cafe24.com/study/1312/index.html http://aoiyuki4u.cafe24.com/study/1312/index1.html 1311 http://aoiyuki4u.cafe24.com/study/1311/index.html

자세한 내용 보기

[CSS] 웹폰트

6/26/2014

/* Web Font */ @font-face{ font-family:CoHead; src:url("../images/font/CoHead.eot"); src:local(※),url("../images/font/CoHead.woff") format('woff') }

자세한 내용 보기

[CSS] input checkbox scale 크기 키우기

6/25/2014

input [ type = checkbox ] { /* Double-sized Checkboxes */ - ms - transform : scale ( 2 ); /* IE */ - moz - transform : scale ( 2 ); /* FF */ - webkit - transform : scale ( 2 ); /* Safari and Chrome */ - o - transform : scale ( 2 ); /* Opera */ padding : 10px ; } 이런게 있네 ㅎㅎㅎ

자세한 내용 보기

[jQuery]클래스가 많을때 클래스 골라가져오기 hasClass

6/01/2014

거의 써볼일 없었던 함수였는데 attr로 클래스를 가져왔을 클래스가 너무 많아서 특정 클래스만 선택해서 체크 하고 싶을때 function menu_gray(){ var navClass = $("#nav-main-menu").hasClass("in") if(navClass == false){ $("#bg_gray").show(); } else { $("#bg_gray").hide(); } } 이렇게 사용하니 더 간단하네...

자세한 내용 보기

jQuery 효과

5/13/2014

1. 좌우매뉴 스와이프 - JQM http://demos.jquerymobile.com/1.4.2/transitions/panel-swipe-open/#demo-page http://labs.rampinteractive.co.uk/touchSwipe/demos/ 2.스크롤 끝 확인 http://inspiredjw.tistory.com/23 $(window).scroll( function () { if ($(window).scrollTop() == $(document).height() - $(window).height()) { alert( 'End of Window' ); } }); . $( "#inside" ).scroll( function () { var elem = $( "#inside" ); if ( elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) { alert( "End of Yellow" ); } }); . . . . . . .

자세한 내용 보기