Parallax эффект на landing page

Параллакс эффект на фонВсем привет. Сегодня расскажу вам о небольшом скрипте для создания простого parallax эффекта.

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

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

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

Как сделать параллакс эффект на сайте

Итак, первым делом подключаем библиотеку jquery. Как обычно, между тегами head:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Теперь, нужно скачать подключить скрипт Simple Parallax Scrolling. Я рекомендую использовать сразу сжатую версию, так как дополнительных настроек внутри скрипта делать не понадобится:

<script src="js/parallax.min.js"></script>

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

<header class="head" data-parallax="scroll" data-image-src="images/bg.png">
 <h1>Smartlanding</h1>
 <h2>Создание landing page</h2>
</header>

Я создал шапку сайта (class="head") и добавил 2 обязательных атрибута:

data-parallax="scroll"

и

data-image-src="путь к картинке/bg.png"

Обратите внимание, что картинка не кладется в шапку при помощи тега img, а задается непосредственно в атрибутом в том контейнере, в котором хотим реализовать parallax.

На этом, в принципе, можно заканчивать, но еще пару слов:

  • Если в dive, в котором хотим реализовать параллакс эффект нет других элементов, то необходимо задать ему высоту, иначе ничего не увидите.
  • В случае использования не адаптивного дизайна, можно задать ширину и высоту изображения прямо в html при помощи атрибутов naturalWidth и naturalHeight.
  • Можно двигать изображения при помощи атрибута data-position. Это аналог background-position в css.

С остальными опциями можете ознакомиться на официальной страничке проекта, которая указана выше.

На сегодня - все. Вот так просто можно реализовать простой вариант параллакс эффекта. Пока.

Скачать исходник

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 16

  1. ВЛАД

    Спасибо вам большое, как же давно я его искал )

  2. Виталий

    Вот бы увидеть в ближайшее время урок о создании эффекта параллакса с привязкой к курсору мышки… 🙂

  3. Михаил

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

  4. Михаил

    Кстати, нашел интересный конструктов параллакс эффектов, с довольно широким диапазоном настроек — online-convert.ru/Parallax_wysiwyg_for_free.htm#sthash.VHo9fKAd.dpbs

  5. Вася

    Ничего не показывается в исходнике, надо походу как то инициировать скрипт, правильно? А у вас ни слова об этом

    • dimadv7

      В смысле, «ничего не показывается»? Нет, не правильно, нужно всего лишь запустить на сервере.

  6. Даша

    хм… у меня даже ваш пример не работает

    • dimadv7

      На сервере тестировать нужно.

  7. Вика

    Большущее спасибо! =))

  8. Вика

    На планшете не работает параллакс(

    • dimadv7

      Действительно так, не проверял на мобильных устройствах. Если есть желание, попробуй parallax.js Тут точно работает) Позже, может и статью напишу на эту тему

  9. Вика

    Спасибо! Буду пробовать

  10. Андрей

    Не работает пример. На компьютере, браузер Firefox.

    • Евгения

      У всех работает, у тебя — не работает… У меня работает во всех браузерах

    • dimadv7

      Подтверждаю, у меня тоже во во всех, но в IE — не тестил

  11. Алексей

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

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