글

10월, 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] 스킵네비게이션

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
댓글 쓰기
자세한 내용 보기

[반응형] 다음 트로이

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