JavaScriptでスクロール時にイベントを実装してみよう!【ふわっと表示】

JavaScriptでスクロールした時にふわっと表示♪ JavaScript
さくらもち
スクロールすると下からふわっと要素が表示されるWebサイトってあるじゃない?
どうやってるんだろう♪
ウサギさん
あ、わたしも気になっていたの……下からヒョコって表示されてみたいなぁ♪
モチ
モチは上からボヨンって登場してみたい!

今回はこんな疑問にお答えします!

Webサイトを見ていると、スクロールした時に下からふわっと要素が表示されるページってありませんか?
きっとJavaScriptで実装しているから難しいんだろうな……と思われたあなた。

結論、JavaScriptを使いますがコピペで簡単に実装可能です。

本記事では、すぐにあなたのブログやサイトに実装できるコードを用意しました。
コピペをして簡単に実装しちゃいましょう♪

 記事でわかること

  • ・JavaScriptを使ってスクロールした時にふわっと表示させる方法

 記事の信頼性

筆者のかがみ@cony_tas)はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

JavaScriptでスクロール時にイベントを実装してみよう!

はじめに、このコードをWordPressで運用しているブログに実装したい場合、下記の二つの方法があります。
※その他のWebサイトで実装される方は、ここは飛ばしてください。

  • 方法1:子テーマを導入する
  • 方法2:記事投稿画面に直接コードをペーストする

もし子テーマを導入して、カスタムCSS・JavaScriptファイルを利用したい場合は、下記の記事の通りに進めていただければ子テーマを導入できますので併せてご覧ください。

WordPressに子テーマを追加してCSSでカスタマイズしてみよう!

2020年2月21日

WordPressの子テーマからJavaScriptファイルを読み込む方法

2020年2月23日

記事投稿画面に直接コードをペーストして実装したい方は、このまま読み進めていってくださいね。

実装に必要なコード

それでは、実装に必要な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のいずれかをつけてください。

実際に動かしてみる

最後にデモでボタンをふわっと表示させてみます。
下記の記事でご紹介したボタンを再利用しますね笑

WordPressでリンクボタンの作成方法【アニメもあるよ♪】

2020年3月5日

スクロールをしていって要素が画面下に入ったらフェードインで表示、上に戻って要素が画面外に出たらフェードアウトするようになっていますので、上下にスクロールをしてお試しくださいね!

下から上へふわっと表示

右から左にふわっと表示

左から右にふわっと表示

もしフェードインの速度や移動距離を変更したい場合は、CSSの下記の値をいじって色々試してみてください♪

.fadeinElem { transition: all 400ms ease-out; ※アニメーションの速度 } .fadeinElem.toUp { transform: translateY( 15px ); ※フェードインする移動距離 opacity: 0; }

最後に:JavaScriptでスクロール時にイベントを実装してみよう!

今回は、JavaScriptでスクロール時にふわっと表示させる方法をご紹介しました!

JavaScriptを使えば、あなたのサイトをより動的で魅力的にすることができます。
今後も色々ご紹介していきますので、よかったらまた遊びにきてくださいね。

それでは今回はこの辺で!

モチ
いつもCony-Tasの記事をご覧いただき、ありがとうございますっ