【javascript】スクロールして、指定の位置で要素をフワッと出現させる方法

やりたいこと
以下のように、指定の位置までスクロールしたら、クラスを追加し、 アニメーションさせる。
参考


必要な値を取得
以下の3つの値(➀画面の高さ➁アニメーションさせる指定の場所➂要素の画面上端からの距離) さえ取得できれば、あとは簡単です。
// 画面の高さ
const screenHeight = window.innerHeight;
// 指定の場所、ここでは画面下30%の位置
const apperPoint = screenHeight * 0.7;
// 要素の画面上端からの距離
const elementHeightTotop = element.getBoundingClientRect().top;
スクロールイベント
要素の高さelementHeightTotopが 指定の位置apperPointより、 小さくなった時、クラスを追加し、大きくなったら、 クラスを削除します。
// 画面の高さ
const screenHeight = window.innerHeight;
// 指定の場所、ここでは画面下30%の位置
const apperPoint = screenHeight * 0.7;
window.addEventListener("scroll", ()=> {
const box = document.querySelectorAll(".box");
for (let i = 0; i < box.length; i++) {
const element = box[i];
// 要素の画面上端からの距離
const elementHeightTotop = element.getBoundingClientRect().top;
if(elementHeightTotop < apperPoint){
element.classList.add("active");
}else {
element.classList.remove("active");
}
}
})
HTML
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
CSS
7行目 : transformで30px下に移動しておく
11行目 : クラスactiveが追加されたら、 transform: none;とアニメーションスタート
.box {
width: 50%;
height: 50px;
border: 1px solid #333;
border-radius: 7px;
margin-bottom: 50px;
transform: translateY(30px);
transition: all .5s ease;
opacity: .2;
}
.box.active {
opacity: .2;
background: orange;
transform: none;
animation: ani 1s ease-in-out forwards;
}
@keyframes ani {
100%{
opacity: 1;
}
}
まとめ
-
3つの値が必要
➀画面の高さ
➁アニメーションさせる指定の場所
➂要素の画面上端からの距離
-
➀画面の高さ
window.innerHeight
-
➁アニメーションさせる指定の場所
window.innerHeight * 0.7
つまり、画面下30%の位置
-
➂要素の画面上端からの距離
element.getBoundingClientRect().top
こんな記事も読まれています。
-
【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)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク