0

ここに行くと、おそらく CSS に設定されている "Danger Will Robinson" ボタンが表示されposition:fixedます。ページを下にスクロールすると、ウィンドウ/ビューポートの上部にとどまります。このボックスを囲む白いボックス シャドウ (またはフェードアウト効果?) のようなものがあることに注意してください。したがって、ページを下にスクロールすると、すべての要素 (ほとんどが灰色のボタン) がフェードアウトするように見えます。

このクールな「スクロールダウンすると、ページの上部にあるコンテンツがフェードアウトするように見える」効果を取得する方法を見つけようとしています。それは私の頭を少し超えています。

4

3 に答える 3

1

それは線形グラデーションに他なりません。

そのスタイルをご覧ください

background: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
padding: 24px 0;
position: relative;
z-index: 999;
pointer-events: none;
max-width: 668;
于 2012-09-20T19:53:02.380 に答える
0

これは、透明にフェードするグラデーションで行われます。具体的なルールは次のとおりです。

linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))

必要に応じてベンダープレフィックスで調整します。

于 2012-09-20T19:49:13.563 に答える
0

ここにデモの例があります。単に変更する：

#bottom_fade {
    ...
    bottom: 0px;
    background: /* yadda yadda */
}

に：

#bottom_fade {
    ...
    top: 0px;
    /* as the other answers have explained */
    background: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

あなたが求める効果を達成します。

于 2012-09-20T19:56:34.347 に答える