—»     —»   5 эффективных методов использовать параллакс-скроллинг
  Раздел: Web-дизайн   Нет комментариев  

5 эффективных методов использовать параллакс-скроллинг



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

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

Развлечение

Чтобы эта техника сработала, недостаточно просто использовать визуальное оформление, важно придумать какой-то сюжет.

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

Повествование

Людям важно ощущать, что у дизайна есть история: что бы вы ни делали для этого дизайна, это должно вызывать какие-то эмоции и ощущения у посетителей. Вы можете усилить эффект посредством рассказа некого рода истории.

Постарайтесь вспомнить сайты, которые запомнились вам. Возможно, сейчас вы сможете понять, что на самом деле этот сайт рассказывал вам историю.

5 достойных примеров

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

5 эффективных методов использовать параллакс-скроллинг

2. Beercamp. Интерактивная студия, ежегодно устраивающая вечеринку SXSW. Сайт был создан в поддержку события 2011 года.

5 эффективных методов использовать параллакс-скроллинг

3. Campaign Monitor. Когда разработчики приложения email-маркетинга под названия Campaign Monitor собрались нанимать новый персонал, они создали отличный веб-сайт с параллакс скроллингом, который как рассказывает о том, каково это – работать в этой компании.

5 эффективных методов использовать параллакс-скроллинг

4. Smokey Bones. Сеть ресторанов Smokey Bones использует сайт с эффектом параллакса для того, чтобы рассказать об атмосфере в ресторанах.

5 эффективных методов использовать параллакс-скроллинг

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

5 эффективных методов использовать параллакс-скроллинг
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: parallax
Опубликовал Design FactoRy   Прочитано (раз): 7334   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2018    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
2627282930