cssのみでパララックス効果のメモ帳コピペ可能

パララックス効果をCSSで作成するには、背景画像に対してfixedポジションを設定し、スクロール量に応じて背景画像を移動させることで実現します。

以下に、簡単なパララックス効果を作成するためのHTMLとCSSの例をメモします。

.parallax {
  height: 100vh;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  position: relative;
}

.parallax:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.parallax {
  background-image: url("http://fukugyo-sensei.com/wp-content/uploads/2021/10/%E7%9B%AE%E6%A8%993.jpg");
}

.parallax .parallax-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

<section class="parallax">
<div class="parallax-content">
<h1>Parallax Section 1</h1>
</div>
</section>

これだとiosで動きませんでしたので
ios版もメモしておきます。
スマホで動かないとちょっと厳しいですよね…

.parallax {
position: relative;
height: 100vh;
overflow: hidden;
}


.parallax__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
z-index: -1;
}


.parallax__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: #fff;
}

<script>
document.addEventListener("DOMContentLoaded", function() {
var parallax1 = document.querySelector("#parallax1");
var background1 = parallax1.querySelector(".parallax__background");


function setParallaxBackgroundPosition1() {
var offset = window.pageYOffset;
background1.style.transform = "translateY(" + (offset * 0.5) + "px)";
}


setParallaxBackgroundPosition1(); /* 初期表示時に位置を設定する */
window.addEventListener("scroll", setParallaxBackgroundPosition1);

</script>

<div class="parallax" id="parallax1">
<div class="parallax__background" style="background-image: url('your-background-image-1.jpg')"></div>
<div class="parallax__content">
<!-- ここにコンテンツを記述する -->
</div>
</div>

関連記事