2016-09-14 13 views
0

私がしようとしていることの例として、これをpiping demonstrationとしました。配管とバックグラウンドの色は3divにわたり、ユーザーがページを下にスクロールするときに配管に沿って移動したい小さなボールがあります。配管の水平部分で、私は拡大のdivを作成したいのですが、最初のもの最初に、ここのコードです:私はJavaScriptを使用しなければならないことを理解しユーザーのスクロールで固定パスで画像を移動する方法

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.canvas { 
background-image: url(/images/piping_demonstration2.png); 
} 
#glow { 
background-image: url(/images/glow.png); 
background-attachment: fixed; 
} 
.dadiv { 
height: 500px; 
} 
</style> 
</head> 

<body> 
<section class="canvas"> 
    <div id="glow"> 

<div id="first" class="dadiv" height="500px"></div> 

<div id="second"class="dadiv" height="500px"></div> 

<div id="third" class="dadiv" height="500px"></div> 

</div> 

</section> 

</body> 
</html> 

は、私はまだできていません始めるには良い情報源を見つけることができます。

+0

解決策は見つかりましたか?私は似たようなアニメーションを探しています。 –

+0

@RhythmRuparelia私はしていません。私はちょうど私がそれが何かのように思ったよりも時間がかかると思った直後に私はあきらめた、私はそれ以来それを再訪していない。 – hoolakoola

+0

私はそれを今作っていましたが、依然として反応性にする必要があります。オブジェクトがデスクトップビューでジグザグパス上を移動するプロジェクトがありますが、パスはモバイルビューで直線に変化します。私はアニメーションにGSAP(greensock)を使用しています。 –

答えて

関連する問題