Чтобы добиться такого эффекта, как обычно нужно выполнить несколько шагов. Первое что нужно сделать убедится в том что на сайте подключена библиотека jQuery. Если это не сделано, то нужно в шапке сайта перед тегом /head или в подвале перед /body добавить такую строку:
1 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
Если что-то похожее уже есть, то делать этого не надо. Далее подключаем сам скрипт, который будет осуществлять эффект параллакса. Скрипт приведен ниже, но подключить его можно двумя способами.
1 2 3 4 5 6 7 8 9 10 11 | $(document).ready(function(){ $window = $(window);$('div[data-type="background"]').each(function(){ var $bgobj = $(this); $(window).scroll(function() { var yPos = -($window.scrollTop() / $bgobj.data('speed')); var coords = '50% '+ yPos + 'px'; $bgobj.css({ backgroundPosition: coords }); }); }); }); |
Первый способ, создать файл, например script.js, добавить код в него, а после подключить сразу после библиотеки из предыдущего шага.
1 | <script src="script.js"></script> |
Второй способ, заключить его в теги и тоже добавить после библиотеки.
1 2 3 | <script>//СЮДА КОД</script> |
В третей строке кода определено, что ко всем блокам с data-type="background" будет применен эффект параллакса. Применяется это примерно так. Например у Вас есть два блока и им нужно задать эффект параллакса.
1 2 3 4 5 6 | <div id="one" data-speed="10" data-type="background">//Содержание блока</div><div id="two" data-speed="10" data-type="background">//Содержание блока</div> |
Как Видите обоим блокам мы задаем data-type="background", также указываем - data-speed, который по своей сути задаст скорость смещения фона относительно прокрутке. В скрипте что выше, идет вычисление и благодаря значению data-type меняется скорость прокрутки фона. Перепробовав много значений, я все таки остановился на 10, так эффект смотрится, по-моему лучше всего.
Последним штрихом будет, добавление стилей для наших двух блоков. Задавать Вы можете свои, данные показаны просто для примера. Главным условием, которое нужно задать обязательно это параметр - fixed для фоновой картинки иначе параллакс не сработает. В стилях ниже видно пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #one { background: url(1.jpg) no-repeat center top fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size:cover;background-size:cover; height: 800px; margin: 0 auto; width: 100%; position: relative;}#two { background: url(2.jpg) no-repeat center top fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size:cover;background-size:cover; height: 800px; margin: 0 auto; width: 100%; position: relative;} |
Вот по сути и все. Количество блоков у которых к фону будет применен параллакс, может быть каким угодно, все зависит от ваших нужд. Сделайте все правильно и получите отличный результат.
На этом все, спасибо за внимание. 🙂
