jquery - Parallax Scrolling in both directions

Question

I'm trying to create parallax scrolling site with help of Scrollorama But I want to use non typical animation. This animation should go from top to bottom, then stops at the middle of the page and going back( from the middle to top ). Scrollorama author said that this type of animation doesn't support by scrollorama, neither his new plugin SuperScrollorama. Maybe someone could suggest me another plugin that have this feature.

Answer 1

Scrollorama はこれまで見たことがなく、興味をそそられました。これはプラグインではありません。スクロール コードをシンプルにして、プラグイン タイプのコードでごちゃごちゃにならないようにしたかったのです。それをプラグインに変えるのは非常に簡単だと思うので、それはあなたに任せます (そこで何か助けが必要でない限り)。

コードの説明

jQuery にはscrollTop()、コンテナーが上からどれだけスクロールされるかを判断する関数があります。スクロール領域内にある要素の高さとそのコンテナーの高さを使用して、コンテナーがスクロールされた割合を判断できます。

scrollAmount / (totalSize - visibleSize) 

visibleSize(正しい結果を得るには、コンテナーの高さを差し引く必要があります。scrollTop()要素の上から非表示になっているピクセル数を返すため、一番下までスクロールすると、totalSize - visibleSizeだけでなく、が得られますtotalSize)

そのパーセントを使用して、いつ上に移動するか、下に移動するか、同じ位置にとどまるかを決定できます。このrepositionBanner()関数はスクロール パーセントを受け取り、アニメーション化された要素をどうするかを決定します。私のコードでは、要素を 0 ～ 30% の位置に移動し、30 ～ 70% の位置を保持し、70 ～ 100% の元の位置に戻るように選択しました。

(私のコードはすべて、垂直スクロールを扱っていることを前提としています。同じ概念を、 and の代わりに and を使用して水平スクロールにleft適用widthできtopますheight)

Answer 2

これは、RustyTheBoyRobot の回答ほどエレガントではありませんが、透明な別のコンテナー要素で要素をラップすることでこれを実現できます。次に、コンテナをアニメーション化し、元の要素をアニメーション化できます。

例：

//animate in
scrollorama.animate('#elementToAnimateContainer',{
   delay: 0,
   duration: 100,
   property:'left',
   start:-3000,
   end: 0,
   pin: true
});

//animate out
scrollorama.animate('#elementToAnimate',{
   delay: 500,
   duration: 100,
   property:'left',
   start:0,
   end: 3000,
   pin: true
});

唯一の問題は、コンテナーがまだ画面に表示されることですが、透明に設定すると表示されなくなります。いつ$('#elementToAnimateContainer').remove()でも後で設定したり、設定したりできますpointer-events:none;。

私が言うように、それはきれいではありませんが、あなたが求めたことを実行します.