So fügen Sie ein Parallax-Bild in einer Parallax-Reihe hinzu

Question

Ich versuche eine Parallaxe zu implementieren, die ein anderes Bild enthält, in dem auch der Parallax-Effekt ist, wo beide sich mit unterschiedlichen Geschwindigkeiten bewegen.

Ich habe einige Erfolge gehabt, aber es scheint nur auf den Bildschirmen zu arbeiten enger als 816px ist, was es aussieht, wenn ich in diesem Bereich bewegen:

Und hier ist, wie es aussieht wenn die Breite ist über 816px:

nicht sicher, ob jemand in der Lage sein wird, mit dieser speziell zu helfen, aber würde gerne wissen, ob es eine „richtige“ ist Art und Weise, dies zu erreichen, oder wenn es Implementierungen/Plugins gibt.

Ich benutze das Bootstrap-Framework für den Rest der Seite (habe das Gefühl, dass die Reaktionsfähigkeit das innere Bild nach unten drückt). Hier

ist der Code:

html

<div class="container-fluid" style="padding:0px;"> 
    <div class="parallax-window" 
     data-parallax="scroll" 
     data-image-src="Phonehand.png" 
     data-position-y="500px" 
     data-speed="0.3"> 
     <div class="parallax-window" data-parallax="scroll" data-image-src="Chrysanthemum.jpg" data-speed="0.8" > 
     </div> 
    </div>  
</div> 

css

.parallax-window { 
    width: 100%; 
    min-height: 400px; 
    background: transparent;  
} 

Javascript

Ich benutze das Parallax.js Plugin von here

Jede Hilfe zu diesem wird sehr geschätzt und bitte lassen Sie mich wissen, wenn ich eine weitere Details zur Verfügung stellen kann.

Answer 1

Ich konnte dies data-position-y zu 100px durch Änderung beheben:

<div class="container-fluid" style="padding:0px;"> 
<div class="parallax-window" 
    data-parallax="scroll" 
    data-image-src="Phonehand.png" 
    data-position-y="100px" 
    data-speed="0.3"> 
    <div class="parallax-window" data-parallax="scroll" data-image-src="Chrysanthemum.jpg" data-speed="0.8" > 
    </div> 
</div>