Wie kann man ein div (mit Bildinhalt) beim Scrollen nach unten scrollen?

Question

Ich habe ein Problem, das ich noch nicht lösen kann und ich wäre wirklich froh, wenn jemand helfen könnte! Ich möchte einen Scroll-Effekt (das umgekehrte Scrollen) auf einem Div festlegen, das wenige Bilder enthält. Um genauer zu sein, werden Bilder zufällig in ein div (Scroller) mit einer großen Höhe positioniert, dieses div wird auch in ein anderes div eingefügt (wrapper = Scrollbalken ausblenden). Ich möchte das Ende dieses langen div am oberen Bildschirmrand machen (mit einem kleinen Versatz im Inneren) und dann dem Benutzer erlauben, in dieses div zu scrollen. Bilder sollten beim Scrollen langsam nach unten auf den Bildschirm gleiten. Der Benutzer kann von unten nach oben im div blättern, sodass Bilder nacheinander verschwinden. Ich mache einige screenshots der erwarteten Wirkung. Ich habe einige "Parallax Scrolling" -Codes ausprobiert, aber ich kann es nicht funktionieren lassen, und ich bin mir nicht sicher, ob das die beste Lösung für das ist, wonach ich suche (ich habe nur Hintergrundbild-Beispiele gefunden).

Hier ist das zugehörige Stück 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) 
     }); 
    }); 

Dank für Ihre Antwort im voraus danken (n)!

Answer 1

Ich fragte auch diese Frage auf der Französisch Alsacréation Plattform und Tris TOON half mir, dies zu lösen. Bitte folgen Sie dieser link, um seine Demonstration zu sehen. Es war ziemlich einfach anzuwenden und betrifft nur den CSS-Teil. In meinem Fall musste ich nur "transform: scale (1, -1)" hinzufügen; auf meinem Wrapper und Scroller, um den beabsichtigten Effekt zu bekommen.

Also ein Wort zu den Weisen!

Vielen Dank sowieso und bis bald :)