background-attachment: fixedを使わず、javascriptでパララックスを表現
以下のようなパララックスをjavascriptで作ってみました。
background-attachment: fixed;を使えば、CSSだけで作れるのですが、 safariやスマホでうまく動いてくれないので。
.gif)
HTML
sectionタグが1セットです。あと、好きなだけsectionを追加できます。
<section> <!-- 1セット -->
<div class="parallax bgI1">1</div> <!-- background-imageで画像を指定 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,quaerat fuga, accusantium eveniet tempore molestias provident solutalibero minima similique earum reiciendis blanditiis cum quod ipsum quiaitaque unde cumque?
</p>
</section>
<section> <!-- 1セット -->
<div class="parallax bgI2">2</div> <!-- background-imageで画像を指定 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,quaerat fuga, accusantium eveniet tempore molestias provident solutalibero minima similique earum reiciendis blanditiis cum quod ipsum quiaitaque unde cumque?
</p>
</section>
CSS
CSS section {
position: relative;
min-height: 100vh; /* 高さは最低でも画面の高さ分あるように */
padding: 10px 0;
}
.parallax {
position: absolute; /* sectionのtop:0に配置 */
top: 0;
display: none; /* 最初は非表示 */
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 100vh;
font-size: 3em;
color: #fff;
z-index: -1;
}
.bgI1 {
background-image: url("https://gxy-life.com/images/blog/202202/3 (3).JPG");
}
.bgI2 {
background-image: url("https://gxy-life.com/images/blog/202202/4 (22).JPG");
}
.bgI3 {
background-image: url("https://gxy-life.com/images/blog/202202/5 (6).JPG");
}
.bgI4 {
background-image: url("https://gxy-life.com/images/blog/202202/7.JPG");
}
.bgI5 {
background-image: url("https://gxy-life.com/images/blog/202202/9 (2).JPG");
}
.parallax.active { /* activeが追加されたらfixedに */
position: fixed;
top: 0;
}
.p {
max-width: 800px;
margin: 50px auto;
padding: 50px;
font-size: 1.5em;
color: #fff;
}
javascript
全部で21行。そんなに複雑ではないですね。
最初にsectionと画像表示部分を取得
const parallax = document.querySelectorAll(".parallax");
const section = document.querySelectorAll("section");
最初のsection内の画像は表示させる。
parallax[0].style = "display: block;";
スクロールイベントで処理
document.addEventListener("scroll", function () {
for (let i = 0; i < section.length; i++) {
// section上辺の画面上から距離
const getElementDistanceTop = section[i].getBoundingClientRect().top;
// section下辺の画面上から距離
const getElementDistanceBottom =
section[i].getBoundingClientRect().bottom;
// sectionの上辺が画面下に現れたら、非表示にしていた画像を表示
if (getElementDistanceTop < window.innerHeight) {
parallax[i].style.display = "block";
}
// sectionの上辺が画面上に消えてから、section下辺が画面上に消えるまで
if (getElementDistanceTop < 0 && getElementDistanceBottom > 0) {
parallax[i].classList.add("active");
} else { // それ以外はactiveを削除
parallax[i].classList.remove("active");
}
}
});
参考



デモページはこちらから↓
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク