jQueryでページに動きをつけよう!

jQueryでページに動きをつけよう!

jQueryでページに動きをつけるには、アニメーション、アンカーリンク、アコーディオン、Ajaxなどを使います。

動きのあるサイトを作るには?

アニメーションをサンプルで確認しよう!

アニメーションを追加することで、文字通り「動き」のあるサイトに仕上がります。

要素の表示、非表示を切り替えるときは、フェードやスライドを使いましょう。

アンカーリンクはスクロールで移動しよう!

アンカーリンクによるページ内移動を実装している場合、スクロール移動を追加しましょう。

移動後のスクロール位置も分かりやすいので、ユーザーにも親切です。

アコーディオンで文章やメニューをまとめよう!

文章が多い場合、アコーディオンでまとめてみるのも一つの手です。

ボタンのクリックで要素がスライドするアニメーションを追加できます。

また、長いメニューをアコーディオンメニューにすることで、ユーザービリティの向上にも繋がります。

Ajaxでコンテンツを更新しよう!

Ajaxでページ内のコンテンツを更新すれば、コンテンツに動きが生まれます。

コンテンツの更新時、コールバック関数で要素をフェードさせるなど、色々なギミックが追加できます。

面白い動きをつけるには?

.box {
    position: absolute;
    background: red;
    width: 5em;
    height: 5em;
}
let box = $('.box');

function animate() {
    box.hide(1000);
    box.show(1000);
    box.animate({left: '+=100'}, 1000);
    box.fadeOut(1000);
    box.fadeIn(1000);
    box.animate({left: '-=100'}, 1000);
    box.slideUp(1000);
    box.slideDown(1000);
    box.animate({left: '+=100'}, 1000, animate());
}

animate();

アニメーションメソッドを組み合わせれば、自由自在に要素を動かすことができます。

特に、要素のpositionにabsoluteを指定し、.animate()で相対位置を動かせば、簡単に動きを追加できます。

サンプルでは、.animate()のleftオプションに’+=100’を指定することで右に100px、’-=100’を指定することで左に100px動かしています。

まとめ

  • 動きのあるサイトを作るには、アニメーション、アンカーリンク、アコーディオン、Ajaxを使用します。
  • アニメーションメソッドの組み合わせで、面白い動きがつけられます。

入門カテゴリの最新記事