Чтобы добиться такого эффекта, как обычно нужно выполнить несколько шагов. Первое что нужно сделать убедится в том что на сайте подключена библиотека jQuery. Если это не сделано, то нужно в шапке сайта перед тегом /head или в подвале перед /body добавить такую строку:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Если что-то похожее уже есть, то делать этого не надо. Далее подключаем сам скрипт, который будет осуществлять эффект параллакса. Скрипт приведен ниже, но подключить его можно двумя способами.
$(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, добавить код в него, а после подключить сразу после библиотеки из предыдущего шага.
<script src="script.js"></script>
Второй способ, заключить его в теги и тоже добавить после библиотеки.
<script> //СЮДА КОД </script>
В третей строке кода определено, что ко всем блокам с data-type="background" будет применен эффект параллакса. Применяется это примерно так. Например у Вас есть два блока и им нужно задать эффект параллакса.
<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 для фоновой картинки иначе параллакс не сработает. В стилях ниже видно пример.
#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;
}
Вот по сути и все. Количество блоков у которых к фону будет применен параллакс, может быть каким угодно, все зависит от ваших нужд. Сделайте все правильно и получите отличный результат.
На этом все, спасибо за внимание. 🙂
