Smartlanding

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.

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

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

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

16 комментариев

  • ВЛАД

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

    Ответить
  • Виталий

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

    Ответить
  • Михаил

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

    Ответить
  • Михаил

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

    Ответить
  • Вася

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

    Ответить
  • dimadv7

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

    Ответить
  • Даша

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

    Ответить
  • dimadv7

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

    Ответить
  • Вика

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

    Ответить
  • Вика

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

    Ответить
  • dimadv7

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

    Ответить
  • Вика

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

    Ответить
  • Андрей

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

    Ответить
  • Евгения

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

    Ответить
  • dimadv7

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

    Ответить
  • Алексей

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

    Ответить

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