Bloosh Company

Development>フロントエンド

Intersection Observerで、少しスクロールしたら現れるヤツ

, , ,

前回のJavaScriptとcssで要素をふわっと表示させるアニメーションに引き続き、JavascriptのIntersection Observer APIを使って、少しスクロールしたら右下からぴょこんと現れるヤツを作りたいと思います。「トップへ戻る」ボタンなどに使えます。

「少しスクロールしたら」とは、「スクロール位置がヘッダーより下になったら」という定義で進めたいと思います。
スクロールした方、右下にサンプルの亀が現れているでしょうか。
 

HTML

<button id="totop">トップへ</button>

 

CSS

#totop{
	position:fixed;
	right:10px; bottom:-300px;
	transition:bottom 1s;
}#totop.active{
	bottom:10px;
}

position:fixed;で、transitionでアニメーションをつけてます。位置の数字はお好みで変更してください。
通常は画面の300px下に隠れていて、activeクラスが付くと画面内に現れます。
 

JavaScript


const header = document.querySelector('header'),
		totop = document.getElementById('toTop'),
		options = {
			root : null,
			rootMargin : "0px 0px 0px 0px",
			threshold: 1.0
		};

const observer = new IntersectionObserver((entries) => {
	for(const e of entries) {
		if(e.isIntersecting) {
			totop.classList.remove('active');
		} else{
			totop.classList.add('active');
		}
	}
}, options);
observer.observe(header);

headerを監視して、画面外に出たら#totop要素にactiveクラスをつけるということをしてます。
optionsは、今回は初期値なんですが、例えば「ヘッダーを半分通過したら」などいろいろ指定することができます。
 
参考サイト:
Intersection Observer API (MDN WEB DOCS) 

オレンジになった亀

Intersection Observerで、少しスクロールしたら現れるヤツ #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #intersectionobserver #JavaScript #軽量化

<<次の記事

SEO対策!WordPress投稿の日付にTIMEタグとDATETIME属性を設定する

前の記事>>

JavaScriptとcssで要素をふわっと表示させるアニメーション

Tweets by blooshcompany