Image heap scroll effect

This fiddle illustrates how to scroll images of an image heap from the bottom to the top outside of view

by Kasalop

HTML

<div data-role="image-heap">
begin
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<section data-role="image-container" class="left">
		<img src="https://via.placeholder.com/240x240.png?text=DemoImage1">
	</section>
	<section data-role="image-container" class="right">
		<img src="https://via.placeholder.com/240x240.png?text=DemoImage2">
	</section>
	<section data-role="image-container" class="left">
		<img src="https://via.placeholder.com/240x240.png?text=DemoImage3">
	</section>
	<section data-role="image-container" class="middle">
		<img src="https://via.placeholder.com/240x240.png?text=DemoImage4">
	</section>
</div>

CSS

div[data-role="image-heap"] {
  position: relative;
  margin: 0 auto;
  width: 100%;
  margin:auto auto;
  padding:auto auto;
  text-align:center;
/*  display: flex;
*/
/*  flex-direction: column-reverse;
*/
}
section[data-role="image-container"] {
  display:block;
  width:240px;
  position: -webkit-sticky;
  position: sticky;
  bottom: -30px;
  margin-bottom: 20vh;
  left: 50%;
  transform: translateX(-50%);
}
.left {
	transform: translateX(-65%) !important;
}
.middle {
	transform: translateX(-50%) !important;
}
.right {
	transform: translateX(-35%) !important;
}
img {
  border-style: none;
  max-width: 100%;
  height: auto;
  display: block;
  opacity: 1;
}

JavaScript

let zIndex = 1;
document.querySelectorAll('section').forEach(section=>{
	section.style.zIndex = zIndex--;
});