私のSkrollr.js: ユーザーがウィンドウをスクロールしている間に常に発生するループ アクションの質問を経由してここにいる場合は、基本的に何が起こっているかを知っています。
私が使用しているプラグインである Skrollr は、無限ループ アクションを処理できません。したがって、@ Prinzhorn の推奨は、「モジュラス演算子」を使用することでした。そして、あなたが見ることができるように、私はそれを試しましたHERE . ただし、そこにも見られるように、スクロールするピクセル数がN 番目になるたびにイベント (アニメーション) を発生させる必要があるため、別の問題が発生しました。しかし、スクロールがすべての数字を通過することはありません。それらの多くをスキップします。そのため、今のところ、そこから一定の間隔を取得する方法がわかりません。
いずれにせよ、この問題と、何らかのアクション (またはむしろ多くのアクション)がビューポートにない場合でも、何らかのアクション (または多くのアクション) を常に発生させることはおそらくあまり良い考えではないという事実。
dataそこで、最初の Skrollr の値を動的に設定することにしました。これらのデータ値は、私の能力の限りでは、ウィンドウの高さやコンテンツ内の位置などに応じて、jQuery を介して自動的に解決されます。さまざまなレイヤーを追加する必要がある場所にアニメーション化し、data間隔を設定して、ビューポートにあるときにアクションを処理する必要があります。ただし、以下に示すシーケンスに従って CSS 値を設定する方法をまだ理解していません! しかし、あなたがこれを読んでいる間、私はそれに取り組んでいます！
<div class="red" data-0="display: block;">1</div>
<div class="yellow" data-0="display: none;" data-50="display: block;" data-400="display: none;">2</div>
<div class="blue" data-0="display: none;" data-100="display: block;" data-350="display: none;">3</div>
<div class="green" data-0="display: none;" data-150="display: block;" data-300="display: none;">4</div>
<div class="purple" data-0="display: none;" data-200="display: block;" data-250="display: none;">5</div>
ここで説明しているシーケンスは、基本的に 1 つのレイヤーが他のレイヤーの上に表示され、1、2、3、4、5 をアニメーション化し、再び 4、3、2、1 をアニメーション化するというものであることに注意してください。などなど
私が言ったように、私はこれに取り組んでいますが、私は
for (i in intervals) {
layer += ' data-' + (start + intervals[i]) + '=" "';
}
そして今、これらのdata属性のいくつかを取得して CSS の変更をターゲットにする方法とdisplay: block;、display: none;これらを非対称にする方法を理解する必要があります。
更新番号 1
OK、これが現時点で私がやっていることです: SEE UPDATED FIDDLE HERE (2)。
モジュラスによって、必要なものにいくらか近づくことができました。現在、ほぼ連続していますが、完全ではありません。何か案は？