testing skrollr

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.27/skrollr.min.js"></script>
 <body>

        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

		<!-- Demo content -->			
		<div id="page-content">
            
            <div id="slides-container">
                <div id="slides" data-0="transform:translate(0%,0%);" data-1500="transform:translate(0%,0%);">
                    <div id="slide-1" class="slide"  
                    data-0="transform:translate(0%,0%);" data-1500="transform:translate(0%,0%);">
                       
                    </div>
                    <div id="slide-2" class="slide" 
                    data-0="height:  0%" data-500="height:  100%">
                    </div>
                    <div id="slide-3" class="slide" 
                    data-500="height:  0%" data-900="height:  100%">
                    </div>
                    <div id="slide-4" class="slide" 
                    data-900="height:  0%" data-1200="height:  100%">
                    </div>
                </div>
            </div>

            <div id="helper">
                <div class="marker red"></div>
                <div class="marker green"></div>
                <div class="marker blue"></div>
                <div class="marker yellow"></div>
            </div>





		</div>
		<!-- /Demo content -->

        <!-- Include Skrollr.js -->
     

    </body>

CSS

==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html, body {
    width:100%;
    height:100%;
}

.caption {
    position: absolute;
    bottom: 5%;
    right: 5%;
    text-align: right;
    color: #fff;
}
p, h1 { margin: 0; }
h1 { margin-bottom: 0.2em; }
p { line-height: 1.333em; }
 
/* full width/height container */
#slides-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
 
/* double the height/width of a viewport */
#slides {
    width: 200%;
    height: 200%;
    position: fixed;
    bottom: 0;
    left: 0;
}
.slide {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
}
#slide-1 {
	
    background: url('http://i.imgur.com/7aWoXGR.png') no-repeat center center;
    background-size: cover;
	  background-attachment: fixed;

}
#slide-2 {
	
    background: url('http://i.imgur.com/GkPXSPP.png') no-repeat center center;
    background-size: cover;
		background-attachment: fixed;
    height:0%;
}
#slide-3 {
	
    background: url('http://i.imgur.com/EQabH21.png') no-repeat center center;
    background-size: cover;
		background-attachment: fixed;
    height:0%;
}
#slide-3 .caption {
    left: 5%;
    right: auto;
    color: #47373f;
}
#slide-4 {
	  height:0%;
    background: url('http://i.imgur.com/GWz6iqB.png') no-repeat center center;
    background-size: cover;
		background-attachment: fixed;
}
#slide-4 .caption {
    right: auto;
    left: 5%;
    top: 5%;
    bottom: auto;
    color: #47373f;
}

#helper {
    position:absolute;
    left:0;
    top: 0;
    height:600%;
    width: 0;
}
.marker {
    height:...

JavaScript

var s = skrollr.init();