CSSでのパララックス作成方法

親要素に対しbackground-attachmentで手軽にパララックスを設定する方法があるが、このやり方はiOSが非対応なので使用不可です。

.parallax_area{
	position:relative;
	overflow:hidden;
  display: block;
  z-index: 1;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;*/
	background-image:url(../img/fixed_bg_maintenance.jpg) ;
}

対応策

親要素にclip-pathを使用し、疑似要素で背景画像を設置して対応

他にもやり方があるが、clip-pathを使用することでbackground-attachment: fixed;と同じような挙動で作成ができます。

また他の要素のしたに背景が映り込まないように、各セクションに背景色を指定する必要もありません。

.parallax_area{
	position:relative;
	overflow:hidden;
  display: block;
  z-index: 1;
	-webkit-clip-path: ellipse(50% 200px at 50% 50%); /*Safari, iOS Safari 用*/
	clip-path:ellipse(50% 50% at 50% 50%);
}
.parallax_area::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-size:cover;
	background-position: center;
	background-image:url(../img/fixed_bg_maintenance.jpg) ;
}

今回はアーチ状のマスクにする必要があったのでclip-path:ellipse(）を使用しており、実際は左右をはみ出させたり、下側の円形を隠すためにかなり拡大して設置しているが割愛してます。

参考サイト

background-attachment:fixedが効かない問題の最終解決策

霜月

background-attachment:fixedが効かない問題の最終解決策 CSSの background-attachment: fixed がApple製品で効いているかのように実装する方法を紹介しています。今まで、手軽に、思う存分できなかったパララックスも、簡単にでき...