[Shopify]コピペで簡単！数字がカウントアップするセクション・100本ノック続編（Dawn） #108

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

数字がカウントアップされるセクション♪

ベーステーマ：Dawn
※他のテーマでも挿入できると思いますがレイアウト崩れるかもしれないのでその場合はご自身で調整してね

✔️今回のゴール

🔸CMSの特徴

セクションA-7を選択
ーーーーーーーーーーー

・カラー
　→数字の部分の色
・画像

・タイトル
・説明文

・数字３カラム
　数値を「０」にするとカラム非表示

・ボタン
・セクション余白

✔️設定手順

Step１　新規セクション追加

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

ファイル名はなんでもOK
→私はsection-a-07で作成しました

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

2️⃣下記のコードをコピペ

🔸セクションコード

{{ 'section-a-07.css' | asset_url | stylesheet_tag }}

{%- style -%}
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }
  
    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }
  
  {%- endstyle -%}

<div class="section-a-07 {{ section.id }} section-{{ section.id }}-padding">
    <div class="page-width">
        <div class="_flex">
            {% if section.settings.image != blank %}
            <div class="col-half">
                <div class="img_wrap">
                    <img srcset="{{ section.settings.image | image_url }} {{ section.settings.image.width }}w"
                       src="{{ section.settings.image | image_url: 'master' }}"
                        alt="{{ section.settings.image.alt | escape }}"
                        loading="lazy">
                </div>
            </div>
            {% endif %}
        <div class="{% if section.settings.image != blank %}col-half{% endif %} text_wrap">
            <div>{{ section.settings.heading }}</div>
            <div>{{ section.settings.description }}</div>
            <div>
                <ul class="_flex number_lists">
                    {% if section.settings.num1 > 0 %}<li><p class="_number" style="color:{{ section.settings.c-num }};" data-count="{{ section.settings.num1 }}">0</p><p class="_subtxt">{{ section.settings.subtxt1 }}</p></li>{% endif %}
                    {% if section.settings.num2 > 0 %}<li><p class="_number" style="color:{{ section.settings.c-num }};" data-count="{{ section.settings.num2 }}">0</p><p class="_subtxt">{{ section.settings.subtxt2 }}</p></li>{% endif %}
                    {% if section.settings.num3 > 0 %}<li><p class="_number" style="color:{{ section.settings.c-num }};" data-count="{{ section.settings.num3 }}">0</p><p class="_subtxt">{{ section.settings.subtxt3 }}</p></li>{% endif %}
                </ul>
            </div>
            {% if section.settings.btn-link %}
            <div class="btn_wrap">
                <a href="{{ section.settings.btn-link }}" class="_btn">{{ section.settings.btn-txt }}
                    <span class="_arrow"><svg width="61" height="16" viewBox="0 0 61 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M60.7071 8.70711C61.0976 8.31658 61.0976 7.68342 60.7071 7.29289L54.3431 0.928932C53.9526 0.538408 53.3195 0.538408 52.9289 0.928932C52.5384 1.31946 52.5384 1.95262 52.9289 2.34315L58.5858 8L52.9289 13.6569C52.5384 14.0474 52.5384 14.6805 52.9289 15.0711C53.3195 15.4616 53.9526 15.4616 54.3431 15.0711L60.7071 8.70711ZM0 9H60V7H0V9Z" fill="black"/>
                        </svg>
                    </span>
                </a>
            </div>
            {% endif %}
        </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const shuffleNumberCounters = document.querySelectorAll('._number');

  shuffleNumberCounters.forEach(target => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const targetNum = Number(target.dataset.count);

          if (!targetNum) return;

          let counterData = null;
          const increment = targetNum > 500 ? 50 : 1; // 1000を超える場合は50単位、それ以下は1単位で増加
          const speed = increment === 1 ? 15 : 30; // 単位が1の時は速く、その他は少し遅く
          let initNum = 0;

          const countUp = () => {
            target.textContent = initNum.toLocaleString();
            initNum += increment;

            if (initNum > targetNum) {
              target.textContent = targetNum.toLocaleString(); // 最終的な数値を設定
              clearInterval(counterData);
            }
          };

          counterData = setInterval(countUp, speed);

          observer.unobserve(target);
        }
      });
    }, {
      threshold: 0.5
    });

    observer.observe(target);
  });
});
</script>



{% schema %}
    {
      "name": "セクションA-7",
      "tag": "section",
      "class": "malin",
      "settings": [
        {
          "type": "color",
          "id": "c-num",
          "label": "カラー(数字)",
          "default": "#246170"
        }, {
          "type": "header",
          "content": "コンテンツ"
        },  {
          "type": "image_picker",
          "id": "image",
          "label": "画像"
        }, {
          "type": "richtext",
          "id": "heading",
          "label": "タイトル",
          "default": "<h2>タイトルタイトルタイトル</h2>"
        },
        {
          "type": "richtext",
          "id": "description",
          "label": "説明文",
          "default": "<p>ダミーテキストを入れています。ダミーテキストを入れていますダミーテキストを入れています、ダミーテキストを入れています。</p>"
        },
        {
          "type": "paragraph",
          "content": "--- リスト１ ---"
        },
        {
          "type": "number",
          "id": "num1",
          "label": "数値",
          "default": 128,
          "info": "カラムを非表示にする場合は「０」にしてください"
        },
        {
          "type": "text",
          "id": "subtxt1",
          "label": "サブテキスト",
          "default": "月間<br>アクセス数",
          "info": "<br>タグ可"
        },
        {
          "type": "paragraph",
          "content": "--- リスト2 ---"
        },
        {
          "type": "number",
          "id": "num2",
          "label": "数値",
          "default": 4000
        },
        {
          "type": "text",
          "id": "subtxt2",
          "label": "サブテキスト",
          "default": "月間　アクセス数",
          "info": "<br>タグ可"
        },
        {
          "type": "paragraph",
          "content": "--- リスト3 ---"
        },
        {
          "type": "number",
          "id": "num3",
          "label": "数値",
          "default": 600
        },
        {
          "type": "text",
          "id": "subtxt3",
          "label": "サブテキスト",
          "default": "年間<br>ダウンロード数",
          "info": "<br>タグ可"
        },
        {
          "type": "paragraph",
          "content": "--- ボタン ---"
        },
        {
          "type": "text",
          "id": "btn-txt",
          "label": "テキスト",
          "default": "Learn More"
        },
        {
          "type": "url",
          "id": "btn-link",
          "label": "リンク"
        },
        {
          "type": "header",
          "content": "t:sections.all.padding.section_padding_heading"
        }, {
          "type": "range",
          "id": "padding_top",
          "min": 0,
          "max": 100,
          "step": 4,
          "unit": "px",
          "label": "t:sections.all.padding.padding_top",
          "default": 36
        }, {
          "type": "range",
          "id": "padding_bottom",
          "min": 0,
          "max": 100,
          "step": 4,
          "unit": "px",
          "label": "t:sections.all.padding.padding_bottom",
          "default": 36
        }
      ],
      "presets": [
        {
          "name": "セクションA-7"
        }
      ]
    }
  {% endschema %}

Step２　新規CSS追加

1️⃣アセット＞新規追加＞CSS

ファイル名は「section-a-07」で作成

2️⃣下記のコードをコピペ

🔸CSSコード

.malin .section-a-07 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}
.malin .section-a-07 p, .malin .section-a-07 h2, .malin .section-a-07 h3 {
  margin: 0;
}
.malin .section-a-07 h2 {
  font-size: 2.8rem;
  line-height: 1.5;
}
.malin .section-a-07 ._flex {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 5rem;
}
@media screen and (max-width: 749px) {
  .malin .section-a-07 ._flex {
    flex-wrap: wrap;
  }
}
.malin .section-a-07 .col-half {
  width: 50%;
}
@media screen and (max-width: 749px) {
  .malin .section-a-07 .col-half {
    width: 100%;
  }
}
.malin .section-a-07 .text_wrap {
  display: flex;
  flex-flow: column;
  gap: 3rem;
}
@media screen and (max-width: 749px) {
  .malin .section-a-07 .text_wrap {
    gap: 2rem;
  }
}
.malin .section-a-07 .number_lists {
  list-style: none;
  padding: 0;
  gap: 3rem;
  justify-content: space-around;
}
@media screen and (max-width: 749px) {
  .malin .section-a-07 .number_lists {
    gap: 2rem;
  }
}
.malin .section-a-07 .number_lists li {
  padding-right: 1rem;
  display: flex;
  flex-flow: column;
}
@media screen and (max-width: 749px) {
  .malin .section-a-07 .number_lists li {
    width: 100%;
    text-align: center;
    padding-right: 0;
  }
}
.malin .section-a-07 ._number {
  font-weight: bold;
  font-size: 3.5rem;
}
@media screen and (max-width: 749px) {
  .malin .section-a-07 ._number {
    order: 2;
    font-size: 10vw;
  }
}
.malin .section-a-07 ._subtxt {
  line-height: 1.2;
  font-size: 1.3rem;
  margin-top: 1rem;
}
@media screen and (max-width: 749px) {
  .malin .section-a-07 ._subtxt {
    order: 1;
  }
}
.malin .section-a-07 .btn_wrap {
  margin-top: 2rem;
}
@media screen and (max-width: 749px) {
  .malin .section-a-07 .btn_wrap {
    text-align: center;
    margin-top: 0;
    margin-bottom: 3rem;
  }
}
.malin .section-a-07 ._btn {
  display: inline-block;
  position: relative;
  border: 1px solid #000;
  padding: 1rem 3rem;
  text-decoration: none;
  font-size: 1.4rem;
  color: currentColor;
  font-weight: bold;
}
@media screen and (max-width: 749px) {
  .malin .section-a-07 ._btn {
    font-size: 1.6rem;
  }
}
.malin .section-a-07 ._btn:hover {
  opacity: 0.8;
}
.malin .section-a-07 ._btn:hover ._arrow {
  right: -3rem;
}
.malin .section-a-07 ._arrow {
  position: absolute;
  top: 25%;
  right: -2.3rem;
  transition-duration: 0.5s;
}
.malin .section-a-07 ._arrow svg {
  width: 35px;
}

以上で完了です！

カスタマイズ画面で「セクションA-7」を選択してご使用ください。
ご覧いただきありがとうございました。