fix0_o

Считаю лучшим решением hammer.js

Разбераешь 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

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ФУНКЦИЯ ДЛЯ УПРАВЛЕНИЯ КУКАМИ
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// как пользываться                                    
/*    
    // установка куки без срока хранения:
    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;
}

Пробуй.

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

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

Механизм всегда один, твоя задача скомпоновать его так, что бы у тебя получилось то, что ты хочешь. Физически слои не могут проходить сквозь друг друга (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);    
});

Пример:

Вот вариант.
Закрывается при клике вне области модульного окна.
Можно создавать сколько угодно модульных окон.

Пример: https://codepen.io/Fix0_o/pen/wRRVpW

<a modal-win='modal_1' href='#'>Click me</a>
<a modal-win='modal_2' href='#'>Click me</a>

<div class='modal_bg'>
  <div class='flex'>
    <div class='modal_win modal_1'>Modal window 1</div>
    <div class='modal_win modal_2'>Modal window 2</div>
  </div>
</div>

.modal_bg {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: #000;
  display: none;
}
.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height:100%;
}
.modal_win {
  display: block;
  min-width: 300px;
  min-height: 300px;
  background: #fff;
  text-align: center;
  display: none;
}

$(document).on('click', "[modal-win]", function(event){
  event.preventDefault();
  var target = event.target;
  var acbut = $(target).attr('modal-win');
  $('.'+acbut).fadeIn(600);
  $('.modal_bg').fadeIn(600);
});

$(document).on('click', ".modal_bg", function(event){
  event.preventDefault();
  event.stopPropagation();
  var target = event.target;
  var check = $(target).attr('class');
  if(check == 'flex'){
    $(this).fadeOut(600);
    $('.modal_win').each(function (index, element) {
      $(element).fadeOut(600);
    });
  }
});