JSFiddle - React, Tailwind, and code Playground

HTML

<body>


<div id="scroller-wrapper">
   <div id="scroller" class="slidedown">
   
      <div id="image1" 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"/>
      </div>
      
      <div 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"/>
	     </div>
       
      <div id="image3" class="img-defile">
	        <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1277880613-thumb.jpg&width=250&height=200"/>
	     </div>
       
      <div id="image4" class="img-defile">
	        <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1277880655-thumb.jpg&width=250&height=200"/>
		   </div>
       
      <div id="image5" class="img-defile">
          <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1280753327-thumb.jpg&width=250&height=200"/>
      </div>
      
      <div id="image6" class="img-defile">
	        <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1280912947-thumb.jpg&width=250&height=200"/>
	     </div>
       
      <div id="image7" class="img-defile">
	        <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1280912978-thumb.jpg&width=250&height=200"/>
		   </div>
       
      <div id="image8" class="img-defile">
	        <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1280913016-thumb.jpg&width=250&height=200"/>
		   </div>
       
      <div id="image9" class="img-defile">
	        <img...

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;
}


#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:100%;
	height:250%;
	position:relative;
	display:block;
	transform: scale(1, -1);
}


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


.slidedown {
 animation-duration:10s;
 animation-name: slidedown;
 animation-timing-function:linear;
 animation-iteration-count:1;
 animation-fill-mode: forwards;
}

@keyframes slidedown {

 0% {
		  bottom: -10%;
	  }

 100% {
		  bottom: 250%;
	  }
}


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

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


#image1 {
	/*width:65%;*/
	z-index:5;
}

#image2 {
	/*width:55%;*/
	z-index:5;
}

#image3 {
	/*width:40%;*/
	z-index:5;
}

#image4 {
	/*width:55%;*/
	z-index:5;
}

#image5 {
	/*width:35%;*/
	z-index:5;
}

#image6 {
	/*width:45%;*/
	z-index:60;
}

#image7 {
	/*width:70%;*/
	z-index:60;
}

#image8 {
	/*width:75%;*/
	z-index:60;
}

#image9 {
	/*width:35%;*/
	z-index:35;
}

#image10 {
	/*width:50%;*/
	z-index:35;
}

#image11 {
	/*width:55%;*/
	z-index:25;
}

#image12 {
	/*width:35%;*/
	z-index:25;
}

#image13 {
	/*width:50%;*/
	z-index:25;
}

#image14 {
	/*width:45%;*/
	z-index:60;
}

#image15 {
	/*width:35%;*/
	z-index:60;
}

#image16 {
	/*width:50%;*/
	z-index:15;
}

#image17 {
	/*width:65%;*/
	z-index:15;
}

#image18 {
	/*width:65%;*/
	z-index:60;
}

#image19 {
	/*width:70%;*/
	z-index:60;
}

#image20 {
	/*width:60%;*/
	z-index:60;
}

#image21 {
	/*width:65%;*/
	z-index:35;
}

#image22 {
	/*width:65%;*/
	z-index:35;
}


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


#dossiers-projets .accordeon...

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)
        });
});



var acc = document.getElementsByClassName("accordeon");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");

        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}

});