JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="scroller-wrapper">
   <span id="scroller">
    <span id="image" class="img-defile">
      <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1328080590-thumb.jpg&width=250&height=200"/>
    </span>
    <span id="image2" class="img-defile">
      <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1277880557-thumb.jpg&width=250&height=200"/>
    </span>
   </span>
  </div>
  
  <div id="dossiers-projets">
    <span id="cellule1" class="accordeon">
      cellule1
    </span>
    <span id="cellule2" class="accordeon">
      cellule2
    </span>
    <span id="cellule3" class="accordeon">
      cellule3
    </span>
    <span id="cellule4" class="accordeon">
      cellule4
    </span>
    <span id="cellule5" class="accordeon">
      cellule5
    </span>
  </div>
</body>

CSS

body {
	top:0;
	left:0;
	width:105vw;
	height:100%;
	margin:0;
	padding:0;
	background-color:#FFFFFF;
	overflow-y:hidden;
	overflow-x:hidden;
	z-index:-5;
}


* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

#scroller-wrapper {
  top:0;
	left:0;
	width:102vw;
	height:100%;
	position:absolute;
	overflow-y:scroll;
	overflow-x:hidden;
	transform: scale(1, -1);
}

#scroller {
  max-width:100%;
	width:60%;
	height:1250%;
  bottom:-75%;
	left:0;
	position:absolute;
	/*position:relative*/
	display:inline-block;
	transform: scale(1, -1);
}

.custom-scroll {
  height: calc(80% - 20px);
}


.img-defile {
max-width:100%;
height:auto;
display:inline-block;
position:absolute;
overflow:hidden;
margin:32%;
}

.img-defile img {
width:600px;
}

#image { 
  z-index:5 ;
}

#image2 { 
  z-index:15 ;
  }
  

#dossiers-projets {
  position:absolute ;  
	bottom:0;
	left:0;
	width:100%;
	background-color:#FFFFFF;
}

  
.accordeon {
background-color:#FFFFFF;
font-family:Space Mono, monospace;
color:#000000;
font-size:1.25vw;
line-height:1.5vw;
cursor:pointer;
padding:1vw;
width:100%;
text-align:left;
border-top:0.5px solid black;
border-collapse:collapse;
position:relative;
display:inline-block;
outline:none;
}


#cellule 1 {
  z-index:10;
}

#cellule 2 {
  z-index:20;
}

#cellule 3 {
  z-index:30;
}

#cellule 4 {
  z-index:40;
}

#cellule 5 {
  z-index:50;
}

JavaScript

jQuery(document).ready(function($) {


$('#scroller').scroll(function () {
    if ($(this).scrollTop() > 0) {
        $('#scroller').addClass("custom-scroll");
        } else {
        $('#scroller').removeClass("custom-scroll");
        }
});


$('.img-defile').each(function(i) {
    $pT=$("#scroller").height();
    $pL=$("#scroller").width();
    $(this).css({
        top:Math.floor(Math.random()*$pT),
        left:Math.round(Math.random()*$pL)
        });
});


});