Как сделать такое переключение?

Question

[Кирилл Абдулов]

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

Comments

[Froggyweb]

не вкладки табы кончечно могут помочь, но своего js/css тоже придется написать норм.
если сайт весь такой стоит посмотреть в сторону vue.js или react.js но там свои нюансы, которые стоит обговорить с заказчиком

[Rustam Bainazarov]

Это не вопрос для данного ресурса. Такого уровня интеракции, чтобы было в точности как на видео, — это достаточно долго и на JS. Библиотеки типа GSAP колоссально упрощают задачу, но готовых решений не дают. Если оставить только плавную смену слайда и анимацию заголовков, то можно сделать достаточно просто. В любом случае, объём вопроса намекает на фриланс.

[Кирилл Абдулов]

Froggyweb, а если табы с помощью jquery?

[Кирилл Абдулов]

Рустам Байназаров, так мне и не нужно чтобы было в точности как на картинке, мне нужен просто такой сайдбар, и плавное переключение, такое можно скорее всего реализовать используя табы, но как сделать я не знаю, вот и задаю вопрос на данном ресурсе. А видео прикрепил чтобы вы увидели как эти табы-вкладки работают

Answer 1

[strelok011]

1. Подобное поведение подразумевает работу в одном окне без перезагрузок.
Из этого вытекает применение либо табов, либо js фреймворков. Табы - все страницы грузятся сразу (оооо...) либо аксом (еще страшнее)...

2. Подобная анимация - самостоятельное зло. Очень спорный UX (заказчик правда верит, что летающий заголовок поможет продать тачку???), плюс большой обьем работы фронта. Готовых решений нет, т.к. это не типовая задача, так что за как - платят зарплату.
Особенно интересно посмотреть, как это будет себя вести на произвольных размерах окна браузера и высоты контента. Почему бы тогда не на канве сайт запилить?

Comments

[Кирилл Абдулов]

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

[strelok011]

В общем, если без анимации заголовка - всё ложится в кейс табов. Но реализация навигации на табах - либо все данные всех страниц грузятся сразу, либо на ajax либо фреймворках подтягиваются/создаются в момент клика по навигации.

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