問題タブ [skrollr]

Skrollr を相対モードで使用して実験するための簡単なページを作成しました。2 つのセクションを設定しました。最初のセクションにはタグがあり、2 番目のセクションには

その中にタグを付けます。最初のセクションの下部がビューポートの上部にある場合、最初のセクションはフェードアウトするはずです。ただし、そのセクションを使用する代わりに、タグを使用してアニメーションをトリガーしています。

2 番目のセクションにも背景の div があり、そのアニメーションは飛行機の画像で、上部が 100 ピクセル、中央が 0 ピクセル、下部が -100 ピクセルから始まる必要があります。画像は常に -100px の位置にあるように見えます。

CSS:

私は何か明らかなことを見過ごしていると確信しています..しかし、それが何であるかを理解できないようです。私が話していることをデモするために、簡単な日付をアップロードしました。事前に助けてくれてありがとう！

デモリンク

少量のコンテンツと背景画像を持つ 2 つのセクションを持つ単純なサイトがあります。id skrollr-body タグを追加する前は、すべて正常に動作しているように見えましたが、その ID にすべてのコンテンツが含まれるようになったため、100% の高さが機能しなくなりました。100vh プロパティを使用しようとしましたが、それも機能していないようです。これは iPad でのみ発生する問題のようで、Skrollr が iOS デバイスでスクロールを処理する方法が原因であることはわかっています。コンテンツのセクションを強制的にビューポートの 100% にし、Skrollr をモバイルで動作させるにはどうすればよいか途方に暮れています。

これが私が話していることの簡単なデモです

たまたまこれを読んだ場合は、助けてくれた Prinzhorn に感謝します。

リンク

ウィンドウの高さが 768 ピクセル、コンテンツの高さが 1080 ピクセルであると仮定すると、次のようになります。

一番下までスクロールすると、winHeight < contentHeight のため、コンテンツの一部が表示されません。これには何ができますか？

絶対モードでスクローラーを使用して要素の下部をターゲットにすることは可能ですか?

現在、ビューポートよりも大きい要素がある場合、ビューポートの場合に要素を下部に固定する方法がわかりません。使うことができます

要素の高さがビューポートの高さよりも大きい場合に、要素の下部をビューポートの下部に固定する方法があるかどうかを把握しようとしています。そしてこのレイアウトがレスポンシブならpxではなく%を使いたいのですが、そう考えると問題の要素タグの高さは動くターゲットです。これまでのところ、アイデアをテストするのはうまくいきませんでした。

ありがとう！

skrollr プラグイン ( http://prinzhorn.github.io/skrollr/ ) を使用して、スクロール後の背景の動きを遅らせることはできますか?

テスト用に、次のコードを作成しました。

それは非常にうまく機能しますが、スクロール後に背景の動きを遅らせたい...可能ですか? ありがとうございました！！

だから、私は Skrollr を初めて使い、Skrollr の位置を理解しようとしています。

何らかの理由で、ページの最後に到達するずっと前に、データ開始/データトップの進行状況バーが終了します。

ここにJSFiddleがあります - http://jsfiddle.net/t8bZy/2/

問題のあるコード行は次のとおりです。

バーの終了が早すぎる理由を誰か教えてください。

やりたいことが skrollr で可能かどうかはわかりません。可能ではないようですが、誤解されている可能性があります。「別の要素のアニメーション イベントの 500 ピクセル後にこのアニメーション イベントを開始する」のように、他のキーフレーム イベントに関連するスクロール ポイントでキーフレームを記述できるようにしたいと考えています。私は、アニメーション コンテンツの複数のセクションからなる大きなページに取り組んでいます。各セクションは上部にスクロールし、多くのキー フレームのセクション内で複数のアニメーションが発生すると一時的に固定されます。次に、そのセクションのアニメーションが完了すると、画面から上にスクロールし、次のセクションが表示されて独自のアニメーションを実行します。など（メインのskrollrデモと同じですしかし、より多くのアニメーション イベントがあるとより複雑になります)。私の主な問題は、将来、各セクションのアニメーションのタイミングを個別に簡単に編集できるようにしたいということです。一緒に働く。しかし、すべてのタイミングを絶対値に依存するscrollTopと、これが問題になります。わずかなタイミングの変更が、ページの残りの部分全体で後続のすべてのタイミングを調整しなければならないことを意味するからです。これを回避するために、定数を使用してアニメーション化された各セクションの開始を示します。これにより、少なくともアニメーション化された各セクションの開始時刻を次のように指定できます。

それでもなお、複雑なシーケンスの場合、小さなタイミング変更を行うと、少なくともそのセクション内のすべてのキー フレーム オフセットを変更する必要があり、おそらく定数値も変更する必要があります。上記の私の例を見ると、2 つの質問があります。

#fixedanimatedcontent21) たとえば、 sectionの top=0% の500px 後に始まる相対キーフレームを記述する方法はありますか? できることはわかってdata-topいますが、私のセットアップ#fixedanimatedcontent2では、トップに達するとしばらくの間トップに固定されます。#fixedanimatedcontent2では、ヒット後に 500px のスクロールを開始するキーフレームをどのように記述すればよいdata-topでしょうか? オフセットはビューポート内の要素の位置に対してのみ相対的であるため、「相対キーフレーム」の構文内ではこれは不可能ですか? これがなんとか実行できれば、定数にあまり依存する必要はありません...

#fixedanimatedcontent22) sectionの<img>不透明度が 1 に達したときに始まるキーフレームはどうですか? そうすれば、後で<img>すべてのキー フレームのタイミングを変更することなく、不透明度補間の長さを変更する必要がある場合に使用できます。これは不可能だと確信していますが、尋ねなければなりませんでした...

では、この種の相対シーケンシングを最も効率的に行うための最良の方法は何かを誤解していますか? または、上記の例のように定数を使用するのがベスト プラクティスですか?

（これは本当に冗長な投稿でした、ごめんなさい！）

私のウェブサイトの一部の要素で skrollr を使用すると問題が発生します。背景では機能しますが、テキストで div をフェードインおよびフェードアウトしようとしていますが、機能しません...何か間違ったことをしているに違いないので、問題を示すために jsfiddle を作成しました。うまくいけば、誰かが私が間違っていることを理解しています。

HTMLコード

CSS

例はこちら

ありがとう