視差効果

私は現在、jQueryライブラリを使用しています：私はjQueryプラグインを使用している場合、私は気にしないhttps://github.com/wagerfield/parallax 視差効果

かどうかが、私はよ：http://pixelcog.github.io/parallax.js/、そのより人気のカウンターパートと混同しないように白いdivの上に赤いdivをスクロールすると、視差の効果が得られません。 私は白いdivとpicture divにあるように、それらの2つのbottom divに同じ効果が欲しいです。

FIDDLE：明確化のためにhttps://jsfiddle.net/jzhang172/rcx2zpau/1/

：私はちょうど指定された動作を探しています、jQueryプラグインを必要としません。

アップデート：私が働いて見る唯一のものはjQueryの、ここのリンクからScrollmagicプラグインです：http://scrollmagic.io/examples/ので、私はここで、ポストの結果をしようとします。

.one{ 
 
    height:500px; 
 
    overflow:hidden; 
 
} 
 
.someshit{ 
 
    height:300px; 
 
} 
 
.someothershit{ 
 
    height:700px; 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script> 
 
<div class="parallax-window one" data-parallax="scroll" data-image-src="http://cdn.bulbagarden.net/upload/0/0d/025Pikachu.png"></div> 
 
<div class="someshit"> 
 
Heyheyheyh, some text<br> 
 
Heyheyheyh, some text<br> 
 
Heyheyheyh, some text<br> 
 
Heyheyheyh, some text<br> 
 
</div> 
 
<div class="someothershit" data-parallax="scroll"> 
 
HELP ME PARALLAX ONTO THE WHITE DIV PLEASE 
 
</div>

出典

2016-07-22 Snorlax

そのライブラリは画像だけのために働くように見えます。ネストされたイメージの先頭の位置を変更してそのエフェクトを作成します –

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    .parallax { 
/* image can be used */ 
background-color: grey; 

/* Set a specific height */ 
min-height: 500px; 

/* Create the parallax scrolling effect */ 
background-attachment: fixed; 
background-position: center; 
background-repeat: no-repeat; 
    background-size: cover; 
} 
</style> 
</head> 
<body> 

<div class="parallax"></div> 

<div style="height:1000px;background-color:red;font-size:36px"> 
    This is inside Parallax Div 
</div> 

</body> 
</html>

出典

2016-07-22 17:16:51

答えて

関連する問題