JavaScriptアニメーションで要素を左からスライドさせて表示する方法

2024-04-02

jQueryで要素を左にスライドして表示する

準備

以下の準備が必要です。

jQuery ライブラリ
jQuery effects プラグイン

jQuery ライブラリ は公式サイトからダウンロードできます。

https://jquery.com/download/

jQuery effects プラグイン は、jQuery ライブラリに含まれていないため、別途ダウンロードする必要があります。

コード例

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryで要素を左からスライドさせて表示</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div id="target">
    <h1>左からスライドして表示</h1>
  </div>
  <script>
  $(function() {
    $("#target").hide();
    $("#target").show("slide", {
      direction: "left"
    }, 1000);
  });
  </script>
</body>
</html>

解説

#target 要素は、最初は非表示になっています。
show() メソッドを使用して、#target 要素を表示します。
slide というエフェクトを指定します。
direction オプションで、スライドの方向を "left" に設定します。
1000 は、アニメーションの速度をミリ秒単位で指定します。

スライドの方向は、direction オプションで "right" に設定すると、右からスライドして表示されます。
アニメーションの速度は、duration オプションで変更できます。
イージング効果を指定するには、easing オプションを使用します。

詳細は、jQuery effects プラグインのドキュメントを参照してください。

https://api.jquery.com/category/effects/

jQuery effects プラグインを使用すると、要素をさまざまなアニメーションで表示できます。

この例を参考に、さまざまなアニメーションを試してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryで要素を左からスライドさせて表示</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div id="target">
    <h1>左からスライドして表示</h1>
  </div>
  <script>
  $(function() {
    $("#target").hide();
    $("#target").show("slide", {
      direction: "left"
    }, 1000);
  });
  </script>
</body>
</html>

実行方法

上記のコードを HTML ファイルに保存します。
ブラウザでファイルを開きます。

結果

#target 要素が左からスライドして表示されます。

jQueryで要素を左からスライドして表示する他の方法

CSS アニメーションを使用すると、コードをより簡潔に記述できます。

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSアニメーションで要素を左からスライドさせて表示</title>
  <style>
  #target {
    animation: slide-left 1s ease-in-out;
  }

  @keyframes slide-left {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }
  </style>
</head>
<body>
  <div id="target">
    <h1>左からスライドして表示</h1>
  </div>
</body>
</html>

#target 要素に animation プロパティを設定します。
animation プロパティには、アニメーションの名前、時間、イージング効果を指定します。
@keyframes ルールで、アニメーションの内容を定義します。
from キーフレームは、アニメーションの開始状態を定義します。

JavaScript アニメーションを使用すると、より柔軟なアニメーションを作成できます。

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptアニメーションで要素を左からスライドさせて表示</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div id="target">
    <h1>左からスライドして表示</h1>
  </div>
  <script>
  $(function() {
    var target = $("#target");
    target.css("left", "-100%");
    target.animate({
      left: "0"
    }, 1000);
  });
  </script>
</body>
</html>