<h3> Scroll down to see the different skrollr.js effects </h3>
<section id="first">
  <div class="box1"
       data-0="opacity:1" data-300="opacity:0"> </div>

  <div class="box2" data-bottom-top="transform:scale(0.5)" data-top="  transform: scale(3)"> </div>
  
   <div class="box3"                                     data-top="opacity:0; transform:translateY(200px)"
   data--100-top="opacity:1;transform:translateY(0px)"
    data--200-top="opacity:1; transform: translateY(-100px)"
    data--350-top="opacity:0; transform: translateY(-400px)"> </div>
  
  <div class="box4" data-bottom-top=“transform[swing]: scale(0.5) "data-top="transform[swing]: scale(2)">  </div> 
        <div class="trial>
  <div id="init"
data-top="transform:translateY(0px)"
    data--875-top="transform:translateY(300px)"></div>           
  </div>
   </section>

@import url(https://fonts.googleapis.com/css?family=Slabo+27px);

body{
  background:  #fff;
  font-family: "Slabo";
  font-size: 12px;
}

h3{text-align: center;}
.box1 {
  height: 150px;
  width: 150px;
  background: black;
  margin: 0 auto;
  margin-bottom: 30px;
}

.box2 {
  height:50px;
  width: 50px;
  background:#9ce1b0;
  margin: 0 auto;
}

.box3{
    height:50px;
  width: 150px;
  background:black;
  margin: 0 auto;
}

.box4{
  height: 30px;
  width: 30px;
  border-radius: 15px;
  background: black;
  margin: 0 auto;
}
.trial {
  background: black;
  height: 50px;
  width: 10px;
  margin: 0 auto;
}
 var s = skrollr.init();

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js