不透明度のスクロールバックグラウンドボックスのぼかしエッジ

Question

現在、私のウェブサイトの小さな領域にスクロールバックグラウンドがあり、ビューボックスの側面に画像がフェードアウトするようにしています。画像が表示領域に入ると、不透明になり、中央に来ると完全に不透明になり、次にビューボックスのもう一方の端に当たって再びフェードアウトします。私は不透明度のグラデーションを適用しようとしましたが運がなかったので、不透明度を変更して不透明度を変更することはできませんでした。

私は背景として一つの画像を使用していますが、これを行う方法の

任意のアイデアを終了することはありませんように、それはループと見ることができるように、二回スクロールにそれを追加するのですか？スクロールの背景の

私は

編集プラグインjqueryの円滑なdivのスクロールを使用しています：ここ自明

<div id='cloud-viewer'> 
    <div class='scrollWrapper'> //view box 
    <div id='cloud-wrapper' class='scrollableArea'> //scrolling in here 
     <div id='clouds-1' class='clouds'></div> 
     <div id='clouds-2' class='clouds'></div> 
    </div> 
    </div> 
</div> 

...私は

私の元のスクロール要素をしようとしたコードの一部であります

私は不透明度を持つ要素をいくつかの方法でコードに入れようとしました。

Answer 1

私は、あなたのウェブサイトの背景色から（グラデーションで）透明になる2つの透明なPNG画像を作成します。最初のものは左側（bgの色は透明）になり、2番目は水平に反転した最初のもの（bgの色に透明）になります。これら2つの画像をスクロール可能領域の左右の上に置いて、画像をその後ろにスライドさせることができます。表示可能な領域が固定サイズである場合は、1つの大きな画像でこれを行うこともできます。理にかなっている？

このサイトを見ると（例ではなく）：http://www.pauljnoble.com/photos、それは私がと考えるとと思っています。そして、使用しているオーバーレイ画像はhttp://www.pauljnoble.com/img/bg/photos-shadow-3.pngです。