Разбераешь url и стилизуешь родительский блок div и ссылку.

javascript

Разберём адрес: http://realadmin.ru/saytostroy/?page=4#top

document.location.href	        http://realadmin.ru/saytostroy/?page=4#top
document.location.protocol	http:
document.location.host	        realadmin.ru
document.location.pathname	/saytostroy/
document.location.search	?page=4
document.location.hash	        #top

Тебе нужна идея реализации.

Механизм всегда один, твоя задача скомпоновать его так, что бы у тебя получилось то, что ты хочешь. Физически слои не могут проходить сквозь друг друга (z-index(1-2)) - это механика браузеров. Но можно создать визуальный эффект, будто происходит то что ты хочешь

- "при пролистывании верхний уходит и становится как бы фоном всего, второй на передний план и третий становится вторым маленьким"

.
Для этого тебе необходимы клоны фотографий. К примеру - "

при пролистывании верхний уходит и становится как бы фоном

"
- тебе нужны 2 фото 1 уже фон но со стилем (opacity:0), другой верхний клон. При пролистывании совместно, скрываешь и растягиваешь на весь экран верхний кадр. Второй сдвигаешь и растягиваешь до размеров первого. На третьем просто проявляешь его. Те фото, что находятся в очереди и скрыты, меняешь стили (z-index(1-2)). Просто пойми рамки реализации, рендера браузера, накидай план и действуй.

Тебе в принципе понадобятся только 3 свойства:
1) z-index
2) opacity
3) transform

Я не дал тебе готового ответа, но попробовал дать представление, как это делается. Если разберешься, такие задачи будешь щелкать как орешки.

Вот рабочий вариант.
Думаю сам разберешься как этим пользоваться.
Стилизуй и вперед к свершениям.

<!--Первый аккордеон-->
<ul accordion='test'>
     <li><a href='1'>item1</a></li>
     <li><a href='2'>item2</a></li>
</ul>

<div test='1' style='display:none;'>
      ####item1####
</div>
<div test='2' style='display:none;'>
      ####item2####
</div>

<!--Второй аккордеон-->
<ul accordion='test2'>
     <li><a href='1'>item1!!!</a></li>
     <li><a href='2'>item2!!!</a></li>
</ul>

<div test2='1' style='display:none;'>
      ####item1!!!####
</div>
<div test2='2' style='display:none;'>
      ####item2!!!####
</div>

$(document).on('click', "[accordion]", function(event){
      event.preventDefault();
      event.stopPropagation();
      var target = event.target;
      var check = $(this).attr('accordion');
      $("["+check+"]").fadeOut(0);
      $("["+check+"='"+$(target).attr('href')+"']").fadeIn(300);    
});

Пример:

Пробуй.

Удачи в разработках!

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ФУНКЦИЯ ДЛЯ УПРАВЛЕНИЯ КУКАМИ
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// как пользываться                                    
/*    
    // установка куки без срока хранения:
    set_cookie ( "username", "Вася Пупкин" );

    // установка куки со сроком хранения до 15 февраля 2011:
    set_cookie ( "username", "Вася Пупкин", 2011, 01, 15 );

    // установка куки со сроком хранения, доменом ruseller.com, использованием SSL, но без пути:
    set_cookie ( "username", "Вася Пупкин", 2003, 01, 15, "", "ruseller.com", "secure" );

    // получение значения куки:
    var x = get_cookie ( "username" );

    // удаление куки:
    delete_cookie ( "session_new" );
*/
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );
 
  if ( exp_y )
  {
    var expires = new Date ( exp_y, exp_m, exp_d );
    cookie_string += "; expires=" + expires.toGMTString();
  }
 
  if ( path )
        cookie_string += "; path=" + escape ( path );
 
  if ( domain )
        cookie_string += "; domain=" + escape ( domain );
  
  if ( secure )
        cookie_string += "; secure";
  
  document.cookie = cookie_string;
}

function delete_cookie ( cookie_name )
{
  var cookie_date = new Date ( );  // Текущая дата и время
  cookie_date.setTime ( cookie_date.getTime() - 1 );
  document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}

function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
 
  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}