クリエイター:コーディング備忘録ブログ

コーディング

要素が見えたタイミングでイベントを開始させる

CSS3のアニメーションなどで、要素が見えた瞬間にアニメーションさせたいという場面があったので、
備忘録的なメモです。

ブラウザ上で見えたときに処理を実行するには、
要素までのスクロール量を収得してイベントを発火させるか,
プラグインで、イベントさせるかがあります。

jquery.inview

プラグインを使用する場合

ダウンロードしたquery.inview.jsをhead内で読み込み、

.on(‘inview’, function(){});でイベントの記述をします。

上記のように記述することで、見えたときにアニメーションのフェードインをさせることができます。

単にjsで実行する場合下記のように記述すればOKです。

コメント

この記事へのコメントはありません。

RELATED

PAGE TOP