はじめに
今回のテーマはJavascriptでHTMLのdata属性を取得して、活用してみた。です。
具体例として、「スクロールすると要素がふわっと下から順番に出てくるアニメーション」を実装しながら簡単に解説していきます。
対象となる方
-
HTMLやCSS、Javascriptを勉強中の方
-
Web制作でコーディングをしている方
-
JavascriptでHTMLのdata属性を取得してみたい方
data属性とは
data属性とは、正式にはカスタムデータ属性といい、HTMLの要素に任意の名前をつけたデータを持たせることができるものです。
冒頭でもお話したように、CSSやjavascriptからこのデータを取得したり参照できます。
書き方は「data-*」といった形で、必ずdata-から始まります。
「data-en」や「data-name」、「data-number」のような感じです。
<div class="c-box" data-number="1" data-time="500"></div>
参考
data属性https://developer.mozilla.org
実装
それでは実装に移っていきます。
具体例のスクロールすると要素がふわっと下から順番に出てくるアニメーションを実装するなかで、data属性を使っていきます。
<p class="c-description">↓下にスクロールしてください↓</p>
<div class="l-container">
<div class="c-box" data-number="1" data-time="500"></div>
<div class="c-box" data-number="2" data-time="700"></div>
<div class="c-box" data-number="3" data-time="900"></div>
</div>
HTMLはこんな感じです。
3つ並んでるdivを作成し、クラス名とdata属性を与えます。
CSSでテキストを指定するための data-number
アニメーションに関する時間を指定するためにJavascriptで取得したいので data-time
をそれぞれ指定します。
.l-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 200px;
}
.c-box {
align-items: center;
aspect-ratio: 1 / 1;
background-color: #4eb99d;
display: flex;
justify-content: center;
margin: 5px;
min-width: 300px;
opacity: 0;
position: relative;
transform: translateY(100px);
}
.c-box::before {
content: attr(data-number);
font-size: 40px;
color: #fafafa;
}
.c-box.--active {
opacity: 1;
transform: translateY(0);
transition: 1s;
}
.c-description {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
margin-bottom: 200px;
width: 100vw;
}
HTMLのdata属性のdata-numberで設定した値を、CSSの疑似要素(::before)のcontentにアクセスしています。
書き方は、attr(data-number) で、
「そのCSSセレクタがあたっている要素のdata-number属性を参照する」
といった具合です。
これでそれぞれの要素の上に、data-numberで指定した数字が表示されるようになります。
window.addEventListener("scroll", () => {
document.querySelectorAll(".c-box").forEach((e) => {
const absoluteTop = e.getBoundingClientRect().top;
const relativeTop = window.pageYOffset;
const winHeight = window.innerHeight;
if (absoluteTop <= relativeTop + winHeight) { window.setTimeout(() => {
e.classList.add("--active");
}, e.dataset.time);
}
});
});
javascriptでは、まずc-boxクラスを持つ要素をすべて取得します。
そして、それぞれの要素が画面内に現れたら、–activceクラスを付与してアニメーションするようにしています。
その際に、HTMLで指定したdata-timeというdata属性の数値をJavascriptで取得して、てアニメーションの開始時間に差が生まれるようにしています。
書き方は、[オブジェクト].dataset.time です。
これで想定通りのスクロールアニメーションが実装できました。
まとめ
今回は、JavascriptでHTMLのdata属性を取得して、活用する方法について参考例を用いて解説してきました!
data属性をJavascriptで取得して活用するのはとても簡単です。使えるようになればコーディングの幅が広がるのでぜひ使ってみてください。
Web制作におけるJavascriptの基礎固め学習にはこちらの書籍がおすすめです。
是非ご覧になってJavascriptの知識を深めていきましょう。