Как сделать такой сайт?

Question

[SMK DN]

Помогите разобраться.

Нашел такой сайт - 2c.tv

Интересно реализовать что-то подобное своими руками. Конкретно интересует горизонтальная прокрутка, верстка таких блоков.

Заранее спасибо.

Comments

[Andrew]

"ЧТО ТЫ ТАКОЕ?"©
И почему оно так лагает?
Вроде .js конца 18ого года,но у меня так ниодин сайт не лагает

[Максим Тимофеев]

Andrew, SMK DN,
Это не сайт, это генератор надписей в консоле
2c.tv/js/main.min.js
Судя по всему сделали его ребята из f11p.com. Сделали красиво, но совершенно похабно. Даже не утруждались очистить js от console.log, я уже молчу про комментарии в коде и отсутствие минификации. С остальным там тоже все не очень. Ошибки в консоле, километровые style и т.д.

Так что мой ответ на вопрос

Как сделать такой сайт?

не надо делать такой сайт. Это анти ui, анти UX, это ужасно сделано, медленно работает. Дизайн ниче так. В остальном - это сборник "как делать не надо".

Answer 1

[Ivan Bogachev]

Горизонтальная прокрутка - transform: translate для контейнера, привязанный к скроллу.
Косые блоки - transform: skew для блока, skew обратно для контента.
Размер косого блока удобно выразить через единицы vh.
Картинкам - object-fit: cover.
При наведении на блок меняем его opacity до 1, плюс transform: translate для текста и scale для картинки.
Переходы между страницами - немного css-трансформаций + что-нибудь вроде barba.js.

Авторы сего шедевра вместо CSS решили все рассчитывать на JS. Не удивительно, что все тормозит.