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".

Примерное описание логики без реального кода:
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 сделать.

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

Мой ответ является расширенной версией ответа Илья Шатохин про добавление класса .no-transition.
И он в общем то полагается на костыль, но не настолько ужасный как setTimeout.

.no-transition {
  transition: none !important;
}

Затем в js пишем нечто подобное

elem.classList.add("no-transition");
var triggerLayout = elem.offsetHeight;
// действия с элементом которые произойдут мгновенно

Суть такова, что работа с DOM в браузере оптимизирована таким образом, что он "группирует" все изменения и потом применяет их одновременно. Но, если в js коде обращаться к свойстам элементов, которые триггерят лэйаут, эти группы будут "дробиться" в этом месте вызова. В итоге вот эта самая строчка "var triggerLayout = elem.offsetHeight;" вызывает триггер лэйаута и операция с элементом происходит уже так, словно к нему добавлен класс без транзишена. Точно таким же образом например анимируются элементы с display: none, которые надо показать с помощью изменения opacity. Вначале вы меняете свойство display, затем триггерите лэйаут, затем добавляете класс изменяющий опасити - у вас происходит анимация. Без триггера элемент просто моментально появится.
Таблицу css триггеров можно найти тут - csstriggers.com
+ вот тут еще пишут про это gent.ilcore.com/2011/03/how-not-to-trigger-layout-...
Сам по себе лэйаут нужно триггерить только тогда, когда это является лучшим способом реализации анимации, ибо это влияет на производительность. На эту тему (и многие другие вещи) вам сюда - https://developers.google.com/web/fundamentals/per...

Вариант с обучением через верстку .psd макетов вас до "пика" не доведет. Максимум до уровня рядового "верстальщика". Сверстать статику может каждый второй, кто хоть иногда этим занимается. Если вы нацелены на реальный "пик", то вам надо учиться на основе живых примеров уровня www.awwwards.com www.cssdesignawards.com и www.thefwa.com
Копайтесь, смотрите что как сделано, пытайтесь сами воссоздавать отдельные куски "не смотря под капот" (то есть только на основе того, что вы видите, не залезая в F12). Но перед этим вам надо будет нагнать основы, то есть все что связано с css трансформами, нестандартными лэйаутами и другими трендами дизайна, а то иначе когнетивный диссонанс вам обеспечен. После этого будете долго практиковать анимации, свг, 2d-canvas и в самом конце возможно даже WebGL. Обязателен к употреблению codepen.io
Ну а если прочитав все это вы вдруг поняли, что вас на самом деле не интересуют всякие нестандартные промо-сайты, а вам просто надо уметь верстать странички для стандартных интернет-магазинов или еще чего подобного, то вам достаточно будет потратить 1-2 месяца на чтение вводных статей и начать штамповать сайты на бутстрапе. Вот.

По собственному опыту скажу, что с русскими ресурсами по свг все плохо. Знаю что Yoksel иногда пишет про свг вот тут (css.yoksel.ru) и знаю такую вот вводную.
По англоязычным источникам:
1) Сборная солянка №1
2) Сборная солянка №2
3) tutorials.jenkov.com/svg/index.html - много раз выручал этот сайт. Правда попадал я на него обычно с гугла, полностью все не читал.
4) sarasoueidan.com/articles/index.html - ищите по SVG. Есть очень много отличнейших статей, прям эталон.
5) Статьи на https://css-tricks.com/
6) Конечно же великий tympanus.net/codrops
7) Ну и самое самое важное - постоянно пилить демки и смотреть как пилят другие. Чекайте awwwards и подобные сайты, просматривайте codepen. На правах саморекламы - codepen.io/suez/tag/svg (изучаю свг третий месяц, полет нормальный).

По ходу нашел решение на основе этого stackoverflow.com/questions/19076655/svg-sprite-ba...
В общем в background-size: необходимо указывать не только x но и y величину. На основе того, что у вашего оригинального svg спрайта (gamma.antikvarus.ru/themes/frontend_v2/images/svg/...) значения 960/560 (основываясь на viewBox), а на сайте у вас background-size: 424px; то в итоге получил такое значение
background-size: 424px 247px;
Как только его поставил, позиция svg стала одинаковой в хроме и фф, а если точнее, то стала как в ff, то есть смещенная вверх.
Тестировал на основе иконки логина (Вход), у которой по умолчанию было background-position: -65px -28px;
Вот так с измененными значениями (-22px вместо -28) выглядит в хроме

а так в FF


Так что просто добавляете y значение для background-size и увеличиваете y значение background-position на 6px.

Да потому-что он там и не работает caniuse.com/#feat=css-filters
С помощью css не решите проблему для 11 осла, вам нужна какая-нибудь либа для работы с изображения на канвасе.

1) calc про который вы уже написали сами
2) Js (так себе вариант)
3) Использовать padding-top: 120px для header, а nav поместить вверху с position: absolute. Внутри header создать блок с height: 100%, он в свою очередь благодаря паддингу родительского элемента займет все оставшееся пространство, вычитая паддинг. И там уже делайте что-хотите.
Естественно у header должен быть position: relative и для элементов должен быть задан box-sizing: border-box;