【jQuery不使用】要素をふわっと表示させる方法
jQueryを使用せず、JavaScriptのみで要素をふわっと表示させる方法をご紹介します。
デモページはこちら↓
DEMOロードでふわっと表示
HTML
<div class="load-fade"></div>
ふわっと表示させたい要素のクラスにload-fadeを加えます。
CSS
.load-fade {
opacity: 0;
visibility: hidden;
transition: all 1s;
}
.load-fade.is-show {
opacity: 1;
visibility: visible;
}
.load-fadeはopacity: 0;で非表示に設定しており、.is-showが付いたタイミングで見えるようにしています。
transitionの値で要素が完全に表示されるまでの時間を調整します。
JavaScript
<script type='text/javascript'>
function load_effect() {
var element = document.getElementsByClassName('load-fade');
if(!element) return; // 要素がない場合は終了
for(var i = 0; i < element.length; i++) {
element[i].classList.add('is-show');
}
}
setTimeout(load_effect, 600); // 600ミリ秒経過後に実行
</script>
上記のコードを<head> ~ </head>内に設置します。
load_effectは、.load-fadeというクラス名がついた要素をすべて取得し、クラス.is-showを追加する関数です。デフォルトでは600ミリ秒経過後にload_effectが実行されます。
最初非表示に設定していた要素に対して、後から表示用のクラスを追加することで見えるようにするという仕組みです。
スクロールでふわっと表示
HTML
<div class="scroll-up"></div>
ふわっと表示させたい要素のクラスにscroll-upを加えます。
CSS
.scroll-up {
opacity: 0;
visibility: hidden;
transform: translateY(50px);
transition: all 1s;
}
.scroll-up.is-show {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
ロードの場合と同じく、.is-showが付いたタイミングで見えるようにしています。
transformで下からふわっと出てくる距離を設定しています。
JavaScript
<script type='text/javascript'>
function scroll_effect() {
var element = document.getElementsByClassName('scroll-up');
if(!element) return;
var scrollY = window.pageYOffset;
var windowH = window.innerHeight;
var showTiming = 200; // 要素を表示するタイミング
for(var i = 0; i < element.length; i++) {
var elemClientRect = element[i].getBoundingClientRect();
var elemY = scrollY + elemClientRect.top;
if(scrollY > elemY - windowH + showTiming) {
element[i].classList.add('is-show');
}
}
}
window.addEventListener('scroll', scroll_effect); // スクロール時に実行
</script>
上記のコードを<head> ~ </head>内に設置します。
こちらでは、スクロールして要素がshowTimingを過ぎたときに表示されます。デフォルトの場合、要素の位置を200px分過ぎた時点で表示されるようになっています。
JavaScriptの無効化対策
ブラウザの設定や環境でJavaScriptが無効化されている場合に備えて、以下のコードを記述しておくと安心です。.load-fadeや.scroll-upを付けた要素が非表示になってしまうのを防ぎます。
<noscript>
<style>
.load-fade, .scroll-up {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
</style>
</noscript>
補足：コンテンツの表示に関して
コメントを頂き、コンテンツが意図せず他の要素に重なって表示されてしまう場合があることが判明しました。
これはCSSプロパティの性質によるもので、z-indexを適切に指定することで解決できます。例えば、ヘッダー（z-index: 0）にふわっと表示されるコンテンツ（z-index: 0）が重なっている場合、ヘッダーのz-indexを1に指定することで重なりを防ぐことができます。
以上、バニラJSで要素をふわっと表示させる方法でした。こういうのってハードルが高いイメージがありますが、意外とシンプルに実装できてしまいます。ぜひ試してみてください。
すぐに使えるコードもありがたいです。
実際に使用した時に、困った点がありましたので、補足します。
ヘッダーをposition stickyなどで固定していたところ、
ブラウザよって、ヘッダーよりコンテンツが上に表示されてしまうことがありました。
下記、記事などを参考にz-indexを指定することで解決しました。
良い記事なので、さらにどなたかの参考になればと思いコメントしました。
参考
http://var.blog.jp/archives/76360368.html
コメントありがとうございます。
記事がお役に立ったようで何よりです。
また、コンテンツの表示に関する問題のご報告ありがとうございます。
記事のほうにも改めて追記しておこうと思います。
コメントを書き込む