Вот вам плагин как раз для этих целей:
https://github.com/Talalaev/scrollingAnchors
Как делал Petr Tichy, ссылку на сайт которого вы привели , предполагать не возьмусь. Общий алгоритм используя плагин будет такой. Создаем страничку с якорями. Якорь это любой тег с идентификатором. Например,
<div id="achor_1"></div>. Просто пустой тег без текста. И начинаем их располагать на странице один за другим. Вот так
<div id="some_anchor" class="anchor"></div>
<div id="some_anchor" class="anchor"></div>
...
Между ними делаем отступы, например так .anchor {margin: 100px 0;}. И того, если создать 10 якорей у нас будет белая страница выстой 2000px. Кстати у Petr Tichy высота равна 38200px. Так мы получили нашу заготовку.
Теперь делаем блок в котором будет отображаться видимая часть.
<div id="viewer"></div> которому прописываем стили.
#viewer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
...
}
Итого он накрывает наши и без того невидимые якоря и внутри
<div id="viewer"></div> мы можем творить нашу магию, двигать что угодно куда угодно, анимировать и перемещать.
Остается вопрос отлавливать порядок действий при прокрутке. Для этого как раз нам и нужен будет плагин scrollingAnchors. Он позволяет описать действия которые должны быть выполнены для каждого anchor, когда на последнем произойдет одно из возможных событий. Допустим первый anchor появился на экране - произошло событие onTheScreen, значит нам нужно выполнить первую анимацию.
Весь список событий для anchor можно на странице плагина
https://github.com/Talalaev/scrollingAnchors
там же есть пример. Плюс плагин реализует не только anchor но и range т.е. это тот же anchor только анкор однопиксельный, а range имеет свою ширину и значит может частично помещаться на экран. Так же определяется направление откуда подъезжает anchor снизу или сверху. Небольшая заметка по плагину
www.talalaev.com.ua/2016/04/scrolling-anchor.html 
Простой
