<section class="slider js-height">
  <article class="slide" data-bg="http://placekitten.com/900/1520" style="z-index:1"><div class="content">
    <h3>Check Me Out</h3>
    <p>This right here is a little paragraph example to get the heads bobbin and the panties droppin.</p>
    </div>
  </article>
  <article class="slide" data-bg="http://placekitten.com/900/1500" style="z-index:2"><div class="content">
    <h3>How Ya Livin B?</h3>
    <p>This right here is a little paragraph example to get the heads bobbin and the panties droppin.</p>
    </div>
   </article>
  <article class="slide" data-bg="http://placekitten.com/900/1510" style="z-index:3"><div class="content">
    <h3>Throw Ya Hands Up</h3>
    <p>This right here is a little paragraph example to get the heads bobbin and the panties droppin.</p>
    </div>
 </article>
</section>

<nav><a class="next" href="#">↓</a></nav>

body {
  background: #ddd;
  margin: 0;
  padding: 0;
  font-family: helvetica, arial, sans-serif;
  font-size: 110%;
  line-height: 1.5;
}

h3{
  font-size: 3em;
  line-height: 1;
  margin: 0;
}

p{
  font-size: 1.3em;
}
.slider {
  width: 100%;
  height: 40em;
  background: #fff;
  position: relative;
  overflow: hidden;

  .slide {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    margin: 0;
    
    /*background-attachemnt:scroll*/
    background-attachment:fixed;
    &:nth-child(1) {
      top: 0;
    }
    .content {
      color: #fff;
      font-family: sans-serif;
      position: absolute;
      top: 40%;
      left: 2%;
      width:30%;
      transition:all 1s ease;
      
    }
  }
}

nav a{
display: block;
margin: 0 auto;
width: 5em;
height:5em;
line-height:5em;
text-align: center;
color: #fff;
background: rgba(0,0,0,0.7);
font-size: 1em;
transition: all .3s ease;
position: fixed;
top: 1em;
right: 0;
z-index: 9;
transition: all .3s ease;
}

nav a:hover{
  background: rgba(0,0,0,0.5)
}

$(document).ready(function() {
  $(".slide").each(function() {
    $(this).css("background-image", "url("+$(this).data("bg")+")");
  });
  
  var current = 0;
  var count = 2;
   $(document).on("click", ".next", function(e) {
    $(".slide:eq("+current+")").css("z-index", "0").animate({
      top: "-1%",
      height:"0%",
 
    }, 1000, function() {
      $(this).css("top", "100%");
    });
    current++;
    if (current > count) {
      current = 0;
    }
    $(".slide:eq("+current+")").css("z-index", "1").animate({
      top: "0%",
      height: "100%",
   
    }, 600);
    e.preventDefault();
  });
});


//Fill viewport function
$(function() {

    var pause = 100; // will only process code within delay(function() { ... }) every 100ms.

    $(window).resize(function() {
        
        delay(function() {
        
            var width = $(window).width();
    
            if( width > 776  ) {
               $(".js-height").height($(window).height());
               	$(window).resize(function(){
               	    $(".js-height").height($(window).height());
               	});
            } else if( width >= 480 && width <= 767 ) {
                // code for mobile landscape
            } else if( width <= 479 ) {
                // code for mobile portrait
            }
        
        }, pause );
    
    });
    
    $(window).resize();

});

var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();