@DarCKoder

Как верстать и программировать полноэкранные страницы?

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

Так же данная страница будет состоять из так называемых модулей(секций). Каждая секция равна ширине и высоте монитора.
Предполагается, что скролла не будет. Будет своеобразная навигация по странице.

Для большей ясности приведу пример:
При входе на сайт появляется шапка сайта с неким контентом.
С правой стороны будет меню, при нажатии на кнопки которого, будет производиться анимация на нужный блок.

Со скриптом всё ясно. Но с вёрсткой не пойму, как адаптировать таким образом, что бы не было нужды в скроллах.
Ссылки на Книги, статьи; своё мнение - буду благодарен, если поделитесь.
  • Вопрос задан
  • 1028 просмотров
Решения вопроса 1
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
для всей страницы: overflow:hidden
для блока:
width: 100vw;
height:100vh;
position:absolute;
top:0px;
left:0px;
дальше, visibility переключаем у блоков через смену класса и всё.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
Ответ написан
Комментировать
@LiguidCool
проблема в том, что бы адаптировать контент.

поверьте, не у вас одного

Так же данная страница будет состоять из так называемых модулей(секций). Каждая секция равна ширине и высоте монитора.

  • содержимое хранится в JS и подменяется при кликах / событиях шаблнизатором
  • пользуются специальные плагины, например как написал iBird Rose alvarotrigo.com/fullPage
  • содержимое хранится в скрытых дивах, управляется собственно видимостью нужного блока
Но с вёрсткой не пойму, как адаптировать таким образом, что бы не было нужды в скроллах.

Ну на самом деле вариантов вагон. По факту вам нужна "резиновая верстка", но строгой реализации нет - все зависит от контента.

PS
Думаю для такого приложения неплохо зайдет React.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы