cssのbackground-positionを$(window).scroll(function(){ var dy = $(this).scrollTop(); で操作します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>パララックスサイト</title>
<style>
body {
margin: 0;
padding: 0;
height: 3000px;
}
.box {
padding: 0;
margin:0;
height: 340px;
}
#bg1 { background: url('p1.jpg') no-repeat; }
#bg2 { background: url('p2.jpg') no-repeat; }
#bg3 { background: url('p3.jpg') no-repeat; }
#msg {
font-size: 48px;
font-weight: bold;
font-family: Verdana, Arial, sans-serif;
color: orange;
opacity: 0;
position: fixed;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="bg1" class="box"></div>
<div id="bg2" class="box"></div>
<div id="bg3" class="box"></div>
<div id="msg" class="box">The End</div>
<script>
$(function(){
$(window).scroll(function(){
var dy = $(this).scrollTop();
console.log(dy);
$('#bg1').css('background-position', '0 '+dy+'px');
if (dy > 340) {
$('#bg2').css('background-position', (dy-340)+'px '+(dy-340)+'px');
} else {
$('#bg2').css('background-position', '0 0');
}
if (dy > 680) {
$('#bg3').css('background-position', '0 '+(dy-680)*2+'px');
} else {
$('#bg3').css('background-position', '0 0');
}
if (dy > 680) {
$('#msg').css('opacity', (dy-680)/340);
$('#msg').css('top', 200);
var dx = (dy -680) > 400 ? 400: (dy-680);
$('#msg').css('left', dx);
} else {
$('#msg').css('opacity', 0);
}
});
});
</script>
</body>
</html>
