今回はこんな疑問にお答えします！
Webサイトを見ていると、スクロールした時に下からふわっと要素が表示されるページってありませんか？
きっとJavaScriptで実装しているから難しいんだろうな……と思われたあなた。
結論、JavaScriptを使いますがコピペで簡単に実装可能です。
本記事では、すぐにあなたのブログやサイトに実装できるコードを用意しました。
コピペをして簡単に実装しちゃいましょう♪
記事でわかること
- ・JavaScriptを使ってスクロールした時にふわっと表示させる方法
記事の信頼性
筆者のかがみ（@cony_tas）はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。
CONTENTS［ hide ］
JavaScriptでスクロール時にイベントを実装してみよう！
はじめに、このコードをWordPressで運用しているブログに実装したい場合、下記の二つの方法があります。
※その他のWebサイトで実装される方は、ここは飛ばしてください。
- 方法1：子テーマを導入する
- 方法2：記事投稿画面に直接コードをペーストする
もし子テーマを導入して、カスタムCSS・JavaScriptファイルを利用したい場合は、下記の記事の通りに進めていただければ子テーマを導入できますので併せてご覧ください。
記事投稿画面に直接コードをペーストして実装したい方は、このまま読み進めていってくださいね。
実装に必要なコード
それでは、実装に必要なCSSとJavaScriptのコードを先にざっと貼っていきます！
CSS
.fadeinElem {
transition: all 400ms ease-out;
}
.fadeinElem.toUp {
transform: translateY( 15px );
opacity: 0;
}
.fadeinElem.toLeft {
transform: translateX( 15px );
opacity: 0;
}
.fadeinElem.toRight {
transform: translateX( -15px );
opacity: 0;
}
.fadeinElem.show {
transform: translate( 0 );
opacity: 1;
}
※WordPressの記事投稿画面に直接CSSを追加する際は、下記のstyleタグごと貼り付けてください。
<style>
ここに必要なCSSを追加
</style>
JavaScript
const showScroll = function () {
const element = document.querySelectorAll( '.fadeinElem' ),
windowH = window.innerHeight;
let divisor = 1.2,
nowY,
elementY;
window.addEventListener( 'scroll', function () {
nowY = window.scrollY || window.pageYOffset;
let count = 0;
while ( count < element.length ) {
( function ( args ) {
elementY = element[ args ].getBoundingClientRect().top + nowY;
if ( nowY > elementY - ( windowH / divisor ) ) {
element[ args ].classList.add( 'show' );
} else {
element[ args ].classList.remove( 'show' );
}
} ) ( count );
count++;
}
}, false );
};
showScroll();
※WordPressの記事投稿画面に直接JavaScriptを追加する際は、下記のscriptタグごと貼り付けてください。
<script>
ここに必要なJavaScriptを追加
</script>
CSSとJavaScriptを追加できたら、ふわっとフェードインさせたい要素に、下記のようにクラスを追加します。
HTML
<div class="btn-example fadeinElem toUp"></div> ※下から上にふわっと表示
<div class="btn-example fadeinElem toLeft"></div> ※右から左にふわっと表示
<div class="btn-example fadeinElem toRight"></div> ※左から右にふわっと表示
fadeinElemは必ず必要で、ふわっと表示させたい方向によって、それぞれtoUp、toLeft、toRightのいずれかをつけてください。
実際に動かしてみる
最後にデモでボタンをふわっと表示させてみます。
下記の記事でご紹介したボタンを再利用しますね笑
スクロールをしていって要素が画面下に入ったらフェードインで表示、上に戻って要素が画面外に出たらフェードアウトするようになっていますので、上下にスクロールをしてお試しくださいね！
下から上へふわっと表示
右から左にふわっと表示
左から右にふわっと表示
もしフェードインの速度や移動距離を変更したい場合は、CSSの下記の値をいじって色々試してみてください♪
.fadeinElem {
transition: all 400ms ease-out; ※アニメーションの速度
}
.fadeinElem.toUp {
transform: translateY( 15px ); ※フェードインする移動距離
opacity: 0;
}
最後に：JavaScriptでスクロール時にイベントを実装してみよう！
今回は、JavaScriptでスクロール時にふわっと表示させる方法をご紹介しました！
JavaScriptを使えば、あなたのサイトをより動的で魅力的にすることができます。
今後も色々ご紹介していきますので、よかったらまた遊びにきてくださいね。
それでは今回はこの辺で！
どうやってるんだろう♪