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);
	}
}

Есть костыль, но мне лень делать
Итак, для примера, делаем квадратный div, делаем ему фон градиентный, который закрашивает фигуру наполовину и повернут на 45 градусов.
Вуаля, треугольник.

Алгебра за 5 класс:
36 - 1440
x - 100%
x = 36 * 100 / 1440 = 2.571;
Получается такой вот стиль:
h1 {
font-size: 2.571vw;
}
Задайте такой стиль и поизменяйте размер экрана. Вроде должно получиться.
Я раньше, когда был верстальщиком, делал резиновые шрифты, но я точно не помню как это делал, а работы уже утеряны, попробуйте так.

Селектор по id (это где решетка) имеет больший вес, чем селектор по классу.
Вот, почитайте css.yoksel.ru/specifity