Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- 
  https://twitter.com/FGRibreau
  28th Nov 2013 ]23:00;02:00[
-->

<div class="logo">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="orange"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="purple"></div>
  <div class="darkpurple"></div>
  <h2>&#8595; Scroll down &#8595;</h2>
</div>

<div class="fg">
  by <strong>@FGRibreau</strong>
  <br/>
  JavaScript/NoSQL teacher
  <strong>@EPSI_Nantes</strong>
</div>
              
            
!

CSS

              
                @function strip-units($number) {@return $number / ($number * 0 + 1);}

$s: 240px;
$hpx: 4000px;

$m: $s/2;
$diag: round($s*sqrt(2))+1;
$l: $diag/4;
$xl: $m/2;

$h: strip-units($hpx);
$start: $h*(20/100);


body{
  background-color:#fff;
  height:$hpx;
  font-size:14px;
  text-align:center;
  font-family:"Consolas" "Helvetica";
  cursor:default;
}
  


.logo{
  position:fixed;
  height:$s;
  width:$s;
  left:50%;
  top:50%;
  margin-left:-$s/2;
  margin-top:-$s/2;
  -skrollr-animation-name: sohardcore;
  transform-style: preserve-3d;
  perspective: 800px;
  
  @-skrollr-keyframes sohardcore {
    #{0}% {transform:scale(0.5) rotateY(0deg) rotateZ(0deg);}
    #{$start - $start*20/100}% {transform:scale(1) rotateY(360deg) rotateZ(360deg);}
    #{$h}% {transform:scale(1) rotateY(360deg) rotateZ(360deg);}
  }

  h2{
    position:absolute;
    bottom:-45px;
    width:100%;
    -skrollr-animation-name: tip;
  }

  @-skrollr-keyframes tip {
    0% {opacity:1;}
    10% {opacity:0;}
  }

  & > div{
    position:absolute;
    left:0px;
    top:0px;
    width: 0px;
    height:0px;
  }

  .red{
    border-right:$m solid transparent;
    border-bottom:$m solid transparent;
    border-left:$m solid red;
    -skrollr-animation-name:red;
  }
  
  @-skrollr-keyframes red{
    #{$start}% {
      left:0px;
      top:0px;
      transform:rotate(0deg);
      transform-origin:50% 50% 0;
     }
      

     #{$h}% {
      top:-$m*3;
      left:-$m*5;
      transform:rotate(-140deg);
      transform-origin:50% 50% 0;
     }
  }

  .yellow{
    height:$xl;
    width:$m;
    background-color:rgb(253,231,73);
    transform:skew(-45deg);
    left:$xl;
    transform-origin:0% 100% 0;
    -skrollr-animation-name:yellow;
  }
  
  @-skrollr-keyframes yellow{
    #{$start}% {
      left:$xl;
      top:0px;
      transform: skew(-45deg);
      transform-origin:0% 100% 0;
     }

     #{$h}% {
      top:-$m*2;
      left:$s;
      transform: skew(-45deg);
     }
  }

  .orange{
    border-left:$xl solid transparent;
    border-right:$xl solid transparent;
    border-top:$xl solid rgb(245,127,54);
    left:$xl;
    top:$xl;
    -skrollr-animation-name:orange;
  }
  
  @-skrollr-keyframes orange{
    #{$start + $h*10/100}% {
      left:$xl;
      top:$xl;
      transform:rotate(0deg);
      transform-origin:50% 50% 0;
     }
      
      #{$h*80/100}% {
      transform:rotate(100deg);
      left:$m;
      top:-$m;
      }

     #{$h}% {
      left:$m*2;
      top:-$m*3;
      transform:rotate(200deg);
     }
  }

  .green{
    border-bottom:$m solid transparent;
    border-top:$m solid transparent;
    border-right:$m solid rgb(77,174,89);
    left:$m;
    -skrollr-animation-name:green;
  }
  
  @-skrollr-keyframes green{
    #{$start}% {
      top:0px;
      left:$m;
      transform:rotate(0deg);
      transform-origin:0% 0% 0;
     }

     #{$h}% {
      top:-$m*2;
      left:$s*8;
      transform:rotate(180deg);
     }
  }

  .blue{
    border-left:$m solid transparent;
    border-right:$m solid transparent;
    border-bottom:$m solid rgb(0,166,203);
    -skrollr-animation-name:blue;
    top:$m;
  }
  
  @-skrollr-keyframes blue{
    #{$start}% {
      top:$m;
      left:0px;
      transform:rotate(0deg);
      transform-origin:100% 0% 0;
     }

     #{$h}% {
      top:$m*2;
      left:$m*4;
      transform:rotate(-180deg);

     }
  }

  .purple{
    background-color: rgb(161,47,134);
    width:$l;
    height:$l;
    top:$m;
    left:0px;
    transform:rotate(-45deg);
    transform-origin:0% 0% 0;
    -skrollr-animation-name:purple;
  }
  
   @-skrollr-keyframes purple{
    #{$start}% {
      top:$m;
      left:0px;
      transform:rotate(-45deg);
      transform-origin:0% 0% 0;
     }
  

     #{$h}% {
      top:$m*-0.2;
      left:-$m*4.2;
      transform:rotate(40deg);
      transform-origin:0% 0% 0;
     }
  }

  .darkpurple{
    border-top:$xl solid transparent;
    border-bottom:$xl solid transparent;
    border-left:$xl solid rgb(96,33,93);
    -skrollr-animation-name:darkpurple;
    top:$m;
  }
  
  @-skrollr-keyframes darkpurple {
    #{$start}% {
     top:$m;
     left:0px;
     transform:rotate(0deg);
     opacity:1;
   }
  
    #{$h*30/100}% {
      left:-$m/2;
      opacity:0.8;
      transform:rotate(0deg);
    }

    #{$h*60/100}% {
      top:$m*2;
      left:-$m;
      opacity:1;
      transform:rotate(-20deg);
    }

    #{$h*80/100}% {
      left:-$m*2;
      transform:rotate(-90deg);
    }

    #{$h}% {
        transform:rotate(-180deg);
        left:-$m*5;
        top:$m*1.5;
    }
  }
}

.fg{
  -skrollr-animation-name: fg;
  position:fixed;
  right:5px;
  bottom:5px;
  color:#636363;
  width:25%;
 
  a,a:visited,a:hover{color:#1269eb;}
}
  
@-skrollr-keyframes fg {
  #{0}% {
    top:-100%;
  }
  #{$h*70/100}% {
      top:-100%;
  }

  #{$h}% {
    top:50%;
    left:50%;
    margin-left:-12.5%;
  }
}


              
            
!

JS

              
                /*! skrollr 0.6.27 (2014-09-28) | Alexander Prinzhorn - https://github.com/Prinzhorn/skrollr | Free to use under terms of MIT license */
(function(e,t,r){"use strict";function n(r){if(o=t.documentElement,a=t.body,K(),it=this,r=r||{},ut=r.constants||{},r.easing)for(var n in r.easing)U[n]=r.easing[n];yt=r.edgeStrategy||"set",ct={beforerender:r.beforerender,render:r.render,keyframe:r.keyframe},ft=r.forceHeight!==!1,ft&&(Vt=r.scale||1),mt=r.mobileDeceleration||x,dt=r.smoothScrolling!==!1,gt=r.smoothScrollingDuration||E,vt={targetTop:it.getScrollTop()},Gt=(r.mobileCheck||function(){return/Android|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent||navigator.vendor||e.opera)})(),Gt?(st=t.getElementById("skrollr-body"),st&&at(),X(),Dt(o,[y,S],[T])):Dt(o,[y,b],[T]),it.refresh(),St(e,"resize orientationchange",function(){var e=o.clientWidth,t=o.clientHeight;(t!==$t||e!==Mt)&&($t=t,Mt=e,_t=!0)});var i=Y();return function l(){Z(),bt=i(l)}(),it}var o,a,i={get:function(){return it},init:function(e){return it||new n(e)},VERSION:"0.6.26"},l=Object.prototype.hasOwnProperty,s=e.Math,c=e.getComputedStyle,f="touchstart",u="touchmove",m="touchcancel",p="touchend",d="skrollable",g=d+"-before",v=d+"-between",h=d+"-after",y="skrollr",T="no-"+y,b=y+"-desktop",S=y+"-mobile",k="linear",w=1e3,x=.004,E=200,A="start",F="end",C="center",D="bottom",H="___skrollable_id",I=/^(?:input|textarea|button|select)$/i,P=/^\s+|\s+$/g,N=/^data(?:-(_\w+))?(?:-?(-?\d*\.?\d+p?))?(?:-?(start|end|top|center|bottom))?(?:-?(top|center|bottom))?$/,O=/\s*(@?[\w\-\[\]]+)\s*:\s*(.+?)\s*(?:;|$)/gi,V=/^(@?[a-z\-]+)\[(\w+)\]$/,z=/-([a-z0-9_])/g,q=function(e,t){return t.toUpperCase()},L=/[\-+]?[\d]*\.?[\d]+/g,M=/\{\?\}/g,$=/rgba?\(\s*-?\d+\s*,\s*-?\d+\s*,\s*-?\d+/g,_=/[a-z\-]+-gradient/g,B="",G="",K=function(){var e=/^(?:O|Moz|webkit|ms)|(?:-(?:o|moz|webkit|ms)-)/;if(c){var t=c(a,null);for(var n in t)if(B=n.match(e)||+n==n&&t[n].match(e))break;if(!B)return B=G="",r;B=B[0],"-"===B.slice(0,1)?(G=B,B={"-webkit-":"webkit","-moz-":"Moz","-ms-":"ms","-o-":"O"}[B]):G="-"+B.toLowerCase()+"-"}},Y=function(){var t=e.requestAnimationFrame||e[B.toLowerCase()+"RequestAnimationFrame"],r=Pt();return(Gt||!t)&&(t=function(t){var n=Pt()-r,o=s.max(0,1e3/60-n);return e.setTimeout(function(){r=Pt(),t()},o)}),t},R=function(){var t=e.cancelAnimationFrame||e[B.toLowerCase()+"CancelAnimationFrame"];return(Gt||!t)&&(t=function(t){return e.clearTimeout(t)}),t},U={begin:function(){return 0},end:function(){return 1},linear:function(e){return e},quadratic:function(e){return e*e},cubic:function(e){return e*e*e},swing:function(e){return-s.cos(e*s.PI)/2+.5},sqrt:function(e){return s.sqrt(e)},outCubic:function(e){return s.pow(e-1,3)+1},bounce:function(e){var t;if(.5083>=e)t=3;else if(.8489>=e)t=9;else if(.96208>=e)t=27;else{if(!(.99981>=e))return 1;t=91}return 1-s.abs(3*s.cos(1.028*e*t)/t)}};n.prototype.refresh=function(e){var n,o,a=!1;for(e===r?(a=!0,lt=[],Bt=0,e=t.getElementsByTagName("*")):e.length===r&&(e=[e]),n=0,o=e.length;o>n;n++){var i=e[n],l=i,s=[],c=dt,f=yt,u=!1;if(a&&H in i&&delete i[H],i.attributes){for(var m=0,p=i.attributes.length;p>m;m++){var g=i.attributes[m];if("data-anchor-target"!==g.name)if("data-smooth-scrolling"!==g.name)if("data-edge-strategy"!==g.name)if("data-emit-events"!==g.name){var v=g.name.match(N);if(null!==v){var h={props:g.value,element:i,eventType:g.name.replace(z,q)};s.push(h);var y=v[1];y&&(h.constant=y.substr(1));var T=v[2];/p$/.test(T)?(h.isPercentage=!0,h.offset=(0|T.slice(0,-1))/100):h.offset=0|T;var b=v[3],S=v[4]||b;b&&b!==A&&b!==F?(h.mode="relative",h.anchors=[b,S]):(h.mode="absolute",b===F?h.isEnd=!0:h.isPercentage||(h.offset=h.offset*Vt))}}else u=!0;else f=g.value;else c="off"!==g.value;else if(l=t.querySelector(g.value),null===l)throw'Unable to find anchor target "'+g.value+'"'}if(s.length){var k,w,x;!a&&H in i?(x=i[H],k=lt[x].styleAttr,w=lt[x].classAttr):(x=i[H]=Bt++,k=i.style.cssText,w=Ct(i)),lt[x]={element:i,styleAttr:k,classAttr:w,anchorTarget:l,keyFrames:s,smoothScrolling:c,edgeStrategy:f,emitEvents:u,lastFrameIndex:-1},Dt(i,[d],[])}}}for(Et(),n=0,o=e.length;o>n;n++){var E=lt[e[n][H]];E!==r&&(J(E),et(E))}return it},n.prototype.relativeToAbsolute=function(e,t,r){var n=o.clientHeight,a=e.getBoundingClientRect(),i=a.top,l=a.bottom-a.top;return t===D?i-=n:t===C&&(i-=n/2),r===D?i+=l:r===C&&(i+=l/2),i+=it.getScrollTop(),0|i+.5},n.prototype.animateTo=function(e,t){t=t||{};var n=Pt(),o=it.getScrollTop();return pt={startTop:o,topDiff:e-o,targetTop:e,duration:t.duration||w,startTime:n,endTime:n+(t.duration||w),easing:U[t.easing||k],done:t.done},pt.topDiff||(pt.done&&pt.done.call(it,!1),pt=r),it},n.prototype.stopAnimateTo=function(){pt&&pt.done&&pt.done.call(it,!0),pt=r},n.prototype.isAnimatingTo=function(){return!!pt},n.prototype.isMobile=function(){return Gt},n.prototype.setScrollTop=function(t,r){return ht=r===!0,Gt?Kt=s.min(s.max(t,0),Ot):e.scrollTo(0,t),it},n.prototype.getScrollTop=function(){return Gt?Kt:e.pageYOffset||o.scrollTop||a.scrollTop||0},n.prototype.getMaxScrollTop=function(){return Ot},n.prototype.on=function(e,t){return ct[e]=t,it},n.prototype.off=function(e){return delete ct[e],it},n.prototype.destroy=function(){var e=R();e(bt),wt(),Dt(o,[T],[y,b,S]);for(var t=0,n=lt.length;n>t;t++)ot(lt[t].element);o.style.overflow=a.style.overflow="",o.style.height=a.style.height="",st&&i.setStyle(st,"transform","none"),it=r,st=r,ct=r,ft=r,Ot=0,Vt=1,ut=r,mt=r,zt="down",qt=-1,Mt=0,$t=0,_t=!1,pt=r,dt=r,gt=r,vt=r,ht=r,Bt=0,yt=r,Gt=!1,Kt=0,Tt=r};var X=function(){var n,i,l,c,d,g,v,h,y,T,b,S;St(o,[f,u,m,p].join(" "),function(e){var o=e.changedTouches[0];for(c=e.target;3===c.nodeType;)c=c.parentNode;switch(d=o.clientY,g=o.clientX,T=e.timeStamp,I.test(c.tagName)||e.preventDefault(),e.type){case f:n&&n.blur(),it.stopAnimateTo(),n=c,i=v=d,l=g,y=T;break;case u:I.test(c.tagName)&&t.activeElement!==c&&e.preventDefault(),h=d-v,S=T-b,it.setScrollTop(Kt-h,!0),v=d,b=T;break;default:case m:case p:var a=i-d,k=l-g,w=k*k+a*a;if(49>w){if(!I.test(n.tagName)){n.focus();var x=t.createEvent("MouseEvents");x.initMouseEvent("click",!0,!0,e.view,1,o.screenX,o.screenY,o.clientX,o.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,0,null),n.dispatchEvent(x)}return}n=r;var E=h/S;E=s.max(s.min(E,3),-3);var A=s.abs(E/mt),F=E*A+.5*mt*A*A,C=it.getScrollTop()-F,D=0;C>Ot?(D=(Ot-C)/F,C=Ot):0>C&&(D=-C/F,C=0),A*=1-D,it.animateTo(0|C+.5,{easing:"outCubic",duration:A})}}),e.scrollTo(0,0),o.style.overflow=a.style.overflow="hidden"},j=function(){var e,t,r,n,a,i,l,c,f,u,m,p=o.clientHeight,d=At();for(c=0,f=lt.length;f>c;c++)for(e=lt[c],t=e.element,r=e.anchorTarget,n=e.keyFrames,a=0,i=n.length;i>a;a++)l=n[a],u=l.offset,m=d[l.constant]||0,l.frame=u,l.isPercentage&&(u*=p,l.frame=u),"relative"===l.mode&&(ot(t),l.frame=it.relativeToAbsolute(r,l.anchors[0],l.anchors[1])-u,ot(t,!0)),l.frame+=m,ft&&!l.isEnd&&l.frame>Ot&&(Ot=l.frame);for(Ot=s.max(Ot,Ft()),c=0,f=lt.length;f>c;c++){for(e=lt[c],n=e.keyFrames,a=0,i=n.length;i>a;a++)l=n[a],m=d[l.constant]||0,l.isEnd&&(l.frame=Ot-l.offset+m);e.keyFrames.sort(Nt)}},W=function(e,t){for(var r=0,n=lt.length;n>r;r++){var o,a,s=lt[r],c=s.element,f=s.smoothScrolling?e:t,u=s.keyFrames,m=u.length,p=u[0],y=u[u.length-1],T=p.frame>f,b=f>y.frame,S=T?p:y,k=s.emitEvents,w=s.lastFrameIndex;if(T||b){if(T&&-1===s.edge||b&&1===s.edge)continue;switch(T?(Dt(c,[g],[h,v]),k&&w>-1&&(xt(c,p.eventType,zt),s.lastFrameIndex=-1)):(Dt(c,[h],[g,v]),k&&m>w&&(xt(c,y.eventType,zt),s.lastFrameIndex=m)),s.edge=T?-1:1,s.edgeStrategy){case"reset":ot(c);continue;case"ease":f=S.frame;break;default:case"set":var x=S.props;for(o in x)l.call(x,o)&&(a=nt(x[o].value),0===o.indexOf("@")?c.setAttribute(o.substr(1),a):i.setStyle(c,o,a));continue}}else 0!==s.edge&&(Dt(c,[d,v],[g,h]),s.edge=0);for(var E=0;m-1>E;E++)if(f>=u[E].frame&&u[E+1].frame>=f){var A=u[E],F=u[E+1];for(o in A.props)if(l.call(A.props,o)){var C=(f-A.frame)/(F.frame-A.frame);C=A.props[o].easing(C),a=rt(A.props[o].value,F.props[o].value,C),a=nt(a),0===o.indexOf("@")?c.setAttribute(o.substr(1),a):i.setStyle(c,o,a)}k&&w!==E&&("down"===zt?xt(c,A.eventType,zt):xt(c,F.eventType,zt),s.lastFrameIndex=E);break}}},Z=function(){_t&&(_t=!1,Et());var e,t,n=it.getScrollTop(),o=Pt();if(pt)o>=pt.endTime?(n=pt.targetTop,e=pt.done,pt=r):(t=pt.easing((o-pt.startTime)/pt.duration),n=0|pt.startTop+t*pt.topDiff),it.setScrollTop(n,!0);else if(!ht){var a=vt.targetTop-n;a&&(vt={startTop:qt,topDiff:n-qt,targetTop:n,startTime:Lt,endTime:Lt+gt}),vt.endTime>=o&&(t=U.sqrt((o-vt.startTime)/gt),n=0|vt.startTop+t*vt.topDiff)}if(Gt&&st&&i.setStyle(st,"transform","translate(0, "+-Kt+"px) "+Tt),ht||qt!==n){zt=n>qt?"down":qt>n?"up":zt,ht=!1;var l={curTop:n,lastTop:qt,maxTop:Ot,direction:zt},s=ct.beforerender&&ct.beforerender.call(it,l);s!==!1&&(W(n,it.getScrollTop()),qt=n,ct.render&&ct.render.call(it,l)),e&&e.call(it,!1)}Lt=o},J=function(e){for(var t=0,r=e.keyFrames.length;r>t;t++){for(var n,o,a,i,l=e.keyFrames[t],s={};null!==(i=O.exec(l.props));)a=i[1],o=i[2],n=a.match(V),null!==n?(a=n[1],n=n[2]):n=k,o=o.indexOf("!")?Q(o):[o.slice(1)],s[a]={value:o,easing:U[n]};l.props=s}},Q=function(e){var t=[];return $.lastIndex=0,e=e.replace($,function(e){return e.replace(L,function(e){return 100*(e/255)+"%"})}),G&&(_.lastIndex=0,e=e.replace(_,function(e){return G+e})),e=e.replace(L,function(e){return t.push(+e),"{?}"}),t.unshift(e),t},et=function(e){var t,r,n={};for(t=0,r=e.keyFrames.length;r>t;t++)tt(e.keyFrames[t],n);for(n={},t=e.keyFrames.length-1;t>=0;t--)tt(e.keyFrames[t],n)},tt=function(e,t){var r;for(r in t)l.call(e.props,r)||(e.props[r]=t[r]);for(r in e.props)t[r]=e.props[r]},rt=function(e,t,r){var n,o=e.length;if(o!==t.length)throw"Can't interpolate between \""+e[0]+'" and "'+t[0]+'"';var a=[e[0]];for(n=1;o>n;n++)a[n]=e[n]+(t[n]-e[n])*r;return a},nt=function(e){var t=1;return M.lastIndex=0,e[0].replace(M,function(){return e[t++]})},ot=function(e,t){e=[].concat(e);for(var r,n,o=0,a=e.length;a>o;o++)n=e[o],r=lt[n[H]],r&&(t?(n.style.cssText=r.dirtyStyleAttr,Dt(n,r.dirtyClassAttr)):(r.dirtyStyleAttr=n.style.cssText,r.dirtyClassAttr=Ct(n),n.style.cssText=r.styleAttr,Dt(n,r.classAttr)))},at=function(){Tt="translateZ(0)",i.setStyle(st,"transform",Tt);var e=c(st),t=e.getPropertyValue("transform"),r=e.getPropertyValue(G+"transform"),n=t&&"none"!==t||r&&"none"!==r;n||(Tt="")};i.setStyle=function(e,t,r){var n=e.style;if(t=t.replace(z,q).replace("-",""),"zIndex"===t)n[t]=isNaN(r)?r:""+(0|r);else if("float"===t)n.styleFloat=n.cssFloat=r;else try{B&&(n[B+t.slice(0,1).toUpperCase()+t.slice(1)]=r),n[t]=r}catch(o){}};var it,lt,st,ct,ft,ut,mt,pt,dt,gt,vt,ht,yt,Tt,bt,St=i.addEvent=function(t,r,n){var o=function(t){return t=t||e.event,t.target||(t.target=t.srcElement),t.preventDefault||(t.preventDefault=function(){t.returnValue=!1,t.defaultPrevented=!0}),n.call(this,t)};r=r.split(" ");for(var a,i=0,l=r.length;l>i;i++)a=r[i],t.addEventListener?t.addEventListener(a,n,!1):t.attachEvent("on"+a,o),Yt.push({element:t,name:a,listener:n})},kt=i.removeEvent=function(e,t,r){t=t.split(" ");for(var n=0,o=t.length;o>n;n++)e.removeEventListener?e.removeEventListener(t[n],r,!1):e.detachEvent("on"+t[n],r)},wt=function(){for(var e,t=0,r=Yt.length;r>t;t++)e=Yt[t],kt(e.element,e.name,e.listener);Yt=[]},xt=function(e,t,r){ct.keyframe&&ct.keyframe.call(it,e,t,r)},Et=function(){var e=it.getScrollTop();Ot=0,ft&&!Gt&&(a.style.height=""),j(),ft&&!Gt&&(a.style.height=Ot+o.clientHeight+"px"),Gt?it.setScrollTop(s.min(it.getScrollTop(),Ot)):it.setScrollTop(e,!0),ht=!0},At=function(){var e,t,r=o.clientHeight,n={};for(e in ut)t=ut[e],"function"==typeof t?t=t.call(it):/p$/.test(t)&&(t=t.slice(0,-1)/100*r),n[e]=t;return n},Ft=function(){var e=st&&st.offsetHeight||0,t=s.max(e,a.scrollHeight,a.offsetHeight,o.scrollHeight,o.offsetHeight,o.clientHeight);return t-o.clientHeight},Ct=function(t){var r="className";return e.SVGElement&&t instanceof e.SVGElement&&(t=t[r],r="baseVal"),t[r]},Dt=function(t,n,o){var a="className";if(e.SVGElement&&t instanceof e.SVGElement&&(t=t[a],a="baseVal"),o===r)return t[a]=n,r;for(var i=t[a],l=0,s=o.length;s>l;l++)i=It(i).replace(It(o[l])," ");i=Ht(i);for(var c=0,f=n.length;f>c;c++)-1===It(i).indexOf(It(n[c]))&&(i+=" "+n[c]);t[a]=Ht(i)},Ht=function(e){return e.replace(P,"")},It=function(e){return" "+e+" "},Pt=Date.now||function(){return+new Date},Nt=function(e,t){return e.frame-t.frame},Ot=0,Vt=1,zt="down",qt=-1,Lt=Pt(),Mt=0,$t=0,_t=!1,Bt=0,Gt=!1,Kt=0,Yt=[];"function"==typeof define&&define.amd?define([],function(){return i}):"undefined"!=typeof module&&module.exports?module.exports=i:e.skrollr=i})(window,document);

/*! skrollr-stylesheets 0.0.6 (2014-05-28) | Alexander Prinzhorn - https://github.com/Prinzhorn/skrollr-stylesheets | Free to use under terms of MIT license */
(function(e,t){"use strict";var n,r=[],l=/@-skrollr-keyframes\s+([\w-]+)/g,s=/\s*\{\s*((?:[^{]+\{[^}]*\}\s*)+?)\s*\}/g,a=/([\w\-]+)\s*\{([^}]+)\}/g,o=/-skrollr-animation-name\s*:\s*([\w-]+)/g,i=/-skrollr-(anchor-target|smooth-scrolling|emit-events|menu-offset)\s*:\s*['"]([^'"]+)['"]/g,u=function(t){var n=new XMLHttpRequest;try{n.open("GET",t,!1),n.send(null)}catch(r){e.XDomainRequest&&(n=new XDomainRequest,n.open("GET",t,!1),n.send(null))}return n.responseText},c=function(t){for(var l=0;t.length>l;l++){var s=t[l];if("LINK"===s.tagName){if(null===s.getAttribute("data-skrollr-stylesheet"))continue;if(e.matchMedia){var a=s.getAttribute("media");if(a&&!matchMedia(a).matches)continue}n=u(s.href)}else n=s.textContent||s.innerText||s.innerHTML;n&&r.push(n)}r.reverse();for(var o={},i=[],c=[],g=0;r.length>g;g++)n=r[g],f(n,o),h(n,i),d(n,c);x(o,i),m(c)},f=function(e,t){l.lastIndex=0;for(var n,r,o,i;null!==(n=l.exec(e));)for(s.lastIndex=l.lastIndex,r=s.exec(e),a.lastIndex=0,i=t[n[1]]={};null!==(o=a.exec(r[1]));)i[o[1]]=o[2].replace(/[\n\r\t]/g,"")},g=function(e,t){for(var n,r=t;r--&&"{"!==e.charAt(r););for(n=r;n--&&"}"!==e.charAt(n-1););return e.substring(n,r).replace(/[\n\r\t]/g,"")},h=function(e,t){var n,r;for(o.lastIndex=0;null!==(n=o.exec(e));)r=g(e,o.lastIndex),t.push([r,n[1]])},d=function(e,t){var n,r;for(i.lastIndex=0;null!==(n=i.exec(e));)r=g(e,i.lastIndex),t.push([r,n[1],n[2]])},x=function(e,n){for(var r,l,s,a,o,i,u,c=0;n.length>c;c++)if(r=t.querySelectorAll(n[c][0])){l=e[n[c][1]];for(s in l)for(a=0;r.length>a;a++)u=r[a],o="data-"+s,i=l[s],u.hasAttribute(o)&&(i+=u.getAttribute(o)),u.setAttribute(o,i)}},m=function(e){for(var n,r,l,s,a,o=0;e.length>o;o++)if(n=e[o],r=t.querySelectorAll(n[0]),l="data-"+n[1],s=n[2],r)for(a=0;r.length>a;a++)r[a].setAttribute(l,s)};c(t.querySelectorAll("link, style"))})(window,document);

skrollr.init({
  forceHeight:true, 
  smoothScrolling:true
});
              
            
!
999px

Console