[JS]jQuery初心者もOK、サイトにアニメーション効果を取り入れるチュートリアル

jQueryを使用して、サイトにフェードやスライド、表示・非表示、タイマーなどのアニメーション効果を取り入れるチュートリアルを紹介します。

サイトのキャプチャ

Super-Easy Animated Effects with jQuery

チュートリアルは英語ですが、使用する関数、ソース(HTMLとJavaScript)が必要最小限でまとめられており、デモページ(シンプルすぎかも)もあるため、英語が苦手な人でも大丈夫だと思います。

下記に、チュートリアルをいくつかご紹介。

アニメーションでフェードイン・フェードアウト

サイトのキャプチャ

デモページ

指定したオブジェクトをフェードで表示・非表示、50%の半透明でフェードさせます。

アニメーションで表示・非表示

サイトのキャプチャ

デモページ

オブジェクトを表示・非表示、アニメーションで表示・非表示させます。

アニメーションでスライドアップ・スライドダウン

サイトのキャプチャ

デモページ

オブジェクトをアニメーションで上下にスライドさせます。

アニメーションで移動

サイトのキャプチャ

デモページ

オブジェクトをアニメーションで左右に移動させます。

アニメーション効果を連続で組み合わせる

サイトのキャプチャ

デモページ

複数のエフェクトを連続で実行させます。

サイトでは他にもアニメーションにディレイやストップを加えたチュートリアルがあります。

sponsors

top of page

©2018 coliss