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

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

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

Лучше всего использовать плагины jQuery и CSS, чтобы не перегружать веб-страницу расширенным кодом. Плагины распределяют интерактивные элементы по слоям и «учат» посадочную страницу реагировать на прокрутку (скроллинг).

Виды параллакса на посадочных страницах

  1. Вертикальный. Движение происходит по оси Х сверху вниз. Мы привыкли скролить именно таким образом, но человек двигается по горизонтальной плоскости, поэтому такой вид параллакса выглядит самым штучным в сравнении с другими, несмотря на свою популярность.
  2. Горизонтальный. Чувство, будто ты скейтер и вылетаешь далеко за пределы трамплина, вернее, за пределы экрана! Будьте осторожны с оптимизацией такого параллакса для разных гаджетов. Для мобильного браузера такой jQuery код слишком сложный. Весомый плюс это то, что на планшетах с таким типом не возникнет никаких сложностей.
  3. Двумерный. Тут пользователю ничего не придется листать, он просто заходит и сразу замечает движение элементов или трехмерное пространство. Такое достигается благодаря еще одному обману нашего зрения: более размытые предметы мы воспринимаем, как отдаленные, а четкие – самые близкие к нам. Пользуйтесь инструментом blur, создавая трехмерные фоны к вашим посадочным страницам, и ваши усилия будут вознаграждены.

Используйте всевозможные ассоциации с вашим проектом и создавайте интерактивные элементы. Например, если ваша компания продает удочки, создайте имитацию богатого мира океана, в котором крокодилы лениво ползают по берегу, а киты плывут в направлении кнопки СТА (призыв к действию).

Что еще можно придумать с параллаксом

Несколько дополнительных хитростей:

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

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