Rellax.jsでパララックスを実装しよう

夕日が沈む海辺で

その瞬間、空は黄金色に染まり、
心が静かに満たされる。

document.addEventListener('DOMContentLoaded', function() {
	
  var rellax = new Rellax('.rellax', {
    // パララックス効果のオプションを調整
    center: true,  // 要素を中心に配置する
    vertical: true // 垂直方向の動きを有効にする
  });
});

<div class="rellax-container">
	<img src="/wp-content/uploads/2025/01/yuu0024-009.jpg" alt="夕日" width="2000" height="1333" class="aligncenter size-full wp-image-474 rellax" />
	<div class="text-overlay">
		<h2>夕日が沈む海辺で</h2>
		<p>その瞬間、空は黄金色に染まり、<br>心が静かに満たされる。</p>
	</div>
</div>

.rellax-container {
    position: relative;
    overflow: hidden;
}
.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  text-align: center;
  color: #FFFFFF;
  z-index: 2;
  padding: 20px;
}

.text-overlay h2 {
  font-size: 3rem;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.text-overlay p {
  font-size: 1.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}