私は、CSS3トランジションをスクロールイベントにリンクする方法を探しています。私はhttp://nizoapp.com/と同様の機能を探していますが、ページ上の特定のスクロール・ポイントに移動すると特定の要素が動くことになります。私はスクロールイベントをjQuery(オフセットとスクロールを使用)で呼び出さなければならないことは知っていますが、アニメーション部分にCSS3を使用する方法があるのか、jQueryで行う必要があるのか不思議です。いずれにせよ、私はこれを動作させるために飛躍を開始する方法に関するいくつかの助けが大好きです。助けてくれてありがとう。CSS3のアニメーション/トランスフォームをスクロールイベントにリンクする
7
A
答えて
10
良い出発点はthe jQuery Waypoints pluginです。これは、要素にスクロールするたびに関数を実行するのを容易にし、現在表示されているものに基づいてクラスを適用することもできます。その後、それらを使用して、後になっているCSSアニメーションをトリガーすることができます。
更新 - 私はちょうどthe Scrollorama jQueryプラグインに出会ったばかりです。著者は徹底的にテストされていないと述べていますが、それはあなたの後ろのことを正確に行うように設計されており、間違いなく良い出発点のように見えます。
2
特定のCSSをスクロール位置にリンクする方法はありません。あなたはその効果を達成するためにいくつかのJavaScriptの接着剤を含める必要があります。私の好きな方法は、ウィンドウonscroll
のイベントにバインドしてアニメーションコードをそこに置くことです。
2
私はscrollTop()メソッドを使用しています。偉大なプラグインだ
#my-div {
width:200px;
height:200px;
background-color:red;
}
#my-div.animate {
transition: rotate(30deg);
}
関連する問題
- 1. javascriptのクロスブラウザの水平スクロールイベントとverticallスクロールイベント
- 2. DataGridViewスクロールイベント
- 3. jQueryスクロールイベント
- 4. tableheaderviewスクロールイベント
- 5. C#のスクロールイベント
- 6. JScrollPaneのスクロールイベント
- 7. TinyMCEエディタのスクロールイベントにバインド
- 8. Android:EditTextのスクロールイベントを検出する
- 9. WM5のスクロールイベントを処理するCListView
- 10. ListViewのスクロールイベントを作成する方法
- 11. jqueryでtouchmoveのスクロールイベント
- 12. JavaScript、スクロールイベントの紛失
- 13. JQueryウィンドウのスクロールイベントですか?
- 14. iPhoneでスクロールイベント
- 15. iScroll 5、スクロールイベントを検出する方法
- 16. VB.netのテキストボックスのスクロールバーのスクロールイベント
- 17. 1回のCSS3変換後にCSS3を2回変換する
- 18. gtkでのスクロールイベントの取得#
- 19. jQuery:動的にロードされるコンテンツにスクロールイベントをバインドする
- 20. JSスクロールイベント - のWindows Mobile IE
- 21. HTMLテーブルの行は、スクロールイベントで
- 22. オペラはリンクとイメージとcss3の列を認識しません
- 23. ルーティングフォーカスなしでwxPythonのScrolledPanelにスクロールイベントをルーティングする
- 24. iFrame内にネストされたフレームのスクロールイベントをキャプチャする
- 25. DataGridView水平スクロールイベントを作成する別のコントロールをスクロールする
- 26. CSS3のリンク先のリンクの色がフェードオンになっても表示されません。
- 27. Facebookのキャンバスフレーム内でスクロールイベントを捕捉する方法は?
- 28. 特定のjQuery Mobileページでスクロールイベントをキャプチャする
- 29. リストビューのスクロールイベントをC言語で処理する#
- 30. css3スライドアップスライドを下に
、リンクへの感謝:
これは私のCSSアニメーションのプロパティHTMLで
を持つクラスを追加または削除します:CSSの
をそれに。 –
問題はありません - 私はそれが本当に多くの異なるもののために役立つので、それにたくさんリンクしていることがわかります。 – CherryFlavourPez
素晴らしいアイデア!私はしばらく前にWaypointを訪れましたが、それを忘れました。それはうまくいくかもしれません。ありがとう! – Andrew