私はこのページで本当にクールな効果を見つけました。それを見るために2/3をスクロールします。スクロールダウンすると「鉛筆」の画像（異なる角度からの複数の画像）が変化します。リンクはこちらhttps://www.fiftythree.com/pencilウェブページを下にスクロールしながら画像を変更するにはどうすればよいですか？
とにかく、どのように私は私のサイトでそれを実装することができます教えてもらえますか？あるいは、私はそれを見ることができるように効果の名前。
非常に高く評価されています。
スリーをトリガー手順：
var imageEl = document.getElementById('fake-image');
function getSrc(scrollPos) {
if (scrollPos < 200) return 'image one.jpg';
if (scrollPos < 300) return 'image two.jpg';
if (scrollPos < 400) return 'image three.jpg';
if (scrollPos < 500) return 'image four.jpg';
if (scrollPos < 600) return 'image five.jpg';
return 'image six.jpg';
}
window.addEventListener('scroll', function() {
imageEl.textContent = getSrc(window.scrollY);
});#fake-image {
background: aliceblue;
height: 5000px;
padding-top: 50%;
font-size: 30px;
}<div id="fake-image">
Fake image
</div>おそらく、事前にロードするイメージにしたいか、別の答えが言ったように、表示/非表示を使用して複数の画像を持っています。
これはまだかなり素晴らしいです。 OPは、完全な解決策を期待するべきではありませんが、問題を解決する方法の一般的なアイデアです。 –
scrollイベントを聞くことでこれを行うことができます。
このイベントは
クロムの画像を右クリックして「要素を調べる」と言うと、コンテナ内に隠れている画像がたくさんあることがわかります（最初の画像は除きます）。
スクロールすると、スクロールイベントとスクロールバーの位置の値をリッスンする関数があります。
上記の値に基づいて、「アクティブ」クラス（リンクしているポータルで表示/非表示を意味する）を対応するイメージに設定できます。
TL/DR：onscrollイベントを聞いて、スクロール位置に基づいて複数の画像を表示/非表示にします。
あなたは何も試しましたか？あなた自身で何らかの努力を払わなければ、誰もあなたのための解決策を考え出すことはありません。 –
こんにちはマイク。私はどこから始めるべきか、指針を探しているだけさえ知らない。これは何と呼ばれていますか？私が正確な言葉で探しているものがわからないときは、それを探すのは難しいです。 – noob2014
正確な用語はありません。画像を回転する方法を学びます。次に、ユーザーがスクロールするときに何かを変更する方法を学びます。 2つを組み合わせると、解決策が得られます。 –