javascript - 「異なる」視差スクロール効果

Question

私は新しいポートフォリオで作業しており、次のサイトで次のような効果を実現したいと考えています。

http://nizoapp.com/

スクロールするとiPhoneやパーツが横から見える効果。それは一種の視差スクロールです。

方法を検索しようとしましたが、見つかりません。だから私はページを保存してコードを適応させるコードを「盗んだ」が、多くの不必要なものがあるようだ。

誰かが私がこれを行う方法を知っていますか？

Answer 1

視差: 観察者の位置の変化による観察対象の見かけの変位。

視差は特定のスクロール効果の 1 つで、相対的なスクロールで奥行きをシミュレートします。

より一般的なスクロール効果に興味がある場合は、単純な検索で多くのプラグインとまとめが得られます。

Answer 2

私によると、ここの画像はアイデアがどのように機能するかを示しています。基本的な考え方は、移動するすべての要素が中央/非運動要素からある程度の距離を持っているということです。さらにスクロールすると、この中央の要素からの距離が減少します-反比例。この画像では、要素に円と名前が付けられています（簡単にするために、移動する要素は1つだけですが、他の要素も追加できます）。詳細は以下の通りです。

ここでの中心的な要素は「A」と呼ばれ、移動する要素は「C」と呼ばれます。ここで使用される変数：

D =>Aからの移動要素の距離
k=>任意の定数>1（良好な結果を得るための実験）
y =>スクロール距離（document.body.scrollTop）
dy => A間の垂直距離、Cdx=>水平距離
ベット。AとCの
シータ=>A、C間の（事前に決定された）角度

CとAの間には、ユーザーに応じた角度があります。任意の数に設定してください（ラジアンが望ましい単位です）。ここで、yが増加すると、Dは減少します。したがって、Dは図に示す関係/式で与えられます。下/上にスクロールするたびに、Dが再計算されます。それから、dy、dxが計算され、C（絶対位置にある）のcssの左上のプロパティとして設定されます。dy、dxを見つける方法がわからない場合は、次の方法で確認できます。

dy = Math.sin（theta）* D
dx = Math.cos（theta）* D

私はその考えを与えたと思います。私は完全なコードを与えることができましたが、私はあなたに何かをしてもらいたいと思いました...さらに助けが必要な場合は、コメントでそれを尋ねてください... :)

Answer 3

基本的にscrollイベントを使用し、特定のポイントでボックスをアニメーション化します。