ヘッダーのロゴを動かしたい

すん · ‎08-10-2023

ECサイト開設初心者です。

コーディングの知識もない素人ですが

下記サイトのように、ヘッダーのロゴを回転などの動作をさせたいのですが、

いろいろ調べても情報が得られずにいます。

どのような方法でできるのか、ご教示いただけますと幸いです。

ロゴの保存形式やコード編集が必要な場合、コーディングも知りたいです。

ちなみに今使っているテーマはDAWNです。

お手数おかけ致しますが、何卒よろしくお願いいたします。

▼参考サイト

https://wearebraindead.com/

Qcoltd · ‎08-23-2023

@すん様

参考サイト様のやり方をそのまま踏襲してしまいますが、

下記のようにされてはどうでしょうか？

※ Dawn 11.0.0で検証しました。

ストア管理画面 > オンラインストア > テーマ > 利用中のテーマの「コード編集」

で、スニペットのbase.cssの120行目付近に下記を追加します。

@keyframes spin {
  0% { -webkit-transform: rotate3d(0, 1, 0, 360deg); transform: rotate3d(0, 1, 0, 360deg) }
  50% { -webkit-transform: rotate3d(0, 1, 0, 180deg); transform: rotate3d(0, 1, 0, 180deg) }
  100% { -webkit-transform: rotate3d(0, 1, 0, 360); transform: rotate3d(0, 1, 0, 360) }
}

.header__heading {
  -webkit-animation: spin 12s infinite linear;
  animation: spin 12s infinite linear;
}

コード編集画面は下図のようになるはずです。

CSSアニメーションの設定方法については下記も参考になります。

https://developer.mozilla.org/ja/docs/Web/CSS/animation

https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/　テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

Qcoltd · ‎08-23-2023