2

をたくさん含むスクロール可能なページを取得しましたdivs。ユーザーがスクロールしているときに、ページのfade out要素を表示したい。そのため、現在 の中心にある div のみが100% になります。topbottomviewportopacity

位置に応じて不透明度を持つ div

私は現在、window.scrollイベントを観察opacityし、scroll offsets. これは機能しますが、クライアントのパフォーマンスに大きな影響を与えます (特に、多くの div がある場合)。これは、「非流動的な」スクロール エクスペリエンスにつながります。

利用可能な他のアプローチはありますか？たぶん、すべての div を通過しないソリューションでさえありますか?

編集：

  1. 現在のアプローチを示すjsFiddleでクイック プレビューをセットアップします(最適化されていません)。
  2. コメントありがとうございます！を使用して要素の不透明度を偽造するというアイデアが本当に気に入っていbackground gradientますが、私の場合はbackground image.
4

1 に答える 1

3

jsFiddle の例

// http://stackoverflow.com/a/488073/340760
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

// when you scroll the div
$(".list").scroll(function(e) {
    var $list = $(this);

    // apply logic only to visible elements
    $list.find("div")
        .filter(function(i, d) {
            return isScrolledIntoView(d);
        })
        .each(function() {
            var eTop = $(this).offset().top;
            var center = $list.height() / 2;

            // if the element is in the center it is 100%
            // otherwise it will fade
            var dif = center - eTop;
            if (dif < 0) dif *= -1;

            var pc = 1 - (dif / center);

            // set the opacity for the elements
            $(this).css("opacity", pc);
        });
});
于 2013-06-03T16:21:45.057 に答える