[Shopify]コピペで簡単!数字がカウントアップするセクション・100本ノック続編(Dawn) #108
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
数字がカウントアップされるセクション♪
✔️今回のゴール
🔸CMSの特徴
セクションA-7を選択
ーーーーーーーーーーー
✔️設定手順
Step1 新規セクション追加
1️⃣管理画面>コード編集>セクション>新規追加
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": "--- リスト1 ---"
},
{
"type": "number",
"id": "num1",
"label": "数値",
"default": 128,
"info": "カラムを非表示にする場合は「0」にしてください"
},
{
"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 %}
Step2 新規CSS追加
1️⃣アセット>新規追加>CSS
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」を選択してご使用ください。
ご覧いただきありがとうございました。
ここから先は
0字
この記事が気に入ったらサポートをしてみませんか?