<section id="js-main" class="main">
<div class="box">
<div class="box__item box__item--base"></div>
<div class="box__item box__item--left"></div>
<div class="box__item box__item--right"></div>
<div class="box__item box__item--top"></div>
<div class="box__item box__item--bottom"></div>
<div class="box__item box__item--shadow"></div>
</div><a href="https://twitter.com/legomushroom" id="js-icon1" class="box-icon box-icon--one">
<div class="box-icon__content"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="95px" height="95px" viewBox="0 0 95 95" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Slice 1</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs>
<radialGradient cx="0%" cy="33.2730263%" fx="0%" fy="33.2730263%" r="106.439233%" id="radialGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#EAEAEA" offset="100%"></stop>
</radialGradient>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
<feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
<feMerge>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<circle id="Oval-1" fill="url(#radialGradient-1)" sketch:type="MSShapeGroup" cx="47.5" cy="47.5" r="47.5"></circle>
<path d="M69.8725406,35.6414587 C72.0753066,34.3293485 73.7669914,32.251258 74.5633804,29.7754323 C72.502127,30.9905661 70.2189042,31.8729937 67.788843,32.3484233 C65.842854,30.2877243 63.0700431,29 60.0018435,29 C54.1096679,29 49.3330456,33.7473017 49.3330456,39.6027419 C49.3330456,40.4337513 49.4273873,41.2430214 49.6092235,42.0190208 C40.7428097,41.5768618 32.8818204,37.3556518 27.6199847,30.9406602 C26.7016742,32.5066478 26.1755667,34.3280253 26.1755667,36.271143 C26.1755667,39.949626 28.0589782,43.1950238 30.921566,45.0965532 C29.1728197,45.0415433 27.5277352,44.5646014 26.0894037,43.7702653 C26.0886429,43.8145001 26.0884527,43.8589239 26.0884527,43.9035368 C26.0884527,49.0408231 29.7658794,53.3263059 34.6463537,54.3004168 C33.751058,54.542574 32.8085914,54.6722538 31.835692,54.6722538 C31.1482905,54.6722538 30.4799096,54.6057125 29.8284569,54.4820819 C31.1861414,58.6944072 35.1260512,61.7600302 39.7944467,61.8456643 C36.1432684,64.6893572 31.5431565,66.3844575 26.5449451,66.3844575 C25.6838863,66.3844575 24.8346203,66.3341735 24,66.2364411 C28.7212726,69.2447857 34.3290915,71 40.3536499,71 C59.9769267,71 70.7075413,54.8435219 70.7075413,40.8322426 C70.7075413,40.3725031 70.69708,39.9152211 70.676728,39.4605857 C72.7609962,37.9656762 74.5696572,36.0981735 76,33.9718784 C74.0867262,34.8151752 72.0307986,35.3853127 69.8725406,35.6414587 Z" id="Shape" fill="#61B6E1" filter="url(#filter-2)" class="svg-icon svg-icon--twitter" sketch:type="MSShapeGroup"></path>
</g>
</svg>
</div>
<div class="box-icon__shadow"></div></a><a href="http://dribbble.com/sol0mka" id="js-icon2" class="box-icon box-icon--two">
<div class="box-icon__content"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="95px" height="95px" viewBox="0 0 95 95" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Slice 1</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs>
<radialGradient cx="0%" cy="33.2730263%" fx="0%" fy="33.2730263%" r="106.439233%" id="radialGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#EAEAEA" offset="100%"></stop>
</radialGradient>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
<feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
<feMerge>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M47.5,95 C73.7335269,95 95,73.7335269 95,47.5 C95,21.2664731 73.7335269,0 47.5,0 C21.2664731,0 0,21.2664731 0,47.5 C0,73.7335269 21.2664731,95 47.5,95 Z" id="Oval-1" fill="url(#radialGradient-1)" sketch:type="MSShapeGroup"></path>
<path d="M44.8467609,17.1580546 C49.1176425,16.7288223 53.4800237,17.1728558 57.5652147,18.5022649 C63.6674352,20.4640853 69.1049375,24.3984905 72.9102473,29.5519693 C76.4518226,34.2896714 78.5603517,40.0742159 78.9317328,45.9771693 C79.331371,51.9272171 77.9696407,57.9916372 75.0241587,63.181446 C72.7285935,67.2988468 69.4453701,70.845732 65.5795092,73.5341525 C61.9222136,76.0315041 57.7428317,77.7834178 53.3710314,78.5221279 C48.6561074,79.3765559 43.7433826,79.0724603 39.1522522,77.7121033 C34.1197704,76.2171908 29.4815446,73.4117069 25.8202123,69.6481873 C21.9772263,65.7245465 19.1972511,60.7607911 17.9001087,55.42028 C16.6339148,50.309859 16.7065763,44.8778502 18.0992551,39.801068 C19.0452002,36.329534 20.6114592,33.0302311 22.6863487,30.0928828 C24.9334729,26.9483188 27.75247,24.2101127 30.9764877,22.0774067 C35.1195389,19.3607295 39.9138523,17.6397636 44.8467609,17.1580546 L44.8467609,17.1580546 Z M43,24.5748077 C46.1488511,28.7740211 48.8714619,33.2982467 51.2450882,38 C55.6913087,36.0226143 59.8751249,33.2286012 63,29.3871745 C60.5291375,27.3469713 57.6546787,25.8229641 54.6043956,24.9257664 C50.8454878,23.8209977 46.8161838,23.7062875 43,24.5748077 L43,24.5748077 Z M28.3512321,34.4329502 C26.8316002,36.7424904 25.5878868,39.2778161 25,41.9790805 C32.4137518,42.1463793 39.8677129,41.3153257 47,39.3022989 C45.8963257,37.1532567 44.6318145,35.0871839 43.3354131,33.0455939 C41.7395223,30.6027586 40.0382555,28.2197701 38.1303964,26 C34.1815718,27.8878927 30.7831978,30.8475862 28.3512321,34.4329502 L28.3512321,34.4329502 Z M54,42.6801248 C54.56702,43.9416813 55.1133459,45.2114297 55.6527737,46.485274 C56.4074209,46.4006241 57.1537903,46.2490735 57.9111966,46.1753462 C62.9412576,45.5500293 68.0568545,45.9514336 73,47 C72.7737438,41.9332943 70.8795382,36.9812756 67.7133314,33 C63.9732065,37.2229374 59.1749201,40.4314414 54,42.6801248 L54,42.6801248 Z M24.0055353,48.1159892 C23.8776628,53.8716896 25.9707341,59.6354624 29.719418,64 C31.9713204,60.566492 34.7764398,57.5070103 37.934218,54.8861351 C41.5038804,51.9477411 45.6132995,49.6618751 50,48.1980598 C49.5383129,47.1297975 49.0995082,46.0507718 48.5987864,45 C40.6639599,47.4728792 32.2916748,48.3097295 24.0055353,48.1159892 L24.0055353,48.1159892 Z M57,51.3486362 C58.9050709,56.7897539 60.4485955,62.3549093 61.6055437,68 C66.9898025,64.3408897 70.8291462,58.5262808 72,52.1576372 C67.0954853,51.0537022 61.9962918,50.644378 57,51.3486362 L57,51.3486362 Z M34,68.0489893 C37.5471764,70.7788254 41.825368,72.5080008 46.2357356,72.8931924 C49.8759749,73.256054 53.5769073,72.6810579 57,71.3705691 C55.8535742,65.1349311 54.2634141,58.9858217 52.2200786,53 C44.6563654,55.5344491 38.1810825,61.0960018 34,68.0489893 L34,68.0489893 Z" id="Shape" class="svg-icon svg-icon--dribbble" filter="url(#filter-2)" sketch:type="MSShapeGroup"></path>
</g>
</svg>
</div>
<div class="box-icon__shadow"></div></a><a href="https://github.com/legomushroom" id="js-icon3" class="box-icon box-icon--three">
<div class="box-icon__content"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="95px" height="95px" viewBox="0 0 95 95" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Slice 1</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs>
<radialGradient cx="0%" cy="33.2730263%" fx="0%" fy="33.2730263%" r="106.439233%" id="radialGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#EAEAEA" offset="100%"></stop>
</radialGradient>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
<feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
<feMerge>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M47.5,95 C73.7335269,95 95,73.7335269 95,47.5 C95,21.2664731 73.7335269,0 47.5,0 C21.2664731,0 0,21.2664731 0,47.5 C0,73.7335269 21.2664731,95 47.5,95 Z" id="Oval-1" fill="url(#radialGradient-1)" sketch:type="MSShapeGroup"></path>
<path d="M38.2941732,18.5366507 C44.4759343,16.5113904 51.2923641,16.4878066 57.4888507,18.4673732 C62.3674059,20.0150612 66.8454277,22.8023736 70.3986887,26.4917669 C74.381934,30.607143 77.1900852,35.8574902 78.353399,41.4719126 C79.6654402,47.7216241 78.9718696,54.3825784 76.3536773,60.2107292 C72.8799339,68.0715102 65.9560081,74.3079558 57.7833606,76.9419733 C57.1928684,77.0731583 56.4845722,77.0009328 56.0604781,76.5277825 C55.7365173,76.1769732 55.6628898,75.6831871 55.6805604,75.2247766 C55.6997036,73.2098343 55.7026487,71.1963659 55.7129565,69.1828975 C55.6908683,67.8047182 55.8101448,66.4103251 55.5421408,65.0483596 C55.2873898,63.6539665 54.6851172,62.2787351 53.614574,61.3221166 C56.7967527,60.9683593 60.0687568,60.237261 62.7046197,58.3254978 C64.7676609,56.8559312 66.2166493,54.6331565 66.9440885,52.2231852 C67.6140984,50.0431561 67.8158376,47.740786 67.7495729,45.4678956 C67.6406042,42.6702653 66.4890708,39.9463345 64.5835923,37.9004384 C65.48921,35.5243688 65.3404825,32.8476056 64.5305805,30.4671141 C64.4348648,30.2268539 64.3877433,29.9541661 64.2257629,29.7492816 C63.2700785,29.5915649 62.3011412,29.8067672 61.3852157,30.0706112 C59.3663508,30.6941083 57.5138841,31.7539061 55.7630232,32.918357 C50.704817,31.5416517 45.2873089,31.5534436 40.2291027,32.9154091 C38.6092987,31.8246575 36.8923064,30.8518251 35.0442573,30.2091661 C33.9796043,29.8583568 32.8486866,29.576825 31.7236591,29.7522296 C30.7076002,32.3213917 30.4145629,35.2796867 31.4173689,37.8989644 C29.4765492,39.9831842 28.317653,42.7675486 28.2410805,45.6182425 C28.1821785,48.5839074 28.5503158,51.6439077 29.8976982,54.3221449 C30.8636904,56.2589659 32.4083944,57.8891972 34.2755867,58.9770008 C36.7214908,60.4200356 39.5532027,61.0273188 42.3466283,61.3442264 C41.181842,62.3996022 40.5957674,63.9413942 40.3763576,65.4699204 C38.8522693,66.1332152 37.1308594,66.4825505 35.483077,66.1332152 C34.1975416,65.8678973 33.0445356,65.1191111 32.2051827,64.1197468 C31.5940748,63.4372901 31.2259375,62.5794288 30.610412,61.902868 C29.591408,60.7280992 28.1556726,59.8245442 26.5726823,59.7464228 C26.1294451,59.7567407 25.6243607,59.7817985 25.2768391,60.0942841 C25.1207489,60.2785327 25.2267725,60.5217408 25.3504666,60.6883015 C25.8599686,61.3781281 26.6949039,61.6891397 27.311902,62.2580993 C28.1865962,63.0466832 28.8595511,64.0357295 29.3837786,65.0852093 C29.7298276,65.7588221 29.937457,66.5031863 30.3865845,67.1222615 C31.3349061,68.5225507 32.8707748,69.4541114 34.5008867,69.8373485 C36.3990025,70.2972329 38.3839987,70.1247762 40.2776968,69.7297473 C40.2983125,71.6120307 40.3056753,73.4943141 40.3218733,75.3765975 C40.342489,75.8895455 40.1407498,76.4349212 39.7034027,76.728245 C39.2100987,77.0554704 38.559232,77.0598924 38.0099712,76.8815398 C34.0738475,75.5505281 30.4072002,73.4265106 27.3030667,70.6598341 C23.7336077,67.4922327 20.9151487,63.4815098 19.15398,59.0433302 C16.9407387,53.5026073 16.4238739,47.3074333 17.6460897,41.4719126 C18.6915995,36.4411897 21.0506232,31.6978945 24.4006724,27.8095127 C28.0732099,23.5275759 32.9326219,20.2803791 38.2941732,18.5366507 L38.2941732,18.5366507 Z" id="Shape" class="svg-icon svg-icon--github" filter="url(#filter-2)" sketch:type="MSShapeGroup"></path>
</g>
</svg>
</div>
<div class="box-icon__shadow"></div></a>
<div id="js-cover-place" class="cover-place">
<div id="js-cover" class="cover">
<div class="cover__item cover__item--base">
<div id="js-base-shadow" class="cover__item__shadow"></div>
</div>
<div class="cover__item cover__item--left"></div>
<div class="cover__item cover__item--bottom">
<div id="js-bottom-shadow" class="cover__item__shadow"></div>
</div>
</div>
</div>
<div id="js-left-peel" class="peel-item peel-item--left">
<div class="peel-item__bg">
<div id="js-left-inner" class="peel-item__bg__inner"></div>
</div>
<div class="peel-item__white"></div>
<div class="peel-item__gradient"></div>
</div>
<div id="js-right-peel" class="peel-item peel-item--right">
<div class="peel-item__bg">
<div id="js-right-inner" class="peel-item__bg__inner"></div>
</div>
<div class="peel-item__white"></div>
<div class="peel-item__gradient"></div>
</div>
<div id="js-line1" class="line-item line-item--hor"></div>
<div id="js-line2" class="line-item line-item--vert">
<div class="bow">
<div class="bow__content"></div>
<div class="threads">
<div class="thread-left">
<div class="thread-left__content"></div>
</div>
<div class="thread-right">
<div class="thread-right__content"></div>
</div>
</div><a href="http://blog.legomushroom.com" id="js-tag" class="tag">
<div class="tag__content"></div>
<div class="tag__text">blog.legomushroom.com</div></a>
</div>
</div>
<div id="js-scroll-suggest" class="scroll-suggest">
<div class="scroll-suggest__content"></div>
</div>
<div id="js-scroll-suggest-mask" class="scroll-suggest scroll-suggest--mask">
<div class="scroll-suggest__content"></div>
</div>
</section>
/* blog post: http://blog.legomushroom.com/2014/04/paper-peel-effect/ */
* {
-moz-box-sizing: border-box;
box-sizing: border-box
}
body,html {
min-width: 100%;
margin: 0;
padding: 0;
overflow: hidden
}
body {
background: #efefef;
width: 100%;
height: 100%;
font-family: monospace
}
body,section {
min-height: 100%
}
html {
height: 100%;
min-height: 100%
}
.curtain {
background: #fff;
position: absolute;
z-index: 50;
width: 100%;
height: 100%;
top: 0;
left: 0
}
.scroll-suggest {
width: 25px;
position: absolute;
z-index: 40;
bottom: 8px;
left: 50%;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/scroll-suggest_1.svg) no-repeat center center;
background-size: 100% 100%;
opacity: .25;
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px)
}
.scroll-suggest__content {
padding-bottom: 184.6153846%
}
.scroll-suggest--mask {
z-index: 20;
opacity: 1;
width: 64px;
height: 64px;
bottom: 0;
margin-left: -21px;
background: #00aeff
}
.thread-left {
width: 64px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/thread1.svg) no-repeat center center;
background-size: 100% 100%
}
.thread-left__content {
padding-bottom: 100%
}
.thread-right {
width: 16px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/thread2.svg) no-repeat center center;
background-size: 100% 100%
}
.thread-right__content {
padding-bottom: 316.6666667%
}
.tag {
width: 200px;
position: absolute;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/tag.svg) no-repeat center center;
background-size: 100% 100%;
display: block
}
.ie .tag {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/tag-ie.svg)
}
.tag__content {
padding-bottom: 180%
}
.tag__text {
position: absolute;
bottom: 32px;
width: 100%;
text-align: center;
font-size: 10px
}
.bow {
width: 480px;
position: absolute;
left: -200px;
top: 156px;
opacity: .98;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/bow.svg) no-repeat center center;
background-size: auto 100%
}
.bow__content {
padding-bottom: 58.7360595%
}
.bow .tag {
top: 168px;
left: 152px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
-webkit-transform-origin: center 64px;
-ms-transform-origin: center 64px;
transform-origin: center 64px;
z-index: 1
}
.bow .thread-left,.bow .thread-right {
position: absolute;
top: 160px;
left: 193px;
z-index: 2
}
.bow .thread-right {
z-index: 0;
left: 261px;
top: 156px
}
.line-item {
background: rgba(252,70,173,.97);
position: absolute;
z-index: 30;
box-shadow: 2px 2px 3px rgba(0,0,0,.15)
}
.line-item:after,.line-item:before {
content: '';
box-shadow: inherit;
background: inherit;
position: absolute;
width: inherit;
height: inherit
}
.line-item--vert {
left: 240px;
top: 0;
width: 75px;
height: 100%;
-webkit-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top
}
.line-item--vert:before {
top: -100%;
box-shadow: 2px -3px 3px rgba(0,0,0,.15)
}
.line-item--vert:after {
top: 100%
}
.line-item--hor {
width: 100%;
left: 0;
height: 75px;
top: 240px
}
.line-item--hor:before {
left: -100%;
box-shadow: 2px -3px 3px rgba(0,0,0,.15)
}
.line-item--hor:after {
left: 100%
}
.svg-icon--twitter {
fill: #00aeff
}
.svg-icon--dribbble {
fill: #fc46ad
}
.svg-icon--github {
fill: #4d4d4d
}
.box-icon {
width: 7.5%;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -3.75%
}
.box-icon--one {
margin-left: -18.75%
}
.box-icon--two {
margin-left: -3.75%
}
.box-icon--three {
margin-left: 11.25%
}
.box-icon__content {
padding-bottom: 100%;
z-index: 1;
position: relative;
border-radius: 50%;
box-shadow: 2px 2px 2px rgba(0,0,0,.3)
}
.box-icon__content:hover {
cursor: pointer
}
.box-icon__content:hover .svg-icon--twitter {
fill: #00a7f5
}
.box-icon__content:hover .svg-icon--dribbble {
fill: #fc2da2
}
.box-icon__content:hover .svg-icon--github {
fill: #404040
}
.box-icon__shadow {
content: '';
position: absolute;
z-index: 0;
top: 32%;
left: 35%;
height: 100%;
width: 200%;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/icon-gradient.svg) no-repeat left top;
background-size: 100% 100%;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg)
}
.box-icon svg {
width: 100%;
height: 100%;
position: absolute;
display: block
}
.box {
-webkit-transform-style: preserve3d;
-ms-transform-style: preserve3d;
transform-style: preserve3d;
position: absolute;
top: 12px;
left: 12px;
bottom: 12px;
right: 12px;
-webkit-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px
}
.box__item {
position: absolute
}
.box__item:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/shadow-mask.png) no-repeat center center;
opacity: .12;
background-size: 100% 100%
}
.box__item--shadow {
height: 100%;
width: 100%;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/box-shadow.png) no-repeat left center;
background-size: auto 100%;
box-shadow: none
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution:144dpi) {
.box__item--shadow {
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/box-shadow@2x.png) no-repeat left center;
background-size: auto 100%
}
}
.box__item--shadow:after {
display: none
}
.box__item--base {
left: 12.95%;
right: 12.95%;
top: 12.95%;
bottom: 12.95%;
background: #e3e3e3;
background: -webkit-gradient(linear,left top,right top,color-stop(0%,#dfdfdf),color-stop(100%,#ededed));
background: -webkit-linear-gradient(left,#dfdfdf 0,#ededed 100%);
background: linear-gradient(to right,#dfdfdf 0,#ededed 100%)
}
.box__item--base:after {
display: none
}
.box__item--left {
top: 0;
left: 0;
background: #fff;
background: -webkit-gradient(linear,left top,right top,color-stop(0%,#fff),color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(left,#fff 0,#e1e1e1 100%);
background: linear-gradient(to right,#fff 0,#e1e1e1 100%)
}
.box__item--right {
top: 0;
right: 0;
background-image: -webkit-linear-gradient(0deg,#fff 0,#e8e8e8 100%);
background-image: -webkit-linear-gradient(180deg,#fff 0,#e8e8e8 100%);
background-image: linear-gradient(-90deg,#fff 0,#e8e8e8 100%)
}
.box__item--right:after {
opacity: .02
}
.box__item--left,.box__item--right {
height: 100%;
width: 12.95%
}
.box__item--top {
-webkit-transform: rotateX(-75.5deg);
-ms-transform: rotateX(-75.5deg);
transform: rotateX(-75.5deg);
-webkit-transform-origin: 50% top;
-ms-transform-origin: 50% top;
transform-origin: 50% top;
top: 0;
left: 0;
background: #fff;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top,#fff 0,#e1e1e1 100%);
background: linear-gradient(to bottom,#fff 0,#e1e1e1 100%)
}
.box__item--top:after {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
opacity: .01
}
.box__item--bottom {
-webkit-transform: rotateX(75.5deg);
-ms-transform: rotateX(75.5deg);
transform: rotateX(75.5deg);
-webkit-transform-origin: 50% bottom;
-ms-transform-origin: 50% bottom;
transform-origin: 50% bottom;
bottom: 0;
left: 0;
background-image: -webkit-linear-gradient(90deg,#fff 0,#e1e1e1 100%);
background-image: linear-gradient(0deg,#fff 0,#e1e1e1 100%)
}
.box__item--bottom:after {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
opacity: .01
}
.box__item--bottom,.box__item--top {
height: 360px;
width: 100%
}
.text {
fill: #fff;
font-size: 22px;
white-space: nowrap;
font-family: 'Open Sans';
text-transform: uppercase
}
.text--label {
font-size: 13px
}
.svg-container {
padding-bottom: 70.3125%;
position: relative
}
.svg-container__content {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden
}
.svg-container__content svg {
width: 100%;
height: 100%
}
.cover-place {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
-webkit-perspective: 600000px;
-ms-perspective: 600000px;
perspective: 600000px
}
.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateY(0deg) rotateX(0deg) translateY(0px) translateZ(0px);
-ms-transform: rotateY(0deg) rotateX(0deg) translateY(0px) translateZ(0px);
transform: rotateY(0deg) rotateX(0deg) translateY(0px) translateZ(0px);
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d
}
.cover__item {
position: absolute
}
.cover__item__shadow {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,.5);
opacity: 0
}
.cover__item:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #33beff url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/pattern.svg) repeat left center;
background: #f5e314 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/pattern.svg) repeat left center;
background: #08d6bb url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/pattern.svg) repeat left center;
opacity: .75
}
.cover__item--base {
background: #fff;
background: -webkit-gradient(linear,left top,right top,color-stop(0%,#fff),color-stop(100%,#e8e8e8));
background: -webkit-linear-gradient(left,#fff 0,#e8e8e8 100%);
background: linear-gradient(to right,#fff 0,#e8e8e8 100%);
width: 100%;
height: 100%
}
.cover__item--left {
left: 0;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
background-image: -webkit-linear-gradient(0deg,#fff 0,#e8e8e8 100%);
background-image: -webkit-linear-gradient(180deg,#fff 0,#e8e8e8 100%);
background-image: linear-gradient(-90deg,#fff 0,#e8e8e8 100%)
}
.cover__item--left:after {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/pattern2.svg)
}
.cover__item--left {
height: 100%;
width: 200px
}
.cover__item--bottom {
bottom: 0;
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
background: #fff;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top,#fff 0,#e1e1e1 100%);
background: linear-gradient(to bottom,#fff 0,#e1e1e1 100%)
}
.cover__item--bottom:after {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg)
}
.cover__item--bottom .cover__item__shadow:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .35;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.65)));
background: -webkit-linear-gradient(top,rgba(0,0,0,0)0,rgba(0,0,0,.65)100%);
background: linear-gradient(to bottom,rgba(0,0,0,0)0,rgba(0,0,0,.65)100%)
}
.cover__item--bottom {
width: 100%;
height: 200px
}
body {
background-position: 0 0
}
.peel-item {
height: 100%;
width: 50%;
top: 0;
position: absolute;
z-index: 20
}
.peel-item__gradient,.peel-item__white {
background: #fff;
height: 100%;
position: absolute;
top: 0
}
.peel-item__bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden
}
.peel-item__bg__inner {
background: #00aeff url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/dots-pattern_1.svg) left bottom;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0
}
.peel-item__gradient {
max-width: 80px
}
.peel-item--left {
left: 0
}
.peel-item--left .peel-item__gradient,.peel-item--left .peel-item__white {
right: -1px
}
.peel-item--left .peel-item__bg__inner {
background-position: right bottom
}
.peel-item--left .peel-item__white {
box-shadow: 2px 2px 8px rgba(0,0,0,.075),-8px -8px 24px rgba(0,0,0,.125)
}
.peel-item--left .peel-item__gradient {
background: #fff;
background: -webkit-gradient(linear,left top,right top,color-stop(2%,#fff),color-stop(71%,#e6e6e6),color-stop(100%,#eee));
background: -webkit-linear-gradient(left,#fff 2%,#e6e6e6 71%,#eee 100%);
background: linear-gradient(to right,#fff 2%,#e6e6e6 71%,#eee 100%)
}
.ie9 .peel-item--left .peel-item__gradient {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/gradient-ie-fix-left.svg) no-repeat left top;
background-size: 100% 100%
}
.peel-item--right {
left: 50%
}
.peel-item--right .peel-item__gradient,.peel-item--right .peel-item__white {
left: -1px
}
.peel-item--right .peel-item__white {
box-shadow: -2px 2px 8px rgba(0,0,0,.075),8px -8px 24px rgba(0,0,0,.125)
}
.peel-item--right .peel-item__gradient {
background: #eee;
background: -webkit-gradient(linear,left top,right top,color-stop(0%,#eee),color-stop(29%,#e6e6e6),color-stop(98%,#fff));
background: -webkit-linear-gradient(left,#eee 0,#e6e6e6 29%,#fff 98%);
background: linear-gradient(to right,#eee 0,#e6e6e6 29%,#fff 98%)
}
.ie9 .peel-item--right .peel-item__gradient {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/gradient-ie-fix.svg) no-repeat left top;
background-size: 100% 100%
}
.header-l {
background: c-red;
height: 80px;
padding: 12px 16px;
position: fixed;
top: 0;
left: 0;
width: 100%
}
.header-l .main-logo-b {
color: c-bg;
margin-top: -4px
}
.header-l .round-icon-b {
float: right
}
.header-l .round-icon-b+.round-icon-b {
margin-right: 16px
}
.side-icons-l {
display: inline-block
}
.side-icons-l .timer-b {
margin-bottom: 32px
}
.side-icons-l .icon {
margin: 0 auto
}
.side-icons-l .icon+.icon {
margin-top: 16px
}
.recipes-l .recipe-b+.recipe-b:after {
content: '';
width: 100%;
height: 16px;
top: -8px;
position: absolute;
background-image: -webkit-repeating-radial-gradient(center center,c-red,c-red 1px,transparent 1px,transparent 100%);
background-image: repeating-radial-gradient(center center,c-red,c-red 1px,transparent 1px,transparent 100%);
background-size: 8px 8px
}
.icon {
width: 32px;
height: 32px;
fill: c-red;
display: block;
position: relative
}
.icon:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.icon svg {
float: left;
width: 100%;
height: 100%
}
.icon.is-hoverable:hover {
fill: c-red-hover;
cursor: pointer
}
a {
color: #333;
}
(function() {
var Main;
Main = (function() {
function Main() {
this.vars();
this.fixIETag();
this.initScroll();
this.describeSequence();
this.suggestScroll();
}
Main.prototype.vars = function() {
this.frameDur = 1500;
this.$cover = $('#js-cover');
this.$coverPlace = $('#js-cover-place');
this.$icon1 = $('#js-icon1 .box-icon__content');
this.$icon2 = $('#js-icon2 .box-icon__content');
this.$icon3 = $('#js-icon3 .box-icon__content');
this.$baseShadow = $('#js-base-shadow');
this.$bottomShadow = $('#js-bottom-shadow');
this.$leftPeel = $('#js-left-peel');
this.$leftPeelInner = $('#js-left-inner');
this.$leftPeelChildren = this.$leftPeel.children();
this.$rightPeel = $('#js-right-peel');
this.$rightPeelInner = $('#js-right-inner');
this.$rightPeelChildren = this.$rightPeel.children();
this.$line1 = $('#js-line1');
this.$line2 = $('#js-line2');
this.$tag = $('#js-tag');
this.$scrollSuggest = $('#js-scroll-suggest');
this.$scrollSuggestMask = $('#js-scroll-suggest-mask');
this.$curtain = $('#js-curtain');
return this.$w = $(window);
};
Main.prototype.hideCurtain = function() {
return this.$curtain.fadeOut(1000);
};
Main.prototype.suggestScroll = function() {
return this.scrollSuggestTween = TweenMax.to(this.$scrollSuggest, .5, {
y: 10,
repeat: -1,
opacity: 1,
yoyo: true,
ease: Power2.easeIn
});
};
Main.prototype.stopScollSuggest = function() {
this.scrollSuggestTween.pause();
this.$scrollSuggest.hide();
return this.$scrollSuggestMask.hide();
};
Main.prototype.playScollSuggest = function() {
this.$scrollSuggest.show();
this.$scrollSuggestMask.show();
return this.scrollSuggestTween.play();
};
Main.prototype.describeSequence = function() {
var dur, start;
start = 1;
dur = this.frameDur;
this.line2Tween = TweenMax.to(this.$line2, 1, {
left: -300,
rotation: 15,
onStart: (function(_this) {
return function() {
return _this.stopScollSuggest();
};
})(this),
onReverseComplete: (function(_this) {
return function() {
return _this.playScollSuggest();
};
})(this)
});
this.controller.addTween(start, this.line2Tween, dur);
this.tagTween = TweenMax.to(this.$tag, 1, {
rotation: 35
});
this.controller.addTween(start, this.tagTween, dur);
start += dur / 2.5;
dur = this.frameDur;
this.line1Tween = TweenMax.to(this.$line1, 1, {
top: -300,
rotation: 15
});
this.controller.addTween(start, this.line1Tween, dur);
start += dur - dur / 3;
dur = this.frameDur - this.frameDur / 4;
this.leftPeelTween = TweenMax.to(this.$leftPeel, 1, {
left: '-50%'
});
this.controller.addTween(start, this.leftPeelTween, dur);
this.leftPeelChildrenTween = TweenMax.to(this.$leftPeelChildren, 1, {
width: '100%'
});
this.controller.addTween(start, this.leftPeelChildrenTween, dur);
this.leftPeelTweenInner = TweenMax.to(this.$leftPeelInner, 1, {
left: '100%',
onStart: (function(_this) {
return function() {
if (!_this.isChromeFix()) {
return;
}
return _this.$leftPeelInner.css({
'-webkit-transform': 'translateX(1px)'
});
};
})(this),
onReverseComplete: (function(_this) {
return function() {
if (!_this.isChromeFix()) {
return;
}
return _this.$leftPeelInner.css({
'-webkit-transform': 'translateX(0px)'
});
};
})(this)
});
this.controller.addTween(start, this.leftPeelTweenInner, dur);
this.rightPeelTween = TweenMax.to(this.$rightPeel, 1, {
left: '100%'
});
this.controller.addTween(start, this.rightPeelTween, dur);
this.rightPeelChildrenTween = TweenMax.to(this.$rightPeelChildren, 1, {
width: '100%'
});
this.controller.addTween(start, this.rightPeelChildrenTween, dur);
this.rightPeelTweenInner = TweenMax.to(this.$rightPeelInner, 1, {
left: '-100%'
});
this.controller.addTween(start, this.rightPeelTweenInner, dur);
start += dur;
dur = this.frameDur;
this.coverBaseShadowTween = TweenMax.to(this.$baseShadow, 1, {
opacity: 1
});
this.coverBottomShadowTween = TweenMax.to(this.$bottomShadow, 1, {
opacity: .5
});
this.coverTween = TweenMax.to(this.$cover, 1, {
rotationY: 120,
rotationX: 65,
x: this.$w.width() / 6.4,
y: -400,
onUpdate: (function(_this) {
return function() {
var progress;
progress = _this.coverTween.progress();
if (progress > .225) {
_this.$icon1.css({
'z-index': 11
});
} else {
_this.$icon1.css({
'z-index': 1
});
}
if (progress > .265) {
_this.$icon2.css({
'z-index': 11
});
} else {
_this.$icon2.css({
'z-index': 1
});
}
if (progress > .307) {
return _this.$icon3.css({
'z-index': 11
});
} else {
return _this.$icon3.css({
'z-index': 1
});
}
};
})(this)
});
this.controller.addTween(start, this.coverTween, dur);
this.controller.addTween(start, this.coverBaseShadowTween, dur / 2);
this.controller.addTween(start, this.coverBottomShadowTween, dur / 2);
return this.maxScroll = -(start + dur / 2);
};
Main.prototype.fixIETag = function() {
if (!this.isIE()) {
return;
}
return $(document.body).addClass('ie');
};
Main.prototype.initScroll = function() {
var it;
this.scroller = new IScroll('#js-main', {
probeType: 3,
mouseWheel: true,
deceleration: 0.001
});
document.addEventListener('touchmove', (function(e) {
return e.preventDefault();
}), false);
this.controller = $.superscrollorama({
triggerAtCenter: false,
playoutAnimations: true
});
it = this;
this.scroller.on('scroll', function() {
return it.updateScrollPos(this, it);
});
return this.scroller.on('scrollEnd', function() {
return it.updateScrollPos(this, it);
});
};
Main.prototype.updateScrollPos = function(that, it) {
(that.y < it.maxScroll) && (that.y = it.maxScroll);
return it.controller.setScrollContainerOffset(0, -(that.y >> 0)).triggerCheckAnim(true);
};
Main.prototype.bind = function(func, context) {
var bindArgs, wrapper;
wrapper = function() {
var args, unshiftArgs;
args = Array.prototype.slice.call(arguments);
unshiftArgs = bindArgs.concat(args);
return func.apply(context, unshiftArgs);
};
bindArgs = Array.prototype.slice.call(arguments, 2);
return wrapper;
};
Main.prototype.isChromeFix = function() {
var ver, _ref;
ver = parseInt((_ref = window.navigator.appVersion.match(/Chrome\/(\d+)\./)) != null ? _ref[1] : void 0, 10);
return (ver > 33) && (navigator.userAgent.toLowerCase().indexOf('chrome') > -1);
};
Main.prototype.isFF = function() {
return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
};
Main.prototype.isIE = function() {
var msie, rv, rvNum, trident, ua, undef;
if (this.isIECache) {
return this.isIECache;
}
undef = void 0;
rv = -1;
ua = window.navigator.userAgent;
msie = ua.indexOf("MSIE ");
trident = ua.indexOf("Trident/");
if (msie > 0) {
rv = parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)), 10);
} else if (trident > 0) {
rvNum = ua.indexOf("rv:");
rv = parseInt(ua.substring(rvNum + 3, ua.indexOf(".", rvNum)), 10);
}
this.isIECache = (rv > -1 ? rv : undef);
return this.isIECache;
};
return Main;
})();
new Main;
}).call(this);
External CSS
This Pen doesn't use any external CSS resources.