トップへ戻るボタンをクリックすると画像を変える方法

ボタンクリック前

ボタンクリック後

図1のように、ボタンクリック前後の画像を作成します。
この際、2つの画像のサイズは同一にします。

Cocoon設定→ボタンで、図1に示したボタンクリック前の画像を設定します（図2参照）。

以下のコードをstyle.cssに追加します。サイズを適切に変更してください。

トップ戻るボタンをクリック時、CSSクラス追加のお願い

●要望 トップ戻るボタンクリックの際、トップに移動するまでの間、CSSクラスを追加願いたく。CSSクラスはお任せします。例はgo-to-top-upとします。 それぞれ以下のコードを追加します。 $(this).addClass('.go-...

wp-cocoon.com

/* 画像サイズ */
.go-to-top-button-image {
  height: 75px;
  width: 75px;

  /* トップ移動中 */
  &.go-to-top-up {
    img {
      display: none;
    }

    &::after {
      animation: upAnime 0.5s linear infinite;
      background-image: url('図1に示すボタンクリック後の画像URL');
      background-repeat: no-repeat;
      background-size: contain;
      content: '';
      display: block;
      height: 100%;
      width: 100%;
    }
  }
}

@keyframes upAnime {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

図3のように、1コマの画像幅を75pxとし、2コマ（幅150px）の画像を作成します。

以下のコードをstyle.cssに追加します。

.go-to-top-button-image {
  height: 75px;
  width: 75px;

  &.go-to-top-up {
    img {
      display: none;
    }

    &::after {
      animation: splice steps(2) 0.2s infinite;
      background-image: url('図3に示すボタンクリック後の画像URL');
      background-position: 0 0;
      background-repeat: no-repeat;
      content: '';
      display: block;
      height: 100%;
      width: 100%;
    }
  }
}

@keyframes splice {
  100% {
    background-position: -150px 0;
  }
}

1. 図4①に示す領域に、アニメーションPNGとするPNGファイルを、複数をドラッグします。

2. 図5②に示すように、各コマの表示時間を1/100秒単位で入力します。
3. 図5③に示すように、「フレームを積み重ねない」をチェックします。
   

4. 図6④に示すボタンをクリックします。
5. 図6⑤に示すボタンをクリックし、アニメーションPNGファイルをダウンロードします。