更新日2019年11月22日

Web制作でよく使っているjQueryサンプル

私がWeb制作でよく使っているjqueryのサンプルまとめです。ソースコードの詳細な説明および情報の網羅は行っていないのでご注意ください。
  • 画面が完全に読み込まれてから、アニメーション発動

画面が完全に読み込まれてから、アニメーション発動

webサイト画面の読み込みが完了してから動き出すアニメーション。

jqueryのappendメソッドを用いて、画面が完全に読み込まれた後にimgタグを追加してアニメーションを開始します。

画面が読み込まれる前(ロード中の状態)に、アニメーションが先に動き出してしまうのを防ぐのが目的です。

トップ画面(ファーストビュー)で簡単なアニメーションを動かしたい場合などに効果的。似た性質に「ready」イベントがありますが、完全に読み込みが完了してから発動するのは「load」イベントです。

ファーストビューで視認できる場所に設置

当然のことですが、アニメーションはファーストビューで視認できる場所に配置しないと意味がありません。

ページの途中でスタートさせたい場合、Javascriptでページ位置を取得する必要あり

ページの途中でアニメーションをスタートさせたい場合には、Javascriptでページ位置を取得する必要があります。

(画像を横からフェードインする系とか)