要素を浮かび上がらせる

HTML

浮かび上がらせたい要素にclassを付与する。

<h1 class="floating-text">何らかのテキスト</h1>

CSS

opacityで要素を透明にする。

.floating-text {
    opacity: 0;
}

Javascript

function animateFloatingText() { ... }：animateFloatingText 関数は、テキストを浮かび上がらせるためのアニメーションを定義している。具体的には、floatingText 要素のスタイルに対して opacity（透明度）を1に設定し、transform を使用して要素をY軸方向に-20pxだけ上に移動させる。

setTimeoutは、第一引数に定義された関数を第二引数のmilisecond秒後に実行するもの。

document.addEventListener("DOMContentLoaded", function() {
	const floatingText = document.querySelector(".floating-text");
	
	function animateFloatingText() {
		floatingText.style.transition = "opacity 1s, transform 1s";
		floatingText.style.opacity = "1";
		floatingText.style.transform = "translateY(-20px)";
	}
	
	setTimeout(animateFloatingText, 500);
});

このコード全体の目的は、ページがロードされてから0.5秒後に.floating-textクラスを持つ要素の文字を浮かび上がらせるという動きを実現すること。