【簡単】jQueryとCSSを使って要素をふわっと出す方法【プラグイン不要】
jQueryとCSSを使てスクロールしたら任意の要素をふわっと出したい。
プラグインを使わず実装したい。
ふわっとさせる時、少し遅らせたい。
本記事ではこのような悩みを解決します。
実装サンプル
See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0
実装サンプルです。下にスクロールするとテキストがふわっと出現するようになってます。
導入方法は以下の通りです。
CSSでアニメーションを設定
/*pタグをふわっとさせる前*/
p {
transform: translateY(30px);
opacity: 0;
visibility: hidden;
transition: transform 1s, opacity 1s, visibility 1s;
}
/*pタグをふわっとさせる*/
p.fade {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
本記事では例としてpタグをふわっとさせます。
ふわっとさせる前とその後の処理をCSSで記述します。
ふわっとさせる前は以下プロパティをあてます。
transform: translateY(30px);でY軸をずらす。
visibility: hidden;とopacity: 0;でいったん要素を非表示。
transitionプロパティを使ってアニメーションを入れる。
fadeクラスを結合したセレクタに、以下CSSをあてふわっと処理を記述します。
transform: translateY(0);でY軸を元に戻す。
visibility: visible;とopacity: 1;で要素を表示。
上記でふわっとさせるスタイルの完成です。
jQueryでクラスを付与
<script>
$(function () {
$(window).scroll(function () {
//ふわっとさせたい要素のセレクタを指定
$("p").each(function () {
var imgPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > imgPos - windowHeight) {
$(this).addClass("fade");
} else {
$(this).removeClass("fade");
}
});
});
});
</script>
あとは上記jQueryコードをスクリプト内に記述します。
セレクタにはふわっとさせたい要素（本記事の例ではpタグ）のタグ名またはクラス・IDを入れます。
ふわっとさせたい任意の要素位置まできたらfadeクラスを付与するコードになります。
以上で完成です。
ふわっとさせる処理を遅らせたい。
<script>
$(function () {
$(window).scroll(function () {
$("p").each(function () {
var imgPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
//変更点
if (scroll > imgPos - windowHeight + windowHeight / 5) {
$(this).addClass("fade");
} else {
$(this).removeClass("fade");
}
});
});
});
</script>
前章の設定では任意の要素が見えた瞬間ふわっとさせる処理をしてました。
処理を遅らせたい場合は以下のようにif文内の条件式を変更します。
if (scroll > imgPos - windowHeight + windowHeight / 5) {}
条件式内の末尾の数値を変更する事でふわっとさせる位置を変更できます。
上記の場合は5なので要素の位置が半分以上見えたらふわっとさせる処理をしています。
まとめ
ふわっとさせるプラグインはいくつかありますが、多機能すぎて逆に使いずらい場合があります。
シンプルにふわっとさせるだけなら本記事で紹介したコードだけでいけます。
ぜひ導入してみてください。
以上で解説を終わります。
