Комментарии 28
Это решение интересное, но его надо дорабатывать. Динамически подгружать нужные страницы.
Сейчас реализация такая, что весь контент на одной странице. Если заменить просто текст на полноценные статьи, например из Т—Ж, то мы никогда не дождёмся загрузки страницы. Надо скелетоны, а при скролле подгружать контент уже или как-то более разумно.
Как концепция интересно. Много лет назад делали так журнал, но переходы по страницам были. Одна статья, одна страница.
Естественно это только концепция. Её уже можно дорабатывать под конкретные задачи добавляя элементы интерфейса, динамическую загрузку и ссылки на индивидуальные страницы статей.
Очень интересное решение горизонтального блога. Дизайнер использовал свободное пространство для отображения заголовков.
Не хватает автоматического выравнивания. В вертикальном режиме сайт уже работает как обычный хотя перелистывание можно было бы оставить. Идея уже развита до полноценного сайта.
Навигация судя по всему работает в основном на JavaScript. Я старался использовать только CSS. Возможно прилипание заголовков как в этом блоге можно реализовать при помощи position: sticky. Надо изучать этот вопрос.
Хорошее решение, amp использует её
Визуально страница не выглядит так, чтобы возникла мысль о задействовании горизонтальной прокрутки. Я открыл демо и сразу не понял, что именно мне показать хотели? Потом уже всмотревшись увидел, что там внизу горизонтальная прокрутка, которую совершенно не ожидаешь там.
ИМХО, решение оправдано скорей для небольших блоков текста, как сейчас реализуют в слайдерах и должны быть по бокам визуально стрелки < > крупные, как в слайдерах.
решение оправдано скорей для небольших блоков текста
Почему именно для небольших? Я наоборот решил использовать горизонталь чтобы более эффективно расположить статьи. Если блоки будут небольшие то их хоть вертикально хоть горизонтально располагай никакой разницы. А так вертикальная прокрутка работает как обычно для прокрутки текста а горизонтальная перелистывает статьи.
должны быть по бокам визуально стрелки
Это я оставляю на дизайнера который использует эту концепцию на реальном сайте.
Почему именно для небольших? Я наоборот решил использовать горизонталь чтобы более эффективно расположить статьи.Потому что статья — это самостоятельная сущность, откуда вытекает:
1) Вместе с иллюстрациями она тянет на не малый вес и грузить сразу несколько не самая хорошая идея
2) Как добавить конкретную статью из показываемого набора в закладки, отправить на нее ссылку другу?
3) Как мне открыть конкретную статью в отдельной вкладке браузера?
1) Вместе с иллюстрациями она тянет на не малый вес и грузить сразу несколько не самая хорошая идея
Для изображений теперь есть атрибут loading со значением lazy чтобы картинка загружалась только попадая в область видимости.
2) Как добавить конкретную статью из показываемого набора в закладки, отправить на нее ссылку другу?
Статья по прежнему может иметь свою отдельную страницу на которую может быть ссылка с заголовка или другого элемента интерфейса. Но также можно использовать и якорь(ссылку на фрагмент).
Задаём каждой статье аттрибут id и используем этот id в ссылке на статью. Браузер автоматом прокрутит до неё.
Добавляем id в html:
<article class="hb-page" id="Lorem-ipsum-dolor-sit-amet">
<h1>Lorem ipsum dolor sit amet</h1>Пример ссылки: https://example.com/horizontal-blog.html#Lorem-ipsum-dolor-sit-amet
3) Как мне открыть конкретную статью в отдельной вкладке браузера?
Соответственно тыкнув по ссылке на статью.
Для изображений теперь есть атрибут loading со значением lazy чтобы картинка загружалась только попадая в область видимости.Ага, вот я сейчас на медленном мобильном соединении, я открываю статьи в новых вкладках и пока они прогружаются изучаю то что уже прогружено. С ленивой загрузкой мне их после открытия в новой вкладке еще надо все промотать чтобы изображения прогружаться начали?
PS: Кстати, а чем Вам идея интерфейса Tab'ов не нравится? Ее преимущество в данном случае будет в том, что можно сразу показать явные заголовки у табов и не возникает путаницы, где я вообще сейчас нахожусь и как сюда попал.
С ленивой загрузкой мне их после открытия в новой вкладке еще надо все промотать чтобы изображения прогружаться начали?
Да видимо так.
Кстати, а чем Вам идея интерфейса Tab'ов не нравится?
На планшете/телефоне надо экономить пространство экрана а кнопки должны быть достаточно большими чтобы на них пальцем попадать.
3) Как мне открыть конкретную статью в отдельной вкладке браузера?
У меня оказывается даже остались артефакты экспериментов так что у одной статьи в примере остался id и можно протестировать ссылку на статью на живом примере.
Ссылка: Elit scelerisque mauris pellentesque pulvinar pellentesque habitant
Я ненавижу работать мышью, все что можно сделать клавиатурой, лучше сделать клавиатурой, чем тянуться к мыши. Так вот, я бы хотел чтобы клавиша вправо листала на следующую статью, клавиши вверх и вниз листали соответственно статью.
Сейчас, браузер Opera. Изначально вправо-влево по клавишам не работает. Нажимаешь мышью на скрол снизу, листает, ну это как бы нормально. Но вверх-вниз не листает.
Если мышью нажмешь на статью, то листает вверх вниз клавишей, и можно даже уйти на одну статью вправо или влево, и в следующей статье вверх-вниз работает, но дальше уже вправо-влево не работает :( а так супер!!! я бы себе наверное такое прикрутил даже.
В демке проблема, что если я хочу пропустить статью, и сразу перейти от 1 к 3, то я все равно должен ждать пока оно повисит на второй, игнорируя мои попытки проскроллить дальше, и только потом перейдет на 3ю (Firefox 84.0.1).
Во всяком случае, так происходит при нажатии на кнопку вправо/влево и при использовании качающегося колесика. А вот при тыкании мышкой в горизонтальный скроллбар работает быстро.
Также как и в хроме нужно листать рывками:
- Крутануть чуть
- Подождать выравнивания на следующую статью
- Повторить
Хром просто не выравнивает до остановки прокрутки а фаерфокс выравнивает сразу но прокрутка видимо как бы продолжается будто выравнивания небыло.
Стрелки походу "пофиксили" в этой версии. Раньше стрелками можно было быстро перелистывать.
Как вариант можно отключить плавную прокрутку и тогда можно будет прокрутить сразу несколько статей но они будут при этом резко переключаться.
Можете протестить ещё этот пример: https://ivan386.github.io/css-horizontal-blog/horizontal-blog-demo-habr.html
Здесь стрелки уже быстрее перелистывают. Пока не изучил что на это повлияло.
Горизонтальный блог