FROM CACHE - jp_header
解決済

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

すん
遊覧客
18 0 4

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

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

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

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

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

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

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

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

 

▼参考サイト

https://wearebraindead.com/ 

 

1 件の受理された解決策

Qcoltd
Shopify Partner
1051 429 413

成功

@すん 様

 

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

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

※ 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;
}

 

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

screenshot_20230824_01.png

 

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/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1051 429 413

成功

@すん 様

 

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

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

※ 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;
}

 

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

screenshot_20230824_01.png

 

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/
すん
遊覧客
18 0 4

ご教授いただきありがとうございます!

できました!