Топ-10 лендингов и сайтов с параллакс-скроллингом
Параллакс-скроллинг — техника, ставшая мейнстримом веб-дизайна за последние годы. Она представляет движение элементов на переднем плане фонового изображения (которое перемещается медленнее). Это создает 3D-эффект и ощущение «глубины» при прокрутке страницы вниз. Правильное использование параллакса улучшает внешний вид ресурса — и эта техника действительно впечатляет.
Многие компании уже применяют параллакс на своих лендингах, другие только начинают внедрять ее для улучшения UX. Предлагаем ТОП-10 действительно крутых примеров.
1. Porshe Volution
Производитель машин класса люкс демонстрирует разные модели на своем ресурсе, располагая их на временной шкале от раритетных до новейших авто. Сайт полностью увлекает пользователя, позволяя своими глазами увидеть, как развивался именитый бренд с течением времени. Кроме того, вы можете «подглядеть» дизайн модели 2020 года.
2. Feed Music
Вторую строчку занимает музыкальный сайт Feed Music — его посетителей встречает вдохновляющая цитата Пауло Коэльо. Интерфейс позволяет легко перемещаться по верхней части страницы и изучать различные секции сайта. Можно посмотреть яркое вступительное видео, прокрутив страницу вниз. Вся информация появляется прямо перед глазами, на расстоянии одного клика. Очень впечатляюще.
Когда вы хотите чего-то, вся Вселенная вступает в сговор, чтобы помочь вам этого достичь.
3. Flash vs. HTML
Третьим пунктом идет сайт, описывающий различия Flash и HTML. Внешний вид ресурса превосходный — страница разделена на две равные части, где левая сторона посвящена Flash, а правая – HTML5. Вы можете поиграть в «WASTE INVADERS», выбрать любимую версию и скачать приложения для Android или Apple.
4. Life of Pi
Потрясающий сайт обладателя четырех премий американской киноакадемии, фильма «Жизнь Пи», занимает четвертое место в нашем списке. Путь выживания Пи Пателя после кораблекрушения и его авантюрная история передается с помощью захватывающей графики. Прокрутите вниз, чтобы познакомиться с этой невероятной историей благодаря яркому визуальному контенту и параллакс-эффектам.
5. Bose
Ведущая компания-производитель бытовой электроники Bose разработала простой, но интересный ресурс в двух языковых версиях — английской и французской. Сайт выполнен красиво, с эффектом параллакса, где вся информация содержится на главной странице. Выберите конкретный раздел и просматривайте различные секции с фантастической вертикальной параллакс-прокруткой.
6. NASA Prospect
Еще один прекрасный пример параллакс-дизайна — сайт NASA Prospect, который предлагает межгалактическое путешествие с аудиовизуальными эффектами. На ресурсе описывается история космонавта, собирающего золотые артефакты по всей Солнечной системе. Продолжайте прокручивать, следуя за находящемся в свободном падении астронавтом Николасом и роботом-помощником Эмой.
7. The Boat
Сборник коротких рассказов Нама Ли (Nam Le), адаптированных SBS в аудиовизуальную графическую историю «Лодка», может похвастаться интересным дизайном сайта. Компания SBS сделала ресурс полностью интерактивным с помощью известного австралийского дизайнера звуковых фильмов Сэма Петти (Sam Petty). Вся история поделена на 6 глав, и каждый параллакс-слайд демонстрирует отдельную главу с помощью движущихся слоев — что создает ощущение глубины. Выберите один из параметров — звук, автопрокручивание и полноэкранный режим, и наслаждайтесь историей.
8. Lix Pen
Будущее настало — теперь мы можем писать прямо по воздуху с помощью Lix. Эта 3D-ручка воплотила идею о том, что маленькие вещи могут нести большие смыслы. Эту идею иллюстрирует параллакс-дизайн. Взгляните, какие формы можно создавать с помощью этой технологии.
9. Invstr
Мобильное приложение The market investment делает сложную финансовую информацию доступной простым пользователям. Интерфейс предлагает воспользоваться прокруткой для обучения и игры. Сат дает доступ к высококачественному, интуитивно-понятному контенту. Приложение анонсирует социальную революцию, которую только предстоит пережить финансовой индустрии.
10. Walking Dead
Вы когда-нибудь проводили время за охотой живых мертвецов? Если нет, то вы посетите сайт «The Walking Dead» с параллакс-эффектом. Ресурс продвигает американский хоррор-сериал с помощью современных интернет-технологий.
Все повествование и взаимодействие с ресурсом построено на горизонтальном скроллинге и качественной анимации.
Другая сторона медали
Параллакс и анимация невероятно полезны для оптимизации пользовательского опыта (UX). Но если злоупотреблять этой технологией, она может негативно повлиять на показатели.
Чтобы создать яркий и самобытный лендинг или сайт, вы должны хорошо понимать принципы параллакс-дизайна и обладать должным чувством меры. В противном случае, технология катастрофически ударит по UX. Если сомневаетесь в своих навыках — обратитесь к профессионалам.
В галерее макетов LPgenerator представлены готовые параллакс-лендинги, которые вы можете начать использовать прямо сейчас. Если вам кажется, что подобный эффект сложен в реализации, то почитайте в нашем блоге, как добавить параллакс-эффект на лендинг — «прикрутить» модную фичу на ваш сайт можно в нашем редакторе буквально за пару минут.
Знакомство с Parallax Scrolling
Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.
Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.
Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.
Наверное, вы заметили, что во время прокрутки страницы сайта вниз несколько различных элементов, находящихся на этой странице, двигаются с разной скоростью. Давайте для примера возьмем страницу, отображенную на картинке сверху. По мере прокрутки страницы вниз вы увидите, что голубые точки в фоне (те, которые немного размыты), двигаются с той же скоростью, что и скроллбар. Также, вы увидите, что группа голубых точек, которые более сфокусированы и лежат на переднем плане, двигаются с немного большей скоростью, чем скроллбар. Быстрее этих точек двигается текст “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” и главный заголовок страницы “Products”. И, наконец, есть изображения самого продукта, как маленькие и расфокусированные в фоне, так и большие, сфокусированные и лежащие на переднем плане. Фоновые изображения продуктов двигаются с той же скоростью, что и текст, в то время как изображения продуктов на переднем плане двигаются быстрее этого текста. Это все и является идеальной демонстрацией параллакс-скроллинга, когда разные слои изображений накладываются друг на друга и все движутся с разной скоростью при прокрутке страницы, создавая эффект трехмерности.
Параллакс-скроллинг не ограничивается только вертикальным скроллом страницы или скроллингом по прямой линии. Отдадим право Nintendo для демонстрации идеального примера, подтверждающего это утверждение. Вспомните ранние игры Nintendo, где наши герои обычно двигались горизонтально слева направо вдоль экрана, а не вертикально вниз, как мы видели это на сайте Activate выше. Прокатитесь на MarkioKart Wii и давайте поговорим о некоторых клевых штуках, которые мы там можно увидеть.
Первую вещь, которую вы заметите, это направление скроллинга страницы — оно не вертикальное, а как сказано выше, а изначально горизонтальное. Конечно, это круто, но это также не новый концепт. Также, вы заметите параллакс-эффект с динозавром Йоши и панцирями на фоне, Марио и Луиджи на переднем плане и основным контентом, которые смещаются с разной скоростью при прокрутке. Но как только вы доедете до страниц #highlights и #attack, траектория смещения перестанет быть идеально горизонтальной. То же самое касается перехода между страницами #rediscover и #snes. Изображения не только сохраняют свою разную скорость смещения, но и меняют общее направление с горизонтального на вертикальное.
Стоит также отметить, что использование эффекта параллакса на вашем сайте не должно быть ограничено лишь возможностью создания искусственного 3D-эффекта. Сайт немецкой студии веб-дизайна Webseitenfactory является примером того, как можно использовать параллакс для добавления различных эффектов на страницу сайта, например движение иконок по разным траекториям, их увеличение и уменьшение по мере скроллинга сайта.
Параллакс-скроллинг также может помочь оживить сайт, на котором не особо много контента. Что если весь ваш сайт состоит из mission statement, или раздела about us, плюс контактная информация? Скорее всего, вы бы могли сделать это одной страницей и при определенных условиях у вас бы получился неплохой одностраничный сайт, но запомнится ли он посетителям? Скорее всего, нет. Но что если добавить к нему немного параллакса, как это сделал народ на Spring / Summer ?
Моим первым впечатлением было “О, этот сайт выглядит симпатично”. Но когда я начал его скролить, впечатление сразу же стало “Вау, этот сайт крут!”. Добавление простого параллакс-эффекта как раз делает разницу между неплохим и запоминающимся.
Параллакс-скроллинг — это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.
Digest #2: изучаем виды скроллинга и признаки доступного сайта
Коснёмся темы юзабилити и обсудим два вопроса: как можно организовать прокрутку страниц и что поможет сделать сайт по-настоящему доступным для всех пользователей.
4 типа скроллинга (и их предназначение)
Кроме привычного нам простого скроллинга страниц сверху вниз, существуют и другие варианты прокрутки. Каждый из них может стать изюминкой вашего сайта.
Горизонтальный скроллинг
Прокрутка страниц слева направо используется гораздо реже, чем сверху вниз — и, возможно, зря. Такой способ просмотра подходит для сайтов с большим количеством фото и видео или с представлением контента в виде слайд-шоу. Однако если речь идёт о страницах, где преобладает текст, то горизонтального скроллинга лучше избегать.
Пользователи ПК могут не сразу понять, что страница прокручивается слева направо, поэтому больше всего горизонтальный просмотр подходит для мобильных версий сайтов. А чтобы сразу дать понять аудитории, где находится продолжение страницы, можно добавить указатели в виде стрелок.
Длинный скроллинг
Раньше, как правило, каждый раздел сайта размещался на отдельной странице, ссылка на которую помещалась в меню на главной. Теперь чаще встречаются одностраничные сайты, где все разделы расположены один за другим. В таких случаях и используется длинный скроллинг. Пользователь пролистывает экран за экраном, не отвлекаясь на переходы по ссылкам.
Длинная прокрутка удобна, когда нужно рассказать длинную историю и дополнить её красивой анимацией или когда необходимо показать фотоподборки и инфографику. Выглядит такой скроллинг красиво, но у него есть минусы: загружаются страницы с длинной прокруткой дольше, а ориентироваться на них посетителям сложнее. Поэтому здесь тоже позаботьтесь о навигации.
Бесконечный скроллинг
Все листали новостную ленту во «ВКонтакте» или в Instagram? Это и есть пример бесконечной прокрутки, когда контент на странице не кончается и «подвала» у сайта просто нет. Если у вас много разного контента и вы хотите дать возможность пользователю погрузиться в него с головой, присмотритесь к такому варианту.
Здесь снова нужно не забывать о хорошей навигации. Также бесконечные ленты контента могут быть слишком тяжеловесными для старых устройств, из-за чего страница может «притормаживать» при просмотре — это следует учитывать.
При параллакс-скроллинге сайт как будто разбивается на несколько слоёв
Параллакс-скроллинг
Параллакс-эффект заключается в движении переднего и заднего фона с разной скоростью. Такой ход придаёт прокрутке динамичности и удерживает внимание пользователя, особенно когда вместе с параллаксом используется дополнительная анимация.
Использование параллакс-эффекта может увеличить время загрузки страницы. К тому же движение элементов с разными скоростями иногда отвлекает от сути, которую вы стремитесь донести до аудитории. Так что используйте параллакс в меру: в небольших количествах он вряд ли кому-то навредит.
Возможно, вашему сайту вовсе и не нужны нестандартные варианты скроллинга. Но если перед вами стоит задача сделать сайт увлекательным или наглядно и ярко представить на нём тот или иной контент, то обязательно поэкспериментируйте со способами прокрутки.
Как сделать сайт понятнее и доступнее
Люди принадлежат к разным культурам, говорят на разных языках, по-своему воспринимают мир и имеют свои ограничения по здоровью. Чтобы вашим сайтом могли воспользоваться 100% вашей потенциальной аудитории, сделайте его доступнее для разных пользователей, вне зависимости от их особенностей.
Согласно Положению о доступности веб-контента, выделяются четыре принципа доступности сайта. Чтобы соответствовать им, сайт должен быть.
. доступным для восприятия.
Пользователи с нарушениями зрения просматривают сайты с помощью программ для чтения с экрана. Что показано на картинках и фотографиях, им известно только из содержания тега «alt» в коде изображения. Если этот тег оставить пустым, для некоторых людей ваши иллюстрации останутся загадкой. Это лишь один из примеров неприспособленности сайта для всех без исключения категорий пользователей.
. доступным для использования.
Откройте в новом окне этот сайт. На первый взгляд никакие проблемы с навигацией на нём не видны. Но для некоторых пользователей с ограниченными возможностями такие проблемы на этом сайте очевидны. Например, управление клавишами здесь не работает, а значит, люди с нарушениями зрения или моторики его посмотреть не смогут.
К этому же пункту относится и тема капчи. Не все пользователи имеют возможность рассмотреть искажённые символы на экране и вписать их в поле ввода. В связи с этим появились аудиокапчи и проверки формата reCAPTCHA.
Такую капчу проходить гораздо удобнее
. понятным.
Для охвата мультиязычной аудитории сайт должен иметь альтернативные версии на необходимых языках или быть доступным для перевода онлайн-инструментами. Чтобы страницу можно было перевести онлайн, сделайте так, чтобы текст не был частью изображения — иначе его не получится считать. Также доносите информацию не только через текст, но и через визуальные образы, будь то фотографии или иконки.
Здесь же упомянем о случаях, когда пользователь не понимает, как произвести нужное действие и что произошло после его действия. Обозначайте элементы на странице доступным образом и сообщайте юзеру о сути ошибки, если он сделал что-то неверно.
. адаптированным к разному ПО.
Сайт должен открываться при использовании любого программного обеспечения, которое предназначено для просмотра сайтов. Достаточно позаботиться о чистоте и работоспособности кода, чтобы в целом соответствовать этому принципу.
Некоторые советы по повышению доступности сайта уже прозвучали, добавим к ним ещё несколько: