【コピペ可】オンラインショップで購入を促す！CSSアニメーション3選

オンラインショップに訪れたユーザーが買い物したくなるアニメーションが知りたい。

そんな方に向けてCSS と JavaScript で実装する三つのアニメーションを紹介します。

対象読者

HTMLとCSSの基本を理解している人
アニメーションを学びたい人
オンラインショップを運営していて、ユーザーの購買意欲を刺激したい人

それではさっそくやっていきましょう。

マウスホバー時に色が変わる購入ボタン
マウスホバー時にズームする画像
カテゴリーフィルター
1. フィルターボタンのアクティブ化
2. アイテムのフィルター表示
まとめ

マウスホバー時に色が変わる購入ボタン

マウスホバーすると購入ボタンの背景色が徐々に変化するアニメーションを実装しています。

ユーザーの操作に反応することで、操作可能なボタンであることを伝え、クリックを促すことができます。

JavaScriptは使わずCSSのみで実装しています。

See the Pen purchase button by jun (@cpvhoorw-the-sasster) on CodePen.

解説

CSS

        
.btn {
⋮
（省略）
    /* 状態変化の定義 */
    transition: 0.5s all;
}
/* マウスオーバー時の背景色 */
.btn:hover {
    background:#ad691e;
}

transition プロパティは要素の２つの状態間の変化を定義するものです。
ボタンにホバーすると背景色が0.5秒かけて変わるように、transition プロパティを設定しています。

マウスホバー時にズームする画像

画像にマウスホバーすると、画像が徐々にズームするアニメーションを実装しています。

ユーザーにインパクトを与えて画像の印象が残りやすくなります。

JavaScript は使わず CSS のみで実装しています。

See the Pen Untitled by jun (@cpvhoorw-the-sasster) on CodePen.

解説

CSS

          
.sample_box img:hover{
    transform:scale(1.2,1.2);
}

上記のコードで画像ホバー時に画像が1.2倍拡大するようにしています。

          
.sample_box img{
    transition:1s all;
}

上記のコードでホバー時の画像拡大の完了まで1秒かかるようにし、アニメーションを加えています。

          
.sample_box{
    overflow:hidden;
    width:200px;
}

上記のコードで、画像の親要素の幅を 200px（元の画像サイズに合わせている）に設定し、 overflow:hidden でそこからはみ出た部分を非表示にしています。

もし overflow:hidden がなければ以下のように画像が拡大されるとその分表示される領域も広がります。

See the Pen img-scaleUp by jun (@cpvhoorw-the-sasster) on CodePen.

カテゴリーフィルター

選んだカテゴリーのアイテムだけ表示されます。
アイテムが徐々に透明になるようにアニメーションをかけています。アイテムの余韻をユーザーに残すことができます。

CSS と JavaScript を使用して、実装しています。

See the Pen filtering-by-category by jun (@cpvhoorw-the-sasster) on CodePen.

フィルターボタンのアクティブ化

選んでいるフィルターボタンの背景色を赤色、文字色を白色にする実装を解説します。

解説

以下のようにクラスに is-active が含まれているフィルターボタンがアクティブ状態となり、赤く表示されます（赤くなるのは CSS で .filter-btn にスタイルをあてているからです）。

最初は「すべて」フィルターボタンのみにクラス is-active がついていて、
その後クリックするとクリックしたフィルターボタンにのみクラス is-active がつきます。
このクラス is-active のつけ外しは JavaScript で行なっています。

HTML

          
<!-- カテゴリーフィルターボタン -->
<button class="filter-btn category-label is-active" data-category="all">すべて</button>

CSS

          
.filter-btn.is-active {
    background-color: red;
    color: #fff;
}

JavaScript

          
const categoryLabels = document.querySelectorAll('.category-label');
⋮
（省略）
const activeClass = 'is-active';

// フィルターボタンのクリックイベント
categoryLabels.forEach(label => {
    label.addEventListener('click', function () {
        // フィルターボタンのアクティブ状態の更新
        updateActiveCategory(label);
⋮
（省略）
function updateActiveCategory(selectedLabel) {
    // 最初に全てのフィルターボタンのアクティブ状態を解除する
    categoryLabels.forEach(label => {
        label.classList.remove(activeClass);
    });
    // クリックしたフィルターボタンをアクティブ状態にする
    selectedLabel.classList.add(activeClass);
}

アイテムのフィルター表示

選んだカテゴリーのアイテムのみ表示されるフィルター機能の実装を解説します。

解説

また、アイテムの表示はクラス is-hide が付いているアイテム以外が表示されます。
最初は「すべて」が選択されているのでどのアイテムにも is-hide はついていません。

フィルターボタンをクリックすると、クリックしたカテゴリー以外のアイテムに is-hide クラスがつきます。
例えばインナーでフィルターすると、以下のように data-category の値が outer と slacks の li 要素にクラス is-hide がつきます。
そしte クラス is-hide がついた要素は CSS で opacity プロパティと visibility プロパティを用いて非表示にしています。

※アイテムの非表示は display:none でもできますが挙動が変わってきます。後述の補足で解説します。

HTML

    
<button class="filter-btn category-label" data-category="inner">インナー</button>
⋮
（省略）
    <!-- 服の一覧 -->
    <ul class="clothes-list">
        <li class="cloth-item category-item" data-category="inner">
            <img src="https://otodoketips.com/wp-content/uploads/2024/03/inner.png" height="80">
        </li>
        <li class="cloth-item category-item is-hide" data-category="outer">
            <img src="https://otodoketips.com/wp-content/uploads/2024/03/outer.png" height="80">
        </li>
        <li class="cloth-item category-item is-hide" data-category="slacks">
            <img src="https://otodoketips.com/wp-content/uploads/2024/03/slacks.png" height="80">
        </li>
    </ul>
</div>

CSS

          
li.cloth-item {
    display: inline-block;
    opacity: 1;
    visibility: visible;
    transition: all 0.5s;
}
⋮
（省略）
.cloth-item.is-hide {
    opacity: 0;
    visibility: hidden;
}

transition プロパティと opacity プロパティの組み合わせで要素を徐々に透明にするアニメーションを実装しています。
ただあくまでも透明なだけで、クリックなどで操作できてしまいます。
そこで visibility:hidden にしクリックなどの操作を行えなくしています。

JavaScript

        
document.addEventListener('DOMContentLoaded', function () {
const categoryLabels = document.querySelectorAll('.category-label');
const categoryItems = document.querySelectorAll('.category-item');
const hideClass = 'is-hide';
⋮
（省略）
// フィルターボタンのクリックイベント
categoryLabels.forEach(label => {
    label.addEventListener('click', function () {
⋮
（省略）
        // 選択されたカテゴリーに基づいてアイテムをフィルタリング
        filterItemsByCategory(this.dataset.category);
    });
});
⋮
（省略）
function filterItemsByCategory(category) {
  categoryItems.forEach(item => {
      item.classList.remove(hideClass); // デフォルトで全て表示
      // 「すべて」フィルターボタン選択時は全て表示したままで処理を終える
      if (category == 'all') {
          return;
      }
      // 「すべて」以外のフィルターボタン選択時は、選択したカテゴリー以外のアイテムを非表示にする
      if (item.dataset.category !== category) {
          item.classList.add(hideClass);
      }
  });
}

補足

上のカテゴリーフィルターではアイテムの表示/非表示に opacity プロパティと visibility プロパティを使用しました。

display:none でも同じことができそうですが、以下の違いがあります。