.container
  .first(data-stellar-background-ratio='0.5')
    h1 Should I scroll?
.text
  h1 NO NO, don't scroll
.container
  .second(data-stellar-background-ratio='0.1')
    h1 Why are you still scrolling?
.text
  h1 Don't! You'll see bad things

.container
  .third(data-stellar-background-ratio='0.9')
    h1 NAH. You little rebel. I like you. 
    
.text
  h1 Just wanted to show you how easy is parallax with Stellar.js
  a(href="http://markdalgleish.com/projects/stellar.js/") Stellar.js
  

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,700&subset=latin,latin-ext);
body
{
  margin: 0;
  padding: 0;
  text-align: center;
}

.container
{
  position: relative;
  width: 100%;
}
.first,
.second,
.third
{  
  width: 100%;
  height: 600px;
  margin: 0;
  display: table;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.first
{
  padding-top: 50px;
  margin-top: -50px;
}

.first{background-image: url(http://i.huffpost.com/gen/1651021/images/o-SCARED-facebook.jpg);}
.second{background-image: url(http://benhowdle.im/img/monstersinc.jpeg);}
.third{background-image: url(http://images6.alphacoders.com/315/315801.jpg);}

.first h1,
.second h1,
.third h1
{
  margin: 0 auto;
  vertical-align: middle; 
  display: table-cell;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 400;
  font-size: 60px;
  color: white;
}

.text{margin: 10% 5%;}

.text h1,
.text a
{font-family: 'Titillium Web', sans-serif;}

$(window).stellar();