やりたいことが skrollr で可能かどうかはわかりません。可能ではないようですが、誤解されている可能性があります。「別の要素のアニメーション イベントの 500 ピクセル後にこのアニメーション イベントを開始する」のように、他のキーフレーム イベントに関連するスクロール ポイントでキーフレームを記述できるようにしたいと考えています。私は、アニメーション コンテンツの複数のセクションからなる大きなページに取り組んでいます。各セクションは上部にスクロールし、多くのキー フレームのセクション内で複数のアニメーションが発生すると一時的に固定されます。次に、そのセクションのアニメーションが完了すると、画面から上にスクロールし、次のセクションが表示されて独自のアニメーションを実行します。など（メインのskrollrデモと同じですしかし、より多くのアニメーション イベントがあるとより複雑になります)。私の主な問題は、将来、各セクションのアニメーションのタイミングを個別に簡単に編集できるようにしたいということです。一緒に働く。しかし、すべてのタイミングを絶対値に依存するscrollTopと、これが問題になります。わずかなタイミングの変更が、ページの残りの部分全体で後続のすべてのタイミングを調整しなければならないことを意味するからです。これを回避するために、定数を使用してアニメーション化された各セクションの開始を示します。これにより、少なくともアニメーション化された各セクションの開始時刻を次のように指定できます。
<style type="text/css">
#fixedanimatedcontent1, #fixedanimatedcontent2 {position: fixed;}
</style>
<section id="fixedanimatedcontent1" data-_fixedanimstart1--630="top:100%;" data-_fixedanimstart1="top:0%;" data-_fixedanimstart1-1500="top:0%;" data-_fixedanimstart2="top:-100%;">
<div data-_fixedanimstart1="width: 0%;" data-_fixedanimstart1-470="width: 100%"></div>
<img src="x.png" data-_fixedanimstart1-270="opacity: 0;" data-_fixedanimstart1-670="opacity: 1;" data-_fixedanimstart1-1170="opacity: 0;" />
</section>
<section id="fixedanimatedcontent2" data-_fixedanimstart2--630="top:100%;" data-_fixedanimstart2="top:0%;" data-_fixedanimstart2-2000="top:0%;" data-_fixedanimstart3="top:-100%;">
<img src="y.png" data-_fixedanimstart2-500="opacity: 0;" data-_fixedanimstart2-1000="opacity: 1;" data-_fixedanimstart2-1500="opacity: 0;" />
</section>
それでもなお、複雑なシーケンスの場合、小さなタイミング変更を行うと、少なくともそのセクション内のすべてのキー フレーム オフセットを変更する必要があり、おそらく定数値も変更する必要があります。上記の私の例を見ると、2 つの質問があります。
#fixedanimatedcontent21) たとえば、 sectionの top=0% の500px 後に始まる相対キーフレームを記述する方法はありますか? できることはわかってdata-topいますが、私のセットアップ#fixedanimatedcontent2では、トップに達するとしばらくの間トップに固定されます。#fixedanimatedcontent2では、ヒット後に 500px のスクロールを開始するキーフレームをどのように記述すればよいdata-topでしょうか? オフセットはビューポート内の要素の位置に対してのみ相対的であるため、「相対キーフレーム」の構文内ではこれは不可能ですか? これがなんとか実行できれば、定数にあまり依存する必要はありません...
#fixedanimatedcontent22) sectionの<img>不透明度が 1 に達したときに始まるキーフレームはどうですか? そうすれば、後で<img>すべてのキー フレームのタイミングを変更することなく、不透明度補間の長さを変更する必要がある場合に使用できます。これは不可能だと確信していますが、尋ねなければなりませんでした...
では、この種の相対シーケンシングを最も効率的に行うための最良の方法は何かを誤解していますか? または、上記の例のように定数を使用するのがベスト プラクティスですか?
（これは本当に冗長な投稿でした、ごめんなさい！）