Photoshop Question posted in
The official user guide can be found here.

Changing page background color with blur effect depending on slider image – Photoshop

Is it possible to get a similar effect with JavaScript or CSS ? What would be the best method to accomplish this effect.

Basically what it does is it changes the background color of the page with some nice blur effect depending on the slider image.

See the example : http://www.gog.com home page slider. (I believe they are simply creating background image in photoshop for each slider image.

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

Tags:

2

Answers


  1. 0

    Here’s one way to accomplish this using jQuery.

    It uses three fixed-position divs, and then it animates their opacity.

    $('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>
    Login or Signup to reply.
  2. 0 
    $('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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search