ある点の後に要素のスクロールを止める方法は？

Question

thisページの一部を複製したい場合は、少し下にスクロールすると、グラフの写真とテキストが表示されます。 誰でも写真やテキストのスクロール効果を知っていますか？そしてある点の後にテキストが現れます、彼らはどうしましたか？

Answer 1

ここでは2つの質問があるようです。 1つは、既にビューポート内にあるアイテムのみを表示する方法と、もう1つは視差効果を適用する方法です。

ビューポート内にアイテムが1回しか表示されない場合、ScrollRevealはそのトリックを取ったツールのように見えます。あなたはここでそれをチェックすることができます： https://scrollrevealjs.org/

視差効果については、私はあなたが使用できる超軽量のJavascriptクラスを作った。ここでは、ソースコードをチェックアウト：

http://codepen.io/rodomeista/pen/vGqWXr

あなたはこの作業を取得するために、あなたのコード内で更新する必要がありますがいくつかあります。

1. すべてのJavascriptコードをメインのJSファイルにコピーします。
2. 効果を適用するアイテムに「視差コンテンツ」クラスを追加します。
3. 問題のDOM要素で 'parallax-offset'属性と 'parallax-axis'属性を指定します。

Exampe：

は、あなたがそう

<img src = "./path/to/image.png" /> 

のように見え、私はy軸方向の微妙な視差効果を適用したい画像要素を持っていたとしましょう。 私がする必要があるでしょうすべてがそうのような属性を調整している。

<img src = "./path/to/image.png" class = "parallax-content" data-parallax-offset = "-50" data-parallax-axis = "y" /> 

今、あなたのコードを実行し、アクションでそれを参照してください！必要なスピードに合わせるために、パララックスオフセット番号で遊んでみてください。コードに関する質問には満足しています。

幸運を祈る！