Главная » Веб-дизайн » Что такое параллакс эффект

Что такое параллакс эффект

Здравствуйте, сегодня я расскажу вам о довольно-таки новом и популярном направлении в web-дизайне как параллакс эффект. Если сказать своими словами, то  параллакс эффект — это интерактивный эффект дизайна сайта, позволяющий пользователю проследить за определенной историей, которую хочет донести до него автор.

Это достигается за счет таких приемов как неравномерное по скорости движение фона сайта (предположим это будет текстура неба) и объектов находящихся на нем (например, ракета). Итак, небо будет двигаться медленно во время скроллинга, а ракета, наоборот быстро, за счет чего будет достигнут 3d эффект. Второй прием — это интерактивная загрузка дополнительных объектов во время скроллинга по странице, например, у вас будет центральный объект, а во время скроллинга рядом с ним будут исчезать и появляться объекты с описанием свойств этого продукта.

Самый первый сайт с эффектом параллакс был разработан для компании Nike.

Что является главной целью параллакс эффекта? Думаю, произвести яркое впечатление на пользователя, тем самым привлечь большую аудиторию и заставить людей остаться на сайте. Рассказать пользователю определенную историю, шаг за шагом, в нужной последовательности.

Вот некоторые примеры сайтов с параллакс эффектом.

codetex.com

Skinjay

Так ли уж нужен параллакс эффект? Мое первое впечатление, когда я увидела сайт с параллакс эффектом — неразбериха. «Что, черт возьми происходит и куда все катится?!» Наверное, к этому нужно привыкнуть. Да, не спорю, сайт все же произвел впечатление «Вау», но все же, я считаю, что параллакс эффект в дизайне нужно использовать с осторожностью. Как говорится, хорошего понемногу. Одно дело если у вас информационный сайт или сайт презентация конкретного продукта, главной целью которого является представить продукт во всей красе, тем самым раскрутив его и повысив продажи (это как правило свойственно крупным и успешно-развивающимся компаниям), а другое дело если у вас скромный интернет-магазин с обширным каталогом товаров. Не более ли уместно здесь будет статичное и понятное спокойствие многостраничного сайта? Ведь сайт с параллакс эффектом это, как правило одностраничный сайт.

Приведу пример, как-то довелось мне наткнуться на интернет магазин, где я хотела заказать товар. Я достаточно долго копалась в каталоге товаров, выбрала все, что мне необходимо и нажала на кнопку «Заказать» и все куда-то поехало! Через минутное замешательство я поняла, что «приехала» к форме заказа, и, кстати говоря, путь был неблизкий. Я вспомнила, что забыла выбрать нужный товар, но необходимого функционала для возврата назад не было, а листать вверх у меня уже не было ни желания, ни времени — так интернет магазин потерял клиента.

Я считаю, что прежде чем кому-либо заказывать сайт с параллакс эффектом, нужно хорошенько подумать, есть ли у вас на это ресурсы — время, деньги, персонал и готовы ли вы четко продумать и представить всю логику своего проекта? А это очень важно. Никакой программист или дизайнер не знает вашей компании лучше чем вы и за вас он не придумает, что за чем должно следовать в истории вашего сайта. А вот здесь, как раз, большинство заказчиков и делает ошибку. Так что, по-моему лучше иметь обычный многостраничный сайт, понятный пользователю, чем непонятную параллакс самокрутку.

А вот если сайт с параллакс эффектом выполнен на совесть, понятно читается логика, не перегружен объектами, сохранен интуитивно понятный юзабилити, вот тогда все исполнители и заказчик достойны уважения!

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

Mycoach-app.ru

Например, на вышеуказанном сайте, созданном для замечательного мобильного приложения для фитнеса «Мой тренер» параллакс достигнут за счет постепенного скрытия слоем с текстом слоя со слайдером.

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

Стоит ли бояться дизайнерам параллакс эффекта? Думаю, что нет. Покапавшись в интернете я нашла несколько шаблонов сайтов с параллакс эффектом и обнаружила, что выполнены они в обычном стиле. Добавлены лишь слои с дополнительными объектами, которые могут появляться по ходу пролистывания страницы. Плюс, если у нас сайт со скроллингом шаблон выполнен в виде одной длинной страницы. А все дело в том, что добиться такого эффекта помогают новые технологии программирования, а не дизайна. А именно HTML 5 и CSS 3 и много другого. Как раз их появление и предопределило создание самого параллакс эффекта в web-индустрии. Ниже я приведу пример такого сайта и покажу, как выглядит его шаблон.

parallax effect (7)

Merry Christmas

Вот так выглядит шаблон этого сайта:

parallax effect (8)

Изначальный пример данного шаблона можно увидеть здесь. Это англоязычный сайт, где автор также рассказывает о том, что такое параллакс эффект.

Ну что же, надеюсь, я смогла пролить свет на то, что такое параллакс эффект и вы не будете бояться, когда заказчик попросит вас разработать дизайн такого сайта. Кстати, как я слышала от некоторых программистов, обычно просьба заказчика сделать такой сайт умещается во фразу, — «Мне нужен сайт на html5″… И программистам это очень не нравится. В это время они, скорее всего, закатывают глаза вверх и говорят, — «Послушайте, что вы подразумеваете под словами сайт на html5». В общем все как у нас, у дизайнеров при фразе «Ну сделайте мне красиво». Самой мне еще не доводилось разрабатывать дизайн сайта с параллакс эффектом. Но я уверена, что работа была бы интересной. Всего вам доброго и приятной работы!

P.S. Кстати, при открытии таких сайтов у меня все время начинает притормаживать браузер, к чему бы это… на интернет не жалуюсь!

(Visited 2 996 times, 1 visits today)

2 комментарии на “Что такое параллакс эффект

  1. На сайте Mycoach-app.ru параллакс, судя по всему, сломался. Так его там и не нашел.

    1. В доступных мне браузерах Opera и Chrom работает. Обратите внимание, как слой с описанием приложения перекрывает слайдер при прокрутке. Это и есть параллакс эффект.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *