0

コンテンツにtop < 0px;. しかし、スクロール中に影をゆっくりとフェードインする方法があったかどうかを知りたいので、opacity:0.5たとえば、スクロール後に影が10pxしか持たないようにしますか?

Google+ ページで Google によって使用されます。コンテンツをスクロールすると、スクロール中に上部の下の影がゆっくりとフェードインしますが、もう一度上にスクロールすると再びフェードアウトします。これがjqueryとcss3でどのように作られているか誰か教えてください。

私はこれを見てきましたが、唯一間違っているのは、スクロール中に影をどんどんフェードインさせたいということです..突然現れたくありません。

多分それは段階的にそれを行うことが可能です..これはうまくいきませんが、あなたにアイデアを与えるかもしれません..

var done = $(document).scrolltop() - 20x;
// now we can use this number as 100% scrolled

$(document).scroll(function() {
    // here we can animate the shadow opacity after 20%, 40%, 60%, 80% and 100%
}
4

2 に答える 2

6

デモ— このようなものですか?

box-shadowこの例では、CSS3 トランジションを使用して要素のフェード イン/アウトを行いfixedます。

アップデート：

DEMObox-shadow —ページの上部から 100 ピクセル (およびそれ以上) が不透明度 100% (透明度ゼロ) で、上部から 10px が不透明度 10% (または 0.1) (透明度 90%) であるスクロール位置を不透明度が反映する代替ソリューション

于 2012-11-07T16:11:24.210 に答える
0

実行中の例を使用して、より具体的な方法で質問してください。しかし、パターンは次のようになります。

  1. div に css の shadow 属性を指定するか、古いブラウザでも機能する Image を使用します。
  2. スクロール イベントで 2 つを Document にバインドします。1 つは上、もう 1 つは下です。
  3. .css 属性を変更する関数を作成します...
于 2012-11-07T15:39:51.723 に答える