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 комментариев

  1. Дмитрий Давыдов

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

  2. Дмитрий Давыдов

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

  3. Дмитрий Давыдов

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

  4. Дмитрий Давыдов

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

  5. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  6. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  7. Дмитрий Давыдов

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

  8. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  9. Дмитрий Давыдов

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

  10. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

    2. Дмитрий Давыдов

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

  11. Дмитрий Давыдов

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

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности