今回は、下のデモのように下からふわっと画像や要素が現れるアニメーションを実装する方法を紹介します。
とても頻繁に使われる表現で、ほとんどの人は目にしたことがあるでしょう。
jQueryなどでコードが紹介されることが多いですが、ここでは生のJavaScriptで書いていきます。
ふわっと現れるアニメーションの実装方法
それでは、HTML、CSS、JavaScriptのコードを説明していきます。
HTML
<div class="element js-animation"><img src="./img/1.jpg" alt="画像1"></div>
<div class="element js-animation"><img src="./img/2.jpg" alt="画像2"></div>
<div class="element js-animation"><img src="./img/3.jpg" alt="画像3"></div>classに「js-animation」と記述した要素にはアニメーションが加わるようにします。
CSS
.js-animation {
opacity: 0;
visibility: hidden;
transform: translateY(40px);
transition: all 1s;
}
.js-animation.is-show {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}js-animationのclassが付与された要素は、opacity:0;でいったん非表示にします。
js-animationにis-showが加われば、要素が下から現れるようにします。
JavaScript
/**
* 到達したら要素を表示させる
*/
function showElementAnimation() {
var element = document.getElementsByClassName('js-animation');
if(!element) return; // 要素がなかったら処理をキャンセル
var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
var scrollY = window.pageYOffset;
var windowH = window.innerHeight;
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);少し説明します。
window.innerHeight > 768 ? 200 : 40;これは要素が200px（768px以下のウィンドウサイズでは40px）分過ぎたら表示させるために指定します。
これをしないと、要素が現れるタイミングが早すぎて分かりづらくなります。
// 上にスクロールして再度非表示にする場合はこちらを記述
element[i].classList.remove('is-show');下にスクロールして要素が現れた後、再度上にスクロールした時、また要素を非表示にする場合はこのコードを記述します。
もし、一度現れた要素は表示させたままにする場合は、else if文ごと削除してください。
JavaScriptが無効化された場合の対策
ブラウザの設定や閲覧環境によっては、JavaScriptが動かないことがあります。
そうすると、画像は消えたままになってしまいます。
それを防ぐために、以下のコードをどこかに記述しておくと安心です。
<noscript>
<style>
.js-animation {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
</style>
</noscript>
こうしておけば、JavaScriptが無効化されても大丈夫です。
もう一度デモを載せておきます。
仕組みが分かれば簡単な処理なので、みなさんも挑戦してみて下さい。
他にもこんな記事があります。
【JavaScript】スクロールに応じて文字の色を変える方法
