【コピペOK】スクロールに合わせてフッと表示【jQuery】

どうも、こんにちは。
友太郎(@yutarou_sakai)です。
この記事では、画面のスクロールに合わせて要素をフッと表示を表現するコードを紹介します。
この表現を使えばサイトのクオリティがグッと上がりますので、ぜひ取り入れてください!
使う言語
- HTML
- CSS
- jQuery
少しのHTML・CSSとjQueryで表現可能です。
コード
実際のコードがこちらです。
.fadein {
// 透明度を0に
opacity : 0;
// 少し位置をずらす
transform: translateY(20px);
// 動く速度を指定
transition: all 1s;
}
jQuery(function ($) {
$(function () {
$(window).scroll(function () {
$('.fadein').each(function () {
// 一番上からの位置を検出
var targetElement = $(this).offset().top;
// スクロール位置を取得
var scroll = $(window).scrollTop();
// 画面の高さを取得
var windowHeight = $(window).height();
// 要素の高さより200px高い位置に来たら
if (scroll > targetElement - windowHeight + 200) {
// 透明度を戻す
$(this).css('opacity', '1');
// 位置を戻す
$(this).css('transform', 'translateY(0)');
}
});
});
});
});
あとは、フッと表示させたい要素にHTMLでclass=”fadein”を追加すればOK!
軽く解説
今回のコードで、各言語は以下の役割です。
- CSS →要素をあらかじめ消しておく&ちょっと位置をずらす
- jQuery →スクロールの位置を検出して、要素を表示させる
要素の表示は透明度を操作しています。
0が完全に透明で、1が完全に表示されている状態です。
要素を消す・位置をずらす(CSS) → スクロール位置を取得(jQuery) → 要素の近くまで来る(jQuery) → 要素を表示・位置を戻す(jQuery)
上記の順番で動いています。
コピペで簡単にクオリティを上げられるので、ぜひ取り入れてみてください!!