ウィンドウの高さを取得
//例
const $win_hight = document.documentElement.clientHeight;
要素の位置を取得
//例
const $boxs = document.getElementsByClassName('box')[0];
console.log($boxs.offsetTop);
scrollイベント
window.addEventListener('scroll', () => {
console.log('スクロール', window.scrollX, window.scrollY);
});
サンプルコード
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
body{
padding-top: 800px;
}
.box{
margin: 100px auto;
width: 300px;
height: 300px;
background: #000;
}
.fadeIn{
opacity: 0;
transform: translateY(100px);
transition: 1s;
}
.fadeIn.on{
opacity: 1;
transform: translateY(0);
}
const $fadeIn = document.querySelectorAll('.fadeIn');
window.addEventListener('scroll' , () => {
// スクロール量を取得
let scrollY = window.scrollY;
// ウィンドウの高さを取得
let $win_h = document.documentElement.clientHeight;
for (let a = 0; a < $fadeIn.length; a++) {
// 各要素の位置を取得
let offsetTop = $fadeIn[a].offsetTop;
// 要素がウィンドウの高さ-200pxの位置に来たらclassを付与する
if (scrollY + $win_h - 200 > offsetTop) {
$fadeIn[a].classList.add('on');
}else{
$fadeIn[a].classList.remove('on');
}
}
})
さらに応用で関数にしました
処理の内容は
- ページが読み込まれたら処理の開始
- スクロール時に監視し、条件が一致したら発火(classを付与)
- ページを読み込み時に、条件が一致していたら発火(classを付与)
/* --------------------------------
スクロールアニメ関数
要素が現れたらクラスを付与する
------------------------------------ */
/*
* 第1引数:classの指定(ドットを必ず付けること)
* 第2引数:発火してから付与されるclassの指定
* 第3引数:発火タイミング(下から何ピクセルか?)
*/
function scroll_anime($set_class='.fadeIn' , $on_class='on' , $in_px='0'){
document.addEventListener('DOMContentLoaded', function() {
const $fadeIn = document.querySelectorAll($set_class)
if ($fadeIn) {
function fade_set(){
for (let i = 0; i < $fadeIn.length; i++) {
object = $fadeIn[i].getBoundingClientRect().top - window.innerHeight
if (object <= $in_px) {
$fadeIn[i].classList.add($on_class)
}else{
$fadeIn[i].classList.remove($on_class)
}
}
}
window.addEventListener('load' , fade_set)
window.addEventListener('scroll' , fade_set)
}
});
}