Bandito,
мысли вслух ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
display: flex;
flex-wrap: wrap;
position: relative;
}
body > div{
position: relative;
width: 16.45%;
box-sizing: border-box;
height: 1200px;
transition: all 3.8 ease-in-out;
display: flex;
flex-direction: column;
}
body > div > div{
flex : 1;
}
body > div > div:nth-child(2n+1){ box-sizing: border-box;
background-color: #FFFFFF;
border: 1px solid #000000;
}
body > div > div:nth-child(2n){ box-sizing: border-box;
background-color: #000000;
border: 1px solid #FFFFFF;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var scroll = 0 ;
$(window).scroll(function() {
var s = $(window).scrollTop(), n = s > scroll;
scroll=s;
$("body div:nth-child(1),body div:nth-child(6)").stop(true,true).css({"top" : (n? "80" :"-80")+"px"})
.delay(600).animate({"top": 0},800)
$("body div:nth-child(2),body div:nth-child(5)").stop(true,true).css({"top" : (n? "50" :"-50")+"px"})
.delay(300).animate({"top": 0},800)
})
});
</script>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>