スクロールしていくと画像やコンテンツがふわっと表示されるWEBサイトってカッコイイですよね。動きがあると読者の目を引くだけでなく、WEBサイトがリッチになるのでぜひ取り入れたいエフェクトです。
僕もこのサイトに実装してみたので、その方法を書いていきたいと思います。単純にjQueryとCSSで作成する方法だけでなく、ネイティブjavascriptで書く方法も合わせてご紹介します。
デモはコチラ↓
ふわっと表示（フェードイン）させる仕組み
仕組は至って簡単です。
まず、ふわっとさせたい画像やコンテンツなどの要素にCSSのopacityを使って透明にします。さらに下から出てくるようにtransformで少し下の方に設置。
そしてある一定のところまでスクロールされた時に、jQueryやjavascriptを使ってCSSの値を書き換えて、要素をふわっと表示させるだけの簡単な仕組みです。
実装方法
それでは実装していきましょう。
CSSの書き方
初期値のCSSの設定は以下の通りです。
簡単に説明すると、opacityを０に設定することによって要素を透明にして、transformをtranslateY(20px)にして20px下にズラしています。
そしてtransitionで要素をふわっと表示させるまでの遷移時間を1秒に設定しています。
CSSはたったのこれだけです。
jQueryの書き方
次にjQueryです。jQeryですので初めての場合は<head>～</head>の間に以下の1行を追加してください。すでに使用しているのであれば無視してください。
ふわっと表示させるための仕組みは以下の通りになります。
順番にjQueryの中身を見ていくと、$(function()｛｝はDOMの読み込みが終わったら中の処理をするという意味で、$(window).scroll(function ()｛｝はスクロール時にイベントを発動する意味になります。
以下の3行はスクロール時にイベントを発動するための位置情報になります。
- $(this).offset().topは、ターゲット要素の高さ
- $(window).scrollTop();は、スクロール位置（ページの一番上からディスプレイ上端）
- $(window).height();は、ウィンドウの高さ
そして、if (scroll > targetElement – windowHeight + 200){}で、要素をふわっと表示させたい位置を計算して条件で分岐。trueであれば、 $(this).css(‘opacity’,’1′);と$(this).css(‘transform’,’translateY(0)’);を実行させています。
ちなみに表示位置を変えたい場合は一番右の200という数字を変更してください。200はディスプレイ画面の下から200pxの位置ということになりますので、下から100pxの位置が良ければ100にしてください。
HTMLの書き方
あとはHTMLにふわっと表示させたい部分にclass名を付けるだけで終了です。ここでは「fadein」という名前にしているので、以下のように書いてください。
たったこれだけで、高級感のあるふわっと表示される効果を実装できます。
最後にネイティブjavascriptでの書き方
最後にネイティブjavascriptでの書き方をご紹介します。
先ほどjQueryで書いたところを以下のように書き換えてください。
細かい説明はなしですが、ネイティブjavascriptで書くとjQeryで書くよりも少しコードが長くなってしまいますね。
メリットがあるのか良くわかりませんが、こちらの方がなんとなくカッコイイような気がするので、僕はこちらで書いてます（笑）
自分のWEBサイトに高級感や動きを取り入れたい方はぜひ試してみてください。
