Nikolay Talanov

Общался на эту тему с некоторыми продвинутыми чуваками, они рассказывали как запиливали подобное. Если в кратце, то все решения представляют из себя жуткие костыли, когда в течении N милисекунд идет какой-то кастомный бенчмарк, на основе которого магическим образом определяется производительность и на основе этого делаются выводы. Но суть в том что полагаться на такую штуку плохая идея, ибо браузер, открывающий вкладку в фоне, такой бенчмарк завалит. И так далее тому подобное.
Так что просто забудьте о канвас свистоперделках на телефонах. Либо детектите конкретные версии IOS (ниже 9 например, что не соответствует флагманам) или андроид (хотя тут не поможет) и им не показывайте анимацию или давайте ее облегченную версию. Но это все костыли 99 уровня и за такое в аду для вас будет отдельная печь.

А чего тут непонятного? Кликнули, ненужные блоки разлетелись по сторонам, у нужного увеличилась ширина, чтобы он стал фуллскрин. Внутри лежит картинка которая автоматом растянута на большую ширину. Ну и всякие там движения туда сюда. В целом эффект раскрытия в этом слайдере выглядит довольно таки некрасиво и топорно, слишком резкий прыжок слайда с последующим отскакиванием, халтурная работа.

Я почти 2 недели назад сделал такую демку - codepen.io/suez/pen/AXQaEg, тут все намного плавнее и красивее, да еще и все реализовано с помощью css, js лишь 2 класса добавляет, но у меня правда отсутствует функционал слайдера, ибо концепт другой. Но можете изучить css чтобы понять как это дело работает.

Вам необходимость использовать Timeline в Chrome DevTools для профилирования производительности анимаций и не только.

Хотите знать основы оптимизации рендеринга - вам сюда https://www.udacity.com/course/browser-rendering-o...

Причин плохой оптимизации может быть вагон и маленькая тележка. У вас там могут огромные элементы анимироваться с помощью top/left вместо transform: translate, у вас при каждом скролле может идти repaint огромных картинок, забирая по 60-100мс на каждый шаг и так далее. Скорее всего причины крайне простые и связаны с использованием древних и убогих методик для анимаций, аля jQuery.animate (который до 3й версии юзает setTimeout вместо requestAnimationFrame под капотом).

Блоги не надо мониторить, надо подписаться на пачку дайджестов, и там вы найдете ссылочки на почти все достойные статьи, включая менее известных (но не менее крутых) товарищей.
Получать 5-10 писем с кучей ссылок в неделю намного проще и эффективнее, нежели чем чекать 10+ блогов, где апдейты бывают раз в 1-6 месяцев.

SVG не поддерживает динамическое изменение xlink:href аттрибута, по-этому для таких иконок надо писать отдельный мини-компонент, который будет просто динамически вставлять элемент с линком внутри в страницу. Так по итогам даже проще будет, ибо вы сможете присобачить кучу своих кастомных аттрибутов к этому компоненту, чтобы потом все это дело легко стилизовать, не заставляя себя на каждом шагу запихивать убогую конструкцию в виде

<svg>
  <use blah blah>
</svg>

Ну и для поддержки ИЕ9+ юзайте это https://github.com/Keyamoon/svgxuse (просто подключили на страницу и все работает).

Тут вот статья по иконкам в реакте - https://www.sitepoint.com/a-working-svg-workflow-f...
В ней в комментах имеется описание моего подхода (особенно пункт 4) - https://www.sitepoint.com/a-working-svg-workflow-f...

Вариант с гиф это совсем уж извращение.
1 вариант по идее можно сделать с помощью svg gooey фильтра (комбинация блюра с контрастом, которая дает эффект перетекания).
Но чаще всего такое делают либо с помощью спрайтов (устаревший, но простой вариант), либо с помощью bodymovin (js плагин для After Effect, вы экспортите анимацию из AE и юзаете в нем).
Ну и конечно есть вариант такое руками с помощью SVG запилить, но это крайне нерациональный подход на фоне того что я описал выше.

2 пробела, которые ставятся табом. Настраивается в любом редакторе, включаяя notepad++.

У них это сделано на канвасе. То есть 3 бэкграунда для блока просто фоном сделаны канвасом, который реагирует на движения мышью. Есть конечно вариант сделать такое на свг, но там могут быть проблемы с адаптивностью и сохранением адекватного aspect ratio (даже со спец атрибутами viewBox и preserveAspectRatio можно будет помучаться).
У меня имеется несколько демок с похожим эффектом (на свг):
codepen.io/suez/pen/emjwvP - вот тут простой drag effect, который просто меняет одну координату арки.
codepen.io/suez/pen/epgZjK - вот тут более продвинутый пример, где я уже юзаю Cubic Bezier Curve, а не арку или квадратичную Безье.
У меня варианты на rAF велосипедах, с гсапом это все дело должно быть явно проще.

Если речь идет о столь примитивном сайте, то без разницы.

Сейчас бы понять, откуда у вас переменные состоящие из двух слов, которые разделены пробелом.
А не работает, ибо получается селектор вида #word1 word2 (то есть элемент word 2 внутри айдишника word1), ну и соответственно ничего подобное querySelector и не находит.

Что там использовать то, хоспади. Вы что ф12 не умеете нажимать? Там тупо картинки в контейнеры вставлены, которые скроллятся в оверфлоу. До жути примитивно и уныло.

Создаете простой контейнер высотой в весь экран (100vh).
Расположите его например с помощью position: fixed как есть c left: 0; top: 0; (по идее надо без фикседа, но в этом случае надо основной контент запихивать в свой контейнер, сами разберетесь).
Далее задаете transform: translate3d(0,100%,0); для этого контейнера чтобы он по умолчанию находился снизу.
По клику загружаете внутрь контент. Можно хоть примитивным $.load api.jquery.com/load обойтись, но по хорошему лучше использовать шаблонизатор и с сервера получать только сам контент получать, без левой фигни.
Как только загрузилось (в случае с получением данных в виде json все должно работать почти моментально) добавляете блоку класс, чтобы он выехал красиво снизу.
Но это только основа. Помимо этого еще надо будет делать много всяких мелочей, чтобы по итогам все смотрелось красиво и никого не раздражало.
У них кстати на сайте кривовато сделано. При открытии "истории" меняется урл на #history, но если кликнуть браузерный "назад" то урл поменяется, а вот страничка назад не уедет, хотя это вполне простой функционал.

EDIT: чекнул сейчас сайт получше, там ничего динамически не подгружается, у них все заранее загружено в контейнеры, то есть совсем все просто.