Как добавить изображение Parallax внутри строки Parallax

Question

Я пытаюсь реализовать параллакс, который содержит другое изображение, внутри которого также присутствует эффект параллакса, где они оба движутся с разной скоростью.

Я имел некоторый успех, но это только кажется, работать на экранах уже, чем 816px это то, что он выглядит, когда я прокручиваю в этой области:

А вот как это выглядит когда ширина более 816px:

Не уверен, что если кто-нибудь сможет помочь с этим конкретно, но хотел бы знать, если есть «правильный» способ достижения этой цели, или если есть какие-либо реализации/плагины.

Я использую основу бутстрапа для остальной части сайта (ощущение, что реакция нажимает внутреннее изображение вниз).

Вот код:

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

Я использую плагин Parallax.js от here

Любая помощь по этому поводу очень ценится и, пожалуйста, дайте мне знать, если я могу предоставить более подробную информацию.

Answer 1

Я был в состоянии решить эту проблему путем изменения data-position-y на 100px:

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