끄적대기

<style type="text/css"> *{padding:0;margin:0;list-style:none;} /*body{height:14000px;}*/ #wrap{overflow:hidden;overflow-y:scroll;} .menu{position:fixed;top:30px;left:30px;z-index:100;} .menu ul li.on a{font-size:20px;color:#000;font-weight:bold;} .container{position:fixed;width:100%;height:100%;left:0;top:0;z-index:1;} .scrollBox{width:100%; height:100%; position:absolute; top:0px; left:0px; opacity:0.3; z-index:1;font-size:100px; color:#fff;text-align:center;} /*.scrollBox:nth-child(1){transform: translateZ(0px)} .scrollBox:nth-child(2){transform: translateZ(-1069px)} .scrollBox:nth-child(3){transform: translateZ(-6000px)} .scrollBox:nth-child(4){transform: translateZ(-9000px)}*/ .scrollBox.on{z-index:10;opacity:0.8;} .bgColor01{background:#ff9900;} .bgColor02{background:#0000ff} .bgColor03{background:#cc0033} .bgColor04{background:#808080} </style> <div id="wrap"> <div class="menu"> <ul> <li ...

<style type="text/css"> *{margin:0;padding:0;list-style:none;} html,body{height:100%;font-size:14px/1.5} .wrap{height:100%;} .menu{position:fixed;top:30px;left:30px;} .menu li.on a{font-weight:bold;color:#fff;} .btmLine{position:fixed;left:0;top:0;width:100%;height:10px;background:#999;} .btmLine span{display:block;width:0%;height:10px;background:#000;} .wrap div:nth-child(1){background:#ffcc00} .wrap div:nth-child(2){background:#0066cc} .wrap div:nth-child(3){background:#cc3366} .wrap div:nth-child(4){background:#66cc66} .scrollBox{font-size:50px;color:#fff;text-align:center;} .scrollBox.on{font-size:100px;color:#000;} </style> <div class="wrap"> <div class="scrollBox on" id="scrollBox01">1</div> <div class="scrollBox" id="scrollBox02">2</div> <div class="scrollBox" id="scrollBox03">3</div> <div class="scrollBox" i...

복잡하게 만들려면 한없이 복잡하고 간단하게 만들려고 하면 간단한 머리 아픈 페럴렉스 레이아웃 중에 간편하게 소스를 제공하거나 분석해서 사용하기 편한 것들을 모아 보았음. 너무 많아서 앞으로 계속 업데이트를 해야 할듯... 재미있거나 화려한 효과를 가진 녀석들은 따로 분류를 해야 겠음. 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/ ...