サイトを見ているときに画像や要素がふわっと出てくると、なんとなくウキウキしてしまうのは私だけでしょうか？
そんなウキウキ感を演出してくれるアニメーションの実装方法をめも。Pure JavaScriptでの実装になります。
まずはどんな動きをするのか、このサイトのトップページにも使っているのでそちらをご覧ください。
ふわっと感を変えたい場合は
ここでは要素が200px過ぎたら表示されるようになっています。ウィンドウサイズが768px以下の場合は80px過ぎたら表示されます。
まずはどんな動きをするのか、このサイトのトップページにも使っているのでそちらをご覧ください。
HTML
<div class="element js-fadein"></div>
<div class="element js-fadein"></div>
<div class="element js-fadein"></div>
js-fadeinを付与
CSS
.js-fadein {
opacity: 0;
visibility: hidden;
transform: translateY(40px);
transition: all 1s;
}
.js-fadein.is-show {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
.js-fadeinが付与された要素は非表示にしておきます。
visibility: visible;
transform: translateY(0px);
.js-fadeinに.is-showが加わった際に要素がふわっと表示されます。ふわっと感を変えたい場合は
transform: translateY(40px);とtransition: all 1s;の数値を調節しましょう。
JavaScript
/* 到達したら要素を表示させる */
function showElementAnimation() {
var element = document.getElementsByClassName('js-fadein');
if(!element) return; // 要素がなかったら処理をキャンセル
var showTiming = window.innerHeight > 768 ? 200 : 80; // 要素が出てくるタイミングはここで調整
var scrollY = window.pageYOffset; //スクロール量を取得
var windowH = window.innerHeight; //ブラウザウィンドウのビューポート(viewport)の高さを取得
for(var i=0;i<element.length;i++) {
var elemClientRect = element[i].getBoundingClientRect();
var elemY = scrollY + elemClientRect.top;
if(scrollY + windowH - showTiming > elemY) {
element[i].classList.add('is-show');
} else if(scrollY + windowH < elemY) {
// 上にスクロールして再度非表示にする場合はこちらを記述
element[i].classList.remove('is-show');
}
}
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);var showTiming = window.innerHeight > 768 ? 500 : 400;ここでは要素が200px過ぎたら表示されるようになっています。ウィンドウサイズが768px以下の場合は80px過ぎたら表示されます。
JavaScriptが無効化された場合の対策
これは結構大切なのかなと。 ブラウザの設定などでJavaScriptが動かないと「js-fadein」を付与した要素は消えたままになってしまいます。 なんだこのサイトってなってしまうので、以下のコードを記述しておくことをオススメします。<noscript>
<style>
.js-fadein {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
</style>
</noscript>