X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2018-12-11
  • 5253 просмотр

    1 комментарий

  • Дизайн и разработка сайта

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

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

Параллакс



Пример

Чтобы добиться такого эффекта, как обычно нужно выполнить несколько шагов. Первое что нужно сделать убедится в том что на сайте подключена библиотека 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;
}

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

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

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 13, в среднем: 5 из 5
Читайте также
Опубликован 1 комментарий

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

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.