Изменение цвета фона страницы с эффектом размытия в зависимости от изображения слайдера

Question

Можно ли получить подобный эффект с помощью JavaScript или CSS? Что будет лучшим методом для достижения этого эффекта.

По сути, он меняет цвет фона страницы с хорошим эффектом размытия в зависимости от изображения слайдера.

Смотрите пример: http://www.gog.com/ слайдер домашней страницы. (Я считаю, что они просто создают фоновое изображение в фотошопе для каждого изображения слайдера.

http://images-1.gog.com/23382bd5e4e5deb7036d68e04286120df2a1d424881fcafb21ecd2c9a5c24ab5_bg_1920.jpg

http://images-2.gog.com/a88f5d7a5161fb204d2f78adf14eea73e03dde54eb8ab516e50b077dcbb72cba_bg_1920.jpg

http://images-3.gog.com/ab956772ba01063aadfb8cda56d2e9ed3a6e0abd1534ce94b5f3a524e085656f_bg_1920.jpg

Answer 1

Вот один из способов сделать это с помощью jQuery.

Он использует три фиксированной позиции div с, а затем он оживляет их непрозрачность.

$('button').click(function() {
  var id= 'd' + $(this).text().replace('Background ','');
  $('#d1, #d2, #d3').each(function() {
    $(this).animate({
      opacity: this.id===id ? 1 : 0
    });
  });
});

button {
  position: relative;
}

#d1, #d2, #d3 {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

#d1 {
  background-image: url("http://images-1.gog.com/23382bd5e4e5deb7036d68e04286120df2a1d424881fcafb21ecd2c9a5c24ab5_bg_1920.jpg");
}

#d2 {
  background-image: url("http://images-2.gog.com/a88f5d7a5161fb204d2f78adf14eea73e03dde54eb8ab516e50b077dcbb72cba_bg_1920.jpg");
}

#d3 {
  background-image: url("http://images-3.gog.com/ab956772ba01063aadfb8cda56d2e9ed3a6e0abd1534ce94b5f3a524e085656f_bg_1920.jpg");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>

<button>Background 1</button>
<button>Background 2</button>
<button>Background 3</button>

Answer 2

$('button').click(function() {
  var id= 'd' + $(this).text().replace('Background ','');
  $('#d1, #d2, #d3').each(function() {
    $(this).animate({
      opacity: this.id===id ? 1 : 0
    });
  });
});

button {
  position: relative;
}

#d1, #d2, #d3 {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

#d1 {
  background-image: url("http://images-1.gog.com/23382bd5e4e5deb7036d68e04286120df2a1d424881fcafb21ecd2c9a5c24ab5_bg_1920.jpg");
}

#d2 {
  background-image: url("http://images-2.gog.com/a88f5d7a5161fb204d2f78adf14eea73e03dde54eb8ab516e50b077dcbb72cba_bg_1920.jpg");
}

#d3 {
  background-image: url("http://images-3.gog.com/ab956772ba01063aadfb8cda56d2e9ed3a6e0abd1534ce94b5f3a524e085656f_bg_1920.jpg");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>

<button>Background 1</button>
<button>Background 2</button>
<button>Background 3</button>