視差効果の核となる部分（つまり、その効果を発揮する部分）を取得するにはどうすればよいでしょうか? 質問する

しかし、正直に言うと、これが正確に何をするのか、なぜこのようにすべきか、またはできるのかはわかりません。これを知りたいので、視差が発生するプロセス全体を理解できます。scrollTop()、、の機能offsetTopは$(window).height()明らかですが、式の背後にあるトリックが何であるかは、私が理解していない部分です。

アップデート

アップデート1

@Scottは、インスピレーションサイトでは、スクロールマジックですが、プラグインを使用せずに自分で視差効果を作成する方法について非常に興味があります。それがどのように機能し、どのように実現するか。式に重点を置いて、なぜこのようにまたはこのように行う必要があるのか​​、そして正確には何が計算されるのかを知りたいです。なぜなら、私はそれを理解していないので、これを本当に知りたいからです。そうすれば、将来視差効果を適用するときにこの知識を使用できます。

アップデート2

次のコード スニペットが具体的に何をするのか理解しようとしました。次のコード スニペットについて説明しています。

var viewportOffset = scrollTop - offsetTop + win.height();

デバッグ セッションをいくつか行った後、手がかりがつかめたと思います。scrollTopページをスクロールダウンしてビューから隠れているピクセル数です。offsetTopは DOM 内の要素の開始位置で、は$(window).heightビューポートの高さ (ブラウザーに表示される部分) です。

この式は次のような動作をすると思います:

ゼロ ポイントを要素の開始点に設定します。たとえば、scrollTopが 0 で、要素が240px上から から始まる場合、数式は 0 マイナス 240 です-240。つまり、現在のスクロール位置はゼロ ポイントより下です。240 ピクセル下にスクロールした後、当然 240 マイナス 240 は0(ゼロ) なので、数式は 0 を出力します。正しいでしょうか?

しかし、私がまだ理解していない部分は、なぜ です+ win.height。上記の式に戻って (Update 2)、 scrollTop が 0 の場合、 は$(window).height240 ピクセルからビューポートの下部までのスペースです。下にスクロールすると、スクロール時にピクセルの量が増えますが、私には意味がわかりません。誰かがこれの目的を説明してくれると嬉しいです。とても興味があります。視差を計算する式の 2 番目の部分がoffsetPercentまだ理解できません。一般的には、スクロール時の視差の強さの計算です。

アップデート3/4

@Edisoniのアドバイスに従って、ここ数日は歩いていましたトラヴィス・ニールソンのビデオそして、私はパララックスに関する基本的な機能についてより深く理解するようになりました。パララックスについて深く知りたい人には必読です。私はパララックスに関する新しい知識を使って、上記のスクリプトを作成しました。

var root = this;
var win = $(window);
var offset = 0;

var elements = $('#daily .entry figure');

if (win.width() >= 768) {
    win.scroll(function() {

        // Get current scroll position
        var scrollPos = win.scrollTop();
        console.log(scrollPos);

        elements.each(function(i) {
            var elem = $(this);
            var triggerElement = elem.offset().top;
            var elemHeight = elem.height();
            var animElem = elem.find('img');

            if (scrollPos > triggerElement - (elemHeight / 2) && scrollPos < triggerElement + elemHeight + (elemHeight / 2)) {
                // Do the magic
                TweenMax.to(animElem, 0.1, {
                    yPercent: -(scrollPos - elemHeight / 2) / 100, 
                    ease: Linear.easeNone
                });

            } else {
                return false;
            }

        });

    });

}

-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);

TweenMax.fromTo(animElem, 0.1, {
    yPercent: triggerElement,
    z: 1
}, {
    yPercent: -(scrollPos - elemHeight / 2) / 100,
    ease: Linear.easeNone
});