ウェブページのスクロールでカスタムビヘイビアを作成するテクニックは何ですか？

Question

このテクニックの名前もトピックの読み方も見つかりません。だから私はここで尋ねる。

基本的に、画像やウェブの部分を異なるタイミングや速度で移動させるスクロール動作のページがあります。

例はhttp://areyousage.comです。このページはページを上にめくるようにスクロールします。

私はすべてのことを私のためにするのではなく、この技術や技術の名前で私は自分自身で研究しコード化することができます。

さらなる研究の方向性の種類。

Answer 1

基本的なメカニズムは視差または変化した知覚の幻影を与えるために、画像/テキスト/その他のレイヤードコンテンツの異なる要素が異なるレートでスクロールされる視差スクロールと呼ばれます。

これは、異なるz-インデックスを使用して背景画像を積み重ね、それらを異なる速度/方向/遷移などでアニメートし、マウスの動きまたはスクロールホイールで動きをトリガすることによって、緩やかに達成することもできます。 TEH例で

イメージを移動させるスクロールにトリガ遷移がある提供する。

transition-duration: 0ms; transform: translate3d(0px, -316px, 0px); 

translate3dの関数は3つの引数を取る - 各軸に対して1つの、x、y及びz

を

この具体的な例は、移動中の画像の高さが316pxであるため効果的です。その効果は、スクロール時にhteビューポートの上下に移動するためです。実際には、それはその高さと同じ量だけ上に移動して消えているように見えます。

これは視差スクロールではないことに注意してください。これは画像を移動しているように見せかけるようなhtml5/cssの仕組みで、スタック内の次の画像を表示します。