poniyur

По-быстрому получилось вот так:


Точка, это вот такой png рисунок (нарисовал сам в GIMP):

С помощью js вычисляете, что элемент попадает в видимую зону (легко гуглится) и добавляете класс с анимацией. По ссылке, что вы дали, описание анимации можно посмотреть в стилях элемента (скопировал сюда).

@keyframes bounceInUp {
	0% {
		opacity: 0;
		transform: translateY(2000px);
	}

	60% {
		opacity: 1;
		transform: translateY(-30px);
	}

	80% {
		transform: translateY(10px);
	}

	100% {
		transform: translateY(0);
	}
}

Давно помню, когда учился верстать делал подобное.
1. В вёрстке задаёшь элементу (по достижению которого должно появляться меню) id
2. При загрузке страницы, получаешь расстояние от верха сайта до элемента с нужным id
3. Отлавливаешь скролл страницы и вычисляешь текущее расстояние сайта до верха страницы
4. Сравниваешь 2 величины, если расстояние до элемента с id больше чем текущее расстояние, то меню не выводить, если больше, то выводи меню, добавляя ему класс типо show (уж стили расписывать не буду) .
Пункты 2, 3 и 4 спокойно гугляться оп отдельности.
Удачи