Nikolay Talanov

Так как я уже убитый после рабочего дня и войны с кастомными скроллбарами, то полного ревью по веб-перфу дать не смогу. Но по мелочам пробежаться могу.
1) Вот так выглядит таймлайн сайта, после полного скролла вниз, а затем вверх (смотреть на верхний график).

Если в кратце, то все печально :) На всех переходах фпс стабильно падает до 30 (и иногда ниже). Ваша цель - 60 фпс в среднем, и не ниже 40 на паре-тройке фреймов при переходах.
Если вы чайник в замерах веб-перформанса с помощью таймлайна (и дев тулс вообще), то вам сюда:
а) https://developers.google.com/web/fundamentals/per... - святой грааль.
б) https://www.udacity.com/course/browser-rendering-o... - по сути дела дополнение к текстовому варианту, но только в виде отличных видео и мини-тестами. Там же на udacity есть похожил курс от Григорика.
в) Искать другие годные статьи в дайджестах и блогах, пилить/изучать демки и все такое.
2) Очень беглый осмотр показал, что у некоторых элементов анимация происходит с помощью изменения таких свойств как left например (вылезающий и жутко тормозящий блок справа на 3 странице). В 90% случаев для анимации движения/перемещения/отображения прилично использовать только transform/opacity, особенно когда речь идет о больших элементах. С анимацией всяких left/top/width и подобных вещей для больших элементов можете вообще забыть о 60фпс.
3) Основную ставку вам надо будет делать на создание отдельных слоев для элементов, проще говоря юзать translateZ/backface-visibility. Но только юзать это надо с умом, и каждый раз все профилировать через таймлайн. В веб-перфе есть одна крылая фраза "Tools, not rules".

Это не плохо. Ибо в самом ангуларе столько всего сделано через жопу, что использование jQuery в некоторых местах будет вашей наименьшей проблемой. Но тут очень важно понимать, где и как этот jQuery юзать, ибо простое подключение глобального файлика с jq-кодом особых результатов не даст из-за асинхронности angular'а, по этому вам все равно придется запихивать jq-код во всякие link функции и прочие места, так что код в итоге получится вполне нормальным.

Примерное описание логики без реального кода:
1) Получаете размеры секций, на которое будут ориентироваться эти навигационные якоря (height/offsetTop).
2) Навешиваете на глобальный скролл обработчик, который на основе текущего scrollTop и сравнения с размерами и пункта 1 будет понимать, в какой же секции вы сейчас находитесь и навешивать к нужному кружочку класс active.
3) Полируете все это дело. Нужно будет навесить обработчик на window resize, чтобы пересчитывать размеры из пункта 1. Можно будет даже сделать, чтобы из одного кружка шла линия прогресса в другому (при разных размерах секций), но это уже из разряда извращений :)

Итак, решения которые приходят в голову:
1) CSS clip-path: polygon(%цифры или проценты%) - по идее самое идеальное решение, но поддержка браузерами вас вряд ли порадует.
2) SVG. То есть берете прозрачный див, внутрь кладете SVG polygon/path с position: absolute и примененным к нему svg фильтром для box-shadow. Адаптивности можно легко добиться с помощью аттрибутов viewBox и preserveAspectRatio. Ну и соответственно поверх свг идет контент, который лежит внутри дива.
3) Картинка. Ужасный вариант, забудьте :)
4) Какие-нибудь адские хаки с :before, :after. На фоне свг вообще не боец.

Сырая демка - codepen.io/suez/pen/2d7d1453a9d842b85ae307e4244cc237

Что конкретно вы подразумеваете под 3D изображением? Если речь идет о какой-нибудь полноценной 3D модели, то вам нужен WebGL (либо архимаги 2D канваса или 3D-css без поддержки IE). Если же речь идет о чем то плоском, что нужно вращать в 3d, то можно на css+js сделать.

Код примерно будет выглядеть вот так (работает сразу для мыши и тача):

$(document).on("mousedown touchstart", ".%класс_области_активности_ивентов%", function(e) {
  // если необходимо, сохраняем стартовую позицию ивента
  var startY =  e.pageY || e.originalEvent.touches[0].pageY;

  $(document).on("mousemove touchmove", function(e) {
    // получаем Y координаты во время движения с зажатой мышью/тачем
    var y = e.pageY || e.originalEvent.touches[0].pageY;
    // ваши действия со всей этой фигней
  });

});

$(document).on("mouseup touchend", function() {
  // отключаем обработчики маусмува/тачмува
  $(document).off("mousemove touchmove");
  // действия, которые вы возможно хотите сделать по окончании действий юзера
});

codepen.io/suez/pen/b7033b508fa221e1fbe4a9843a4a67fd
Если SASS непонятен, в css секции кликните кнопку View Compiled.
Я сделал не анкором, а button элементом. Суть кнопки простая - белый текст, синий бордер, прозрачный фон. С помощью :after делается фон, и при :hover этот :after анимирует scale() (выше 1.5) и изменение opacity до 0. Пилил на глаз, в их код не смотрел.