おしゃれなWEBサイトを作りたい際、
フワッ。。
と要素が出てくるサイトに憧れるものです。
See the Pen Untitled by ma-chan (@ma-chan) on CodePen.
こんな感じですよね。
わかります。
僕もWEB制作を勉強する前は、
オシャレやないか。。。
と感心しました。
ここまで到達するにはかなり勉強しなきゃダメなんやろな。。。
しかし勉強してみると気づきました。
意外と簡単やないか。。。
大前提にJavaScriptの基礎が固まっている必要はあります。
しかし、
基礎が分かっていれば数行のコードで実装できます。
結論としてはJavaScriptの組み込みAPIの一つであるIntersectionObserverを使います。
ちなみに上記の実装は以下のコードで作成できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="oya">
<div class="ko ko1" data-delay="0.3">要素</div>
<div class="ko ko2" data-delay="0.6">要素</div>
<div class="ko ko3" data-delay="0.9">要素</div>
</div>
<script src="./main.js"></script>
</body>
</html>
.oya {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.ko {
height: 150px;
width: 150px;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
opacity: 0;
transition: opacity 3s ease, transform 1s ease;
}
.ko1 {
transform: translateX(-200px);
}
.ko2 {
transform: translateX(200px);
}
.ko3 {
transform: translateX(-200px);
}
.show {
opacity: 1 !important;
transform: translateX(0) translateY(0) !important;
}
document.addEventListener("DOMContentLoaded", () => {
const boxes = document.querySelectorAll(".ko");
const observer = new IntersectionObserver(
(entrys) => {
entrys.forEach((entry) => {
if (entry.isIntersecting) {
const box = entry.target;
const delay = box.dataset.delay || 0;
setTimeout(() => {
box.classList.add("show");
}, delay * 1000);
}
});
}
);
boxes.forEach((box) => observer.observe(box));
});
この記事では自分が指定した要素を
フワッ。。
と出現させる方法を具体的に解説していきます。
こちらをマスターすればコーディングやデザインのアイデアの幅が広がること間違い無いです。
ぜひ最後までご覧ください。
この記事はHTML/CSSはもちろんですが、
JavaScriptの基礎知識を身につけてる事が前提になります。
まず初めに
JavaScriptを解説する前にHTMLとCSSで設定するべきことを解説します。
要素をどこに配置にするかは個人の自由です。
ただ、これを設定しないと
フワッ。。
と要素を出現させられない箇所があります。
そちらを解説していきます。
HTMLの初期設定
まずHTMLで設定して欲しい記述は以下になります。
data-delay="0"この記述を出現させたい要素の中に記述してください。
先述のコードの例でいうと、こちらになります。
<div class="ko ko1" data-delay="0.3">要素</div>
<div class="ko ko2" data-delay="0.6">要素</div>
<div class="ko ko3" data-delay="0.9">要素</div>中にある『0.3・0.6・0.9』と書いてあるものは一旦無視していただいて大丈夫です。
CSSの初期設定
CSSに関して最初に設定することは３つあります。
・出現させる要素の初期位置をズラす
・出現させる要素を最初は透明にする
・要素を出現させるクラスを作成する
一つずつ解説していきます。
出現させる要素の初期位置をズラす
まず出現させる要素の初期位置をズラしましょう。
左から出したければ左にズラして、上から出したければ上にズラします。
具体的には、transformプロパティを使用します。
transformプロパティを出現させたい要素に記述します。
このあたりは好みなのですが、上から出現させたい場合は、
transform: translateY(200px);左から出現させたい場合は、
transform: translateX(-200px);下から出現させたい場合は、
transform: translateY(-200px);右から出現させたい場合は、
transform: translateX(200px);この様に使い分けましょう。
中は200pxじゃなくても大丈夫です！
自分の好みで設定しましょう。
出現させる要素を最初は透明にする
フワッ。。
と要素を出現させるためには、最初に要素を透明化しておきます。
そこで使うのが、opacityプロパティです。
opacity: 0;こちらを
フワッ。。
と出現させたい要素に記述してください。
要素を出現させるクラスを作成する
最後に要素を出現させるためのクラスを作成します。
具体的にはこんな感じです。
.show {
opacity: 1 ;
transform: translateX(0) translateY(0);
}こちらは要素に記述するのではなく、クラス名だけを作成します。
これで準備は完成しました。
JavaScriptの実装
ここからが本番です。
JavaScriptの設定を行います。
やるべきことは以下になります。
・DOMContentLoadedイベントを設定
・出現させたい要素を取得
・IntersectionObserverの初期化
・出現させる時間を設定
・実際に出現させるコードを記述
です。
簡単と言いましたが、書いてる途中で意外と難しい事に気づきました。
最後までついてきてください。
DOMContentLoadedイベントを設定
まず初めにDOMContentLoadedイベントを設定します。
document.addEventListener("DOMContentLoaded", () => {
})DOMContentLoadedのイベントの意味を簡単に解説すると、
HTMLのコードを完全に表示させてからJavaScriptを実行する
です。
正直これがなくても上手くいく可能性は高いです。
しかし状況次第では思わぬ不具合が生じることもあります。
このイベントの中でIntersectionObserverを実行するのがベターです。
出現させたい要素を取得
次に出現させたい要素を取得します。
こちらは簡単です。
さっきのDOMContentLoadedイベントの中に記述しましょう。
document.addEventListener("DOMContentLoaded", () => {
//追加のコード
const boxes = document.querySelectorAll(".ko");
})こうです。
この【boxes】は配列として取得されています。
IntersectionObserverの初期化
次に
JavaScriptでIntersectionObserverを初期化します。
具体的には、こんな感じです。
const observer = new IntersectionObserver((entrys) => {
})その後に、こちらのコードを加えます。
const observer = new IntersectionObserver((entrys) => {
//追加のコード
entrys.forEach(entry => {
if (entry.isIntersecting) {
const box = entry.target
}
})
})簡単に説明すると、【entrys】は、シュッと出現する要素の事です。
ここでいうところのクラス名の【ko】です。
この【ko】というクラス名は配列で取得されています。
配列を処理するためには【foreach】を実行します。
これで【ko】の一つ一つの名前が【entry】に置き換わりました。
そして、もし【entry】が感知されたら、つまり【isIntersecting】になれば、【box】と言う変数に【entry】という【target】を代入します。
これで感知させるべき要素をIntersectionObserverに認識させる事が出来ました。
出現させる時間を設定
ここで出現させる要素のタイミングを設定していきます。
const observer = new IntersectionObserver((entrys) => {
entrys.forEach(entry => {
if (entry.isIntersecting) {
const box = entry.target
//追加のコード
const delay = box.dataset.delay || 0;
setTimeout(() => {
box.classList.add("show");
}, delay * 1000);
}
});
}
})
})
まず、【delay】という変数の中に【box.dataset.delay】か、【0】という数字を代入しました。
【box.dataset.delay】というのは、HTML内で記載した、【data-delay】のことです。
<div class="ko ko1" data-delay="0.3">要素</div>
<div class="ko ko2" data-delay="0.6">要素</div>
<div class="ko ko3" data-delay="0.9">要素</div>これです。
つまりこの例でいくと、【 0.3 or 0.6 or 0.9 or 0 】が【delay】に代入されるということになります。
【box.dataset.delay】が何もなければ【0】が代入されます。
これらの数字が画面に出現させるまでの秒数です。
0.3であれば0.3秒遅れて表示されて、0.6であれば0.6秒遅らせて表示させます。
この【delay】を【setTimeout】の第二引数に記述します。
これで完成です。
実際に出現させるコードを記述
ここでついに実際に出現させるコードを記述します。
document.addEventListener("DOMContentLoaded", () => {
const boxes = document.querySelectorAll(".ko");
const observer = new IntersectionObserver((entrys) => {
entrys.forEach((entry) => {
if (entry.isIntersecting) {
const box = entry.target;
const delay = box.dataset.delay || 0;
setTimeout(() => {
box.classList.add("show");
}, delay * 1000);
}
});
});
//追加のコード
boxes.forEach((box) => observer.observe(box));
});
こちらを最後に記述します。
コード自体は単純です。
先ほどインスタンス化した【observer】のメソッドである【observe】の中にフワッ。。と出現させる要素を入れます。
これで実装完了です。
お疲れ様でした。
まとめ
ここまで読んでいただきありがとうございました。
少しJavaScriptの知識が必要ですが、基礎さえ学べばかなり簡単に実装出来ます。
ぜひポートフォリオやデザインのアイデアにご活用ください。
