Edit in JSFiddle

$(document).ready(function(){
  $("#second").waypoint(function(event,direction){
    	if(direction === 'down'){
            $("#senna").animate({top:"0"},1000);
      } else{
            $("#senna").animate({top:"-500"},1000);
      }
    });
})

<div id="senna"></div>

<div id="first" class="slide">
</div>

<div id="second" class="slide">
  <h3>ここまで見えたらjQueryアニメーションを起動させる！</h3>
</div>

<div id="third" class="slide">
</div>

html,body{
	width:100%;
	height:100%;
	margin:0 auto;
}

#first{
  background:url(http://newyear.opdsgn.com/images/bg2.png) no-repeat fixed #EC4354;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
  z-index:1;
  height:3000px;
}

#second{
	background: #000;
	margin: 0 auto;
  z-index:0;
}

#second h3{
	font-size: 300%;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 40%;
	width: 100%;
}

#third{
  background:url(http://newyear.opdsgn.com/images/bg2.png) no-repeat fixed #EC4354;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	height: 1000px;
}

#senna{
	background:url(http://newyear.opdsgn.com/images/senna_3.png) no-repeat center;
	position: fixed;
	width: 468px;
	height: 448px;
	left: 10px;
  top:-500px;
  z-index:1;
}

.slide{
	width:100%;
	height:100%;
	position: relative;
}