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

Віталий

9 років ago

Доброго времени суток 🙂

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

Чтобы добиться такого эффекта, как обычно нужно выполнить несколько шагов. Первое что нужно сделать убедится в том что на сайте подключена библиотека jQuery. Если это не сделано, то нужно в шапке сайта перед тегом /head или в подвале перед /body добавить такую строку:

<script src="https://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;
}

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

На этом все, спасибо за внимание. 🙂

Exit mobile version