Последние несколько лет в области веб-дизайна появляются новые тенденции. Одна из них - размещение основного контента на одной странице и использование динамических скроллинг-анимаций для отдельных разделов сайта. Разметки такого типа часто применяют для целевых страниц и мобильных приложений, которые содержат небольшой объем информации.
В этой статье я расскажу об интересных приемах, которые вы увидите на одностраничных сайтах. Надеюсь, эти идеи помогут молодым дизайнерам, которые хотят сделать что-то подобное.
Эффект параллакс-скроллинга
Параллакс-скроллинг по-прежнему воспринимается дизайнерами как довольно новый прием, возможно, из-за трудностей при его создании. Я видел десятки классных примеров, но Pixel Stadium действительно выделяется на общем фоне. Это сайт с простой навигацией и просто невероятными текстурами.
Когда вы проматываете сайт вниз, строка навигации остается вверху окна. Это позволяет легко переходить на разные разделы. Разметка полностью адаптивна для мобильных девайсов и приспособится к ширине вашего браузера.
Целевые страницы для мобильных приложений
Мобильные смартфоны занимают сформировали нишу в веб-дизайне. Сайты мобильных приложений часто размещаются на одной странице. Сделать их проще, да и смотрятся намного лучше.
Минималистичный сайт Infomatic App служит не только для представления информации, но и для стимулирования продаж – одностраничный сайт с этим отлично справляется.
Скрытые строки навигации
Для экономии пространства на экране существует разметка с дополнительными скроллинг-строками, которые появляются только при прокрутке страницы вниз. Их называют скрытыми, поскольку они заметны лишь тогда, когда верхняя строка навигации становится вне зоны видимости. Веб-сайт для Radiologie прекрасно демонстрирует эту технику.
Всегда хорошо смотрится, если строка навигации сочетается с темой сайта. Но поскольку она не меняется на странице, теоретически вы можете использовать разные стили дизайна. Один из удачных примеров можно увидеть на Rule of Three.
Это сайт для профессиональных копирайтеров, выполненный в темной цветовой схеме. Прокрутив страницу вниз, вы заметите сверху строку навигации на темном фоне, при этом сама страница станет белой. Такой вариант идеально подходит, чтобы сделать навигацию броской.
Динамические анимации
Процесс создания собственной динамической анимации на странице бывает утомительным. Я не рекомендую этот путь новичкам в работе с JavaScript, но в то же время так вы сможете приобрести полезный навык. Для примера, сайт FK-Agency.
Этот сайт масштабируется как вертикально, так и горизонтально. Обратите внимание, что вы не можете прокручивать страницу вверх/вниз в разметке, и вам придется перемещаться, используя слайдинг страницы и ссылки навигации.
Горизонтальные скользящие панели
Этот прием похож на динамические анимации, но для горизонтальных панелей можно найти больше плагинов в открытом доступе – просто введите запрос в Google. Здесь дело не в том, как создать такие панели, а в том, как сделать это стильно.
Numidia – один из сайтов, который меня поразил. Значки навигации справа вверху на самом деле создают эффект горизонтального слайдинга. Благодаря jQuery эти коды применимы для всех основных браузеров.
Галерея примеров для вдохновения
Эта галерея – коллекция различных одностраничных сайтов, достойных вашего внимания. Отметьте для себя разные приемы для создания пользовательского интерфейса.
Источник:
Автор: Jake Rocheleau
Добавить комментарий