Денис Клепко

Здравствуйте!
1) На ВП можно реализовать многое. Подобное реализовать несложно, если знать html, css, js, php & wp codex.
По факту - это кастомный тип записи.
Создаете нужные кастомные поля при помощи ACF. Например, название банка, лого, % ставка, сумма кредита, описание, ссылка и т.д.
Пример реализации - Кредит.бел
2) А дальше вам нужна верстка, чтобы вывести в таком виде блоки.
Если лень верстать самому, то вот тут готовые сниппеты -
https://bootsnipp.com/
3) Ну и остается интегрировать ваш кастомный тип записи с вашей версткой, вывести цикл с записями банков и все

Что ж вас всех так тянет к этому канвасу? (риторический вопрос)

1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется

Если вы про большие "прозрачные" буквы, через которые видны фотографии, то никакой канвас там не нужен. Это делается на svg-масках - просто и производительно. Соответственно при перемещении мышки добавляется transform:translate для маски. Задача тривиальная, но оставлю пример для ознакомления. Переход между слайдами делается аналогично.

2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).

На нажатие мышки вешаете обработчик, показывающий эти элементы (думаю не стоит говорить о том, как поменять им opacity). Далее точно так же - на событие "перетаскивания" добавляете transform:translate для всех этих линий и transform:scale для кружков. При переходе между слайдами добавляете еще больше трансформаций по вкусу.

Остальные эффекты тоже интересуют. Понятно что css3, js, canvas

Для рисования линий можно опять взять svg и..... Это вообще мощный прием, много куда его можно приткнуть. Появление надписей можно сделать на CSS-анимациях. Вариантов много, можно начать с вот этого примера (только делать все в обратную сторону) или поиграть с размерами псевдоэлементов, положенных поверх текстов. Еще там есть постраничный скролл, но это легко загуглить.

Так это обычный keyframes, нет? Он не связан со скролом
https://jsfiddle.net/2yzus913/

100/100 x2
precosts.com
Смотрим исходник и тестируем
Делаем аналогично.
PS: вся соль в минификаторе CSS который выдаёт строку в инлайн через echo динамически (соотв., на сервере - она в кэше) и выносим вниз остальное, что не критично для первичной разметки.
PS2: Считаю, что время загрузки (избавляясь от JS) дороже валидации недоговорившихся валидаторов гигантов IT-индустрии при корректной работе решения на большинстве устройств, поэтому тэг link - стоит внутри body, несмотря на правила сообщества w3c.
Иными словами: между JS-надстройками для отложенной загрузки CSS и неверной (с точки зрения валидации w3c), но рабочей разметке - лучше выбрать разметку, минимизировав нагрузку на клиентское устройство в момент рендеринга страницы.
PS3: Вот еще неплохой сервис для проверки: www.webpagetest.org
(пошел "полировать до блеска" свой код )))
---------------
Все линки на тесты: тут
Еще пару ресурсов по советам оптимизации:
Yahoo: https://developer.yahoo.com/performance/rules.html
Google: https://developers.google.com/speed/pagespeed/modu...
--------------
PS4: Про "critical CSS":
Можно вставить слегка переделанный скрипт из ответа на SO на все страницы и собрать стили по каждому URLу, запустив по всем линкам crawler и потом - найти пересечения между ними (П1).
Затем - объединить (merge) все возможные стили (О1), которые грузятся из файлов на сервере и снова найти пересечения между П1 и О1.
Результатом и будет искомый "critical css".