How to make a div (with images content) scroll down while scrolling? - scroll

Question

I have an issue that i'm not able to solve yet and I'd be really glad if someone could help ! I want to set a scroll effect (that reverse scroll) on a div which contains few images. To be more precise, images are randomly positionned into a div (scroller) with a huge height, this div is also inserted in another div (wrapper = to hide scrollbars). I'd like to make the bottom of this long div on top of screen (with a bit offset inside) and then allow user to scroll into this div. Images should slide down to bottom of screen gradually while scrolling. The user can scroll from the bottom to the top of the div, making images disappear one after the other. I make some screenshots of the expected effect. I tried some 'parallax scrolling' codes but I can't make it work, and I'm not sure that's the best solution for what I'm looking for (I only found background-image examples).
Here's the related piece of code :
------
HTML :
------
<div id="scroller-wrapper">
<div id="scroller">
<div id="img-defile1" class="img-defile">
<img src="img/image.jpg"/>
</div>
...
<div id="img-defile20" class="img-defile">
<img src="img/image20.jpg"/>
</div>
</div>
</div>
------
CSS :
------
#scroller-wrapper {
top:0;
width:102vw;
height:100%;
position:absolute;
overflow-y:scroll;
overflow-x:hidden;
}
#scroller {
top:-600vw;
left:0;
max-width:100%;
width:60%;
height:1250%;
position:relative;
z-index:800;
}
.img-defile {
display:block;
max-width:100%;
height:auto;
position:absolute;
overflow:hidden;
}
.img-defile img {
width:600px;
}
.custom-scroll {
height: calc(80% - 20px);
}
-----------
JS/Jquery :
-----------
$('#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)
});
});
Thank you in advance for your answer(s) !

Answer 1

I also asked this question on the french Alsacréation platform and Tris TOON helped me to solve this out. Please follow this link to see his demonstration. It was quite simple to apply and concerns only the CSS part. In my case, I only had to add 'transform: scale(1, -1);' on my wrapper and scroller to get the intended effect.
So a word to the wise !
Many thanks anyway and see you soon :)