今回は、フェードインのアニメーションで要素を表示させる方法を紹介します。
JavaScriptを使って実装します。
【JS】フェードインのアニメーションで要素を表示させる方法
完成形はこちら。
下にスクロールしていくと、要素が下からフェードインして表示されます。
※ フェードインのアニメーションに関するコードだけ載せます。
HTML
<section class="items">
<div class="item fade-in">
<div class="item__img">
<img src="./image/1.JPG" alt="">
</div>
<div class="item__text">
<h2>フェードインします</h2>
<p>ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。</p>
</div>
</div>
<div class="item fade-in">
<div class="item__img">
<img src="./image/2.JPG" alt="">
</div>
<div class="item__text">
<h2>フェードインします</h2>
<p>ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。</p>
</div>
</div>
<div class="item fade-in">
<div class="item__img">
<img src="./image/4.JPG" alt="">
</div>
<div class="item__text">
<h2>フェードインします</h2>
<p>ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。</p>
</div>
</div>
</section>
まずは、フェードインさせたい要素に対して「fade-in」クラスをつけます。
CSS
// フェードイン
.fade-in {
opacity: 0;
visibility: hidden;
transform: translateY(50px);
transition: opacity 2s, transform 2s;
}
.fade-in.show {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
ブラウザに要素が表示されるまでは非表示にします。
そしてブラウザに要素が表示された時に、下から50pxほどフェードインして表示されるようにします。
JavaScript
// フェードイン
function showElementAnimation() {
var element = document.getElementsByClassName('fade-in');
if (!element) return;
var showTiming = window.innerHeight > 768 ? 200 : 60;
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('show');
} else if (scrollY + windowH < elemY) {
}
}
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);
ブラウザに要素が表示されるとshowクラスがつき、下からフェードアウトするようにしました。
まとめ
以上が、フェードインのアニメーションで要素を表示させる方法でした。
