[Shopify]iTyped.jsを使って見出しがタイピングされる画像バナーセクショ（Dawn） #101

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

既存の画像バナーセクションの見出しにタイピングアニメーションをつけてみます。今回使用するライブラリはiTyped.jsです！

今回は既存の機能やレイアウトはそのままです。

検証テーマ：Dawn
Dawn以外のテーマでもCSSは崩れると思いますがコードの書き方は使えます。

✔️今回のゴール

🔸CMSの特徴

既存の画像バナーの見出し入力ブロックにタイピングワードの項目を追加。
見出しの後ろにタイピングワードが表示されます！

シングルクォーテーション「'」をつけて挿入してください。
複数ワードを設定する場合は、カンマ「,」で区切ってね。
「'〇〇','〇〇','〇〇'」

✔️設置方法

Step1　iTyped.jsのCDNを設置

▪️iTyped.jsのCDNを使います

typed.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

上記のCDNをTheme.liquidファイルの</head>の直前に設置。

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.16/typed.umd.js" integrity="sha512-+2pW8xXU/rNr7VS+H62aqapfRpqFwnSQh9ap6THjsm41AxgA0MhFRtfrABS+Lx2KHJn82UOrnBKhjZOXpom2LQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

※theme.liquidに埋め込まなくても良いように後ほどご紹介するフルバージョンのコードではセクションファイル内に埋め込んでいます。もし設置位置自信がない場合はそちらをご使用ください。

Step2　セクション新規作成

1️⃣コード編集＞セクション＞新規追加

ファイル名はなんでもOK
→image-banner-typingにしてみました

2️⃣既存のimage-banner.liquidを開き全てコピーし新規作成したファイルに貼り付け

3️⃣SchemaのBlocks内のheadingに下記を追記。

,
          {
            "type": "html",
            "id": "keywords",
            "default": "'Write', 'Key Words', 'Here'",
            "label": "タイピングワード",
            "info": "シングルクオーテーションをつけて半角カンマ「'〇〇','〇〇'」で区切ってください"
          }

また、任意でセクション名を変更すると後で探しやすい！

（例）
・name: "画像バナー　タイピングアニメーション"
・presets: "画像バナー　タイピングアニメーション"

4️⃣タイピングのHTML表示部分を追加

下記をCtr ＋Fで検索。

 {{ block.settings.heading }}

その下に下記を挿入。

 <span id="{{ section.id }}" style="font-style: italic;"></span>
            <script>
              ityped.init('#{{ section.id }}', {
                strings: [
                  {{ block.settings.keywords }}
                ],
                typeSpeed: 100,
                backSpeed: 50,
                startDelay: 500,
                backDelay: 800,
                loop: true,
                showCursor: true,
                onFinished: function() {
                  console.log("loop:falseの時のみ")
                }
              });
            </script>

※今回は見出しの後ろにタイピングするようにしているため、{{ block.settings.heading }}の後ろに挿入していますが、もし見出しの前とか他の位置にしたい場合はお好みで調整してください。

保存したら完了です！
CMSからお好きなところに設置してみてください＾＾

✔️フルバージョンのコード

Step2の2️⃣以降のフルバージョンのコードを掲載しておきます。そのままコピペして使用できるようにitype.js CDNも埋め込んでいますのでTheme.liquidに挿入する必要もなしです。

【ご注意】
※返金&サポート&コメント返信はしておりません。
※最新のDawnテーマ対象です。
※コードのみのご紹介で解説などはしておりません。
※2023.9時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。（メンバーシップでコメント頂いた場合は修正します）