初心者でも簡単にスクロール連動のフェードインアニメーションが実装できるコード。
シンプルなHTML/CSS/JSで軽量なのにバリエーション豊富なフェードインアニメーションのテンプレート。
付けるクラスを変えるだけで、上下左右いろいろな向きからフェードインできる仕様。
ブックマーク必須のページ。
HTML
<div class="ugkFluffy">
<div class="scrollanime toUp">
<p>上に、ふわっと</p>
</div>
<div class="scrollanime toDown">
<p>下に、ふわっと</p>
</div>
<div class="scrollanime toLeft">
<p>左に、ふわっと</p>
</div>
<div class="scrollanime toRight">
<p>右に、ふわっと</p>
</div>
<div class="scrollanime toBig">
<p>大きく、ふわっと</p>
</div>
<div class="scrollanime">
<p>動かず、ふわっと</p>
</div>
</div>CSS
.scrollanime {
/*ここで全体のアニメーション秒数を設定*/
transition: all ease 1.5s;
/*出現前は全て透明に*/
opacity: 0;
}
/*classに応じて出現前の位置や大きさを設定*/
.toUp {
transform: translateY(50px);
}
.toDown {
transform: translateY(-50px);
}
.toLeft {
transform: translateX(50px);
}
.toRight {
transform: translateX(-50px);
}
.toBig {
transform: scale(0.8);
}
/*画面に入った後は元の位置や大きさに戻る*/
.fadeIn.scrollanime {
opacity: 1;
}
.fadeIn.toUp {
transform: translateY(0);
}
.fadeIn.toDown {
transform: translateY(0);
}
.fadeIn.toLeft {
transform: translateX(0);
}
.fadeIn.toRight {
transform: translateX(0);
}
.fadeIn.toBig {
transform: scale(1);
}
/*ボックスレイアウト用※実務ではコピペ不要↓*/
.ugkFluffy div {
width: 400px;
max-width: 100%;
margin: 0 auto 80px;
background-color: #D9D9D9;
padding: 50px 0;
text-align: center;
}JS
(() => {
const run = () => {
const els = document.querySelectorAll('.scrollanime');
if (!els.length) return;
const update = () => {
const y = window.pageYOffset || document.documentElement.scrollTop;
const vh = window.innerHeight || document.documentElement.clientHeight;
els.forEach((el) => {
//↓要素の80px下が起点（出すタイミングによって数値を変更）
const top = el.getBoundingClientRect().top + y + 80;
//↓画面内に入った時アニメーションを毎回発生させる場合↓
el.classList.toggle('fadeIn', y >= top - vh);
//↓アニメーションを初回のみにしたい場合↓
//if (y >= top - vh) el.classList.add('fadeIn');
});
};
const onChange = () => requestAnimationFrame(update);
window.addEventListener('scroll', onChange, { passive: true });
update();
};
document.readyState === 'loading'
? document.addEventListener('DOMContentLoaded', run)
: run();
})();フェードイン実装方法
実際に使用するときはcssとjsをサイトにコピペし、フェードインさせたい要素全てにscrollanimeクラスを付けます。
それぞれの動きに合わせて以下のクラスを追加してください。
- 上に、ふわっと：toUp
- 下に、ふわっと：toDown
- 左に、ふわっと：toLeft
- 右に、ふわっと：toRight
- 大きく、ふわっと：toBig
- 動かず、ふわっと：scrollanimeだけ！
実際の動き
上に、ふわっと
下に、ふわっと
左に、ふわっと
右に、ふわっと
大きく、ふわっと
動かず、ふわっと
コメント