2011-11-17 11 views
7

私は、CSS3トランジションをスクロールイベントにリンクする方法を探しています。私はhttp://nizoapp.com/と同様の機能を探していますが、ページ上の特定のスクロール・ポイントに移動すると特定の要素が動くことになります。私はスクロールイベントをjQuery(オフセットとスクロールを使用)で呼び出さなければならないことは知っていますが、アニメーション部分にCSS3を使用する方法があるのか​​、jQueryで行う必要があるのか​​不思議です。いずれにせよ、私はこれを動作させるために飛躍を開始する方法に関するいくつかの助けが大好きです。助けてくれてありがとう。CSS3のアニメーション/トランスフォームをスクロールイベントにリンクする

答えて

10

良い出発点はthe jQuery Waypoints pluginです。これは、要素にスクロールするたびに関数を実行するのを容易にし、現在表示されているものに基づいてクラスを適用することもできます。その後、それらを使用して、後になっているCSSアニメーションをトリガーすることができます。

更新 - 私はちょうどthe Scrollorama jQueryプラグインに出会ったばかりです。著者は徹底的にテストされていないと述べていますが、それはあなたの後ろのことを正確に行うように設計されており、間違いなく良い出発点のように見えます。

+0

、リンクへの感謝:

これは私のCSSアニメーションのプロパティHTMLで

$(window).scroll(function (event) { var y = $(this).scrollTop(); if (y <= 300) { $('#my-div').addClass('animate'); } else { $('#my-div').removeClass('animate'); } }); 

を持つクラスを追加または削除します:CSSの

<div id="my-div"> <p>Lorem ipsum dolor sit amet</p> </div> 

をそれに。 –

+0

問題はありません - 私はそれが本当に多くの異なるもののために役立つので、それにたくさんリンクしていることがわかります。 – CherryFlavourPez

+0

素晴らしいアイデア!私はしばらく前にWaypointを訪れましたが、それを忘れました。それはうまくいくかもしれません。ありがとう! – Andrew

2

特定のCSSをスクロール位置にリンクする方法はありません。あなたはその効果を達成するためにいくつかのJavaScriptの接着剤を含める必要があります。私の好きな方法は、ウィンドウonscrollのイベントにバインドしてアニメーションコードをそこに置くことです。

2

私はscrollTop()メソッドを使用しています。偉大なプラグインだ

#my-div { 
    width:200px; 
    height:200px; 
    background-color:red; 
} 
#my-div.animate { 
    transition: rotate(30deg); 
} 
関連する問題