スクロールするとじわーっと表示するエフェクトです。CSSとJavascriptで設定します。このページのソースコード部分に設定しています。
今回はクラス名を「scroll-effect」に設定しました。
ブロックエディターを使った場合は、各ブロック単位にそれぞれクラス名をつける必要があってめんどくさい感じです。
ブロックをグループ化してクラス名をつけると少し楽になります。
テンプレートや固定ページで使うと良い結果になります。
CSSとjsのファイル名
| css | style.css |
| js | theme.js |
※ファイル名が変わる場合は、ソースも合わせて変更してください。
CSS
/* スクロールすると表示する scroll-effect */
@media(min-width:751px) {
.scroll-effect {
opacity: 0;
transform: translateY(50px);
transition: opacity 1s, transform 1s;
}
.scroll-effect.visible {
opacity: 1;
transform: translateY(0);
}
}JavaScript
// スクロールすると指定した要素を表示する
document.addEventListener("DOMContentLoaded", function () {
const targets = document.querySelectorAll(".scroll-effect");
const observerOptions = {
root: null,
rootMargin: "0px",
threshold: 0.1
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
observer.unobserve(entry.target);
}
});
}, observerOptions);
targets.forEach((target) => {
observer.observe(target);
});
});上記ファイルを function.php で読み込む様にする。
//----------------------------------------------------------------------------
// 独自ファイルの読み込み
//----------------------------------------------------------------------------
function theme_scripts(){
// theme custom css
wp_enqueue_style( 'theme_style', get_stylesheet_directory_uri().'/style.css');
// theme custom js
wp_enqueue_script( 'theme_scripts', get_template_directory_uri() . '/theme.js', array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'theme_scripts');
画像のサンプル
パララックスなイメージを持ったサイトを構築する場合に全体の統一感がまとまります。
