スムーズなスライドインアニメーションでウェブページを魅力的に

Posted on by

ウェブページ上でのコンテンツ表示は、ユーザーの注意を引きつける大切な要素です。今回は、JavaScriptとCSSを駆使して、コンテンツをスムーズにスライドイン表示させる方法を紹介します。
このテクニックを使えば、ユーザーがページ上の特定のアクション（例えば、ボタンクリック）を行った際に、コンテンツが下から上にスライドしながら現れるアニメーションを実装できます。

実装のステップ

HTMLの準備

まずは、アニメーションさせたいコンテンツと、そのコンテンツを表示させるトリガーとなるボタンをHTMLに追加します。

  <p id="slideButton">スライド表示 / 非表示</p>
  <div id="slideUpContent" class="slide-content">
    ここにスライド表示されるコンテンツが入ります。
  </div>

CSSでアニメーションを定義

次に、スライドインアニメーションを@keyframesを使用してCSSで定義します。transformのtranslateYを活用して、コンテンツを垂直方向に動かすアニメーションを作成します。

#slideUpContent {
  overflow: hidden;
  animation-fill-mode: forwards;
}

.slideIn {
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

JavaScriptでアニメーションを制御

最後に、JavaScriptを使ってボタンクリック時にアニメーションを開始します。表示されているコンテンツを再度クリックすることで、スムーズに非表示にする機能も実装します。

document.getElementById("slideButton").addEventListener("click", function() {
  var content = document.getElementById("slideUpContent");
  if (content.style.display === "none" || content.style.display === "") {
    content.style.display = "block"; // コンテンツを表示
    setTimeout(function() {
      content.classList.add("slideIn"); // アニメーションクラスを追加
    }, 10);
  } else {
    content.style.display = "none"; // コンテンツを非表示
    content.classList.remove("slideIn"); // アニメーションクラスを削除
  }
});

まとめ

このように、JavaScriptとCSSを組み合わせることで、ユーザーインタラクションに応じてコンテンツをスムーズに表示・非表示するアニメーションを実装できます。ユーザーエクスペリエンスを向上させるために、是非このテクニックをあなたのウェブページにも取り入れてみてください。