スクロールするとふわっと現れる文字や画像をはてなブログで実装してみよう

f:id:x93mg:20160920170650j:plain

iPhone7が発売されたので、Appleのサイトにアクセスしたときに、最近よく見るふわっと出てくるやつが気になった。あれって実装簡単なの？そこで今回は、ふわっと出てくる「アレ」をこのサイトでも実装してみたので、その簡単な手順について書いてみたい。

プラグインを使ったりJavaScriptを使ったり、いろんな方法があると思うけれど、今回はjQueryとCSS3を使って誰でも簡単にできるように実装してみた。はてなブログの場合はコードを該当箇所にコピペするだけ。もちろんWordPressをはじめとした各種CMSでも適切な場所にコピペするだけでOKだ。

最近よく目にする「アレ」とは？

スクロールしていくと、何もなかったところから突如ふわっとでてくる「アレ」。何か専門的な呼び方があるのかなと思って調べてみたけれど、みんな「ふわっとフェードインするやつ」くらいにしか呼んでいなかった。正しい呼び方があれば教えてください。

こんなかんじで

ふわっと出てくる

これのこと

実装方法はサクッと3ステップ

STEP1：jQueryの設置

はてなブログではjQueryそのもののコードは設置されているので、下記コードを貼り付けるだけでOK。その他サービスやCMSでも、jQueryを読み込む場所に下記のコードを埋め込もう。

はてなブログでの貼り付け場所は「ダッシュボードデザインカスタマイズ(スパナのマーク) フッタ」にコードを貼り付ける場所があるので、一番下に下記のコードを貼り付けよう。

<script type="text/javascript">
$(document).ready(function(){
  $('.fuwat').css('visibility','hidden');
  $(window).scroll(function(){
   var windowHeight = $(window).height(),
       topWindow = $(window).scrollTop();
   $('.fuwat').each(function(){
    var objectPosition = $(this).offset().top;
    if(topWindow > objectPosition - windowHeight + 200){
     $(this).addClass("fuwatAnime");
    }
   });
  });
});
</script>

ザックリと解説していくと、「fuwat」というクラスを付したものは画面上で一度みえなくなり、スクロール位置に来たらCSSアニメーションでふわっと表示させていく流れだ。

「.fuwat」のところを「.entry-content img」にすれば記事内の画像にすべて適用される。「+ 200」のところをいじってもらえれば、表示のタイミングを変えることもできる。

STEP2：CSSの設置

続いてCSSの設置。はてなブログの場合は「ダッシュボードデザインカスタマイズ(スパナのマーク) デザインCSS」でCSSを記述できるので、下のコードを埋め込もう。

.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

ザックリと解説していくと、「fuwatAnime」というクラスがjQueryで付加されると、CSSアニメーションが始まるようになっている。「opacity」で透明度を0％から100％に上げ、「translateY」で20px下から画像をもとの位置に持ち上げている。また、「animation-duration」を変更することで、ふわっと出てくるスピードを調整することもできる。

STEP3：指定要素にクラスを付ける

<div class="fuwat">この中に入れるだけ</div>

あとは、実際の記事の部分だったり、ブログパーツの部分に、「fuwat」というクラスを付けてあげれば実装完了。とっても簡単だ。

まとめ

書いてみると結構短い記事になってしまったのだけれど、忘れないうちにと思って一気に書き上げてしまった。海外のサイトでも最近よく見る手法ではあるのだけれど、この手法に限らず、スクロールと連動して動的にコンテンツを見せるテクニックはこれからも流行ると思うので、ぜひストックのひとつとして頭の中に入れておこう。

B! Subscribe!

このブログでは生産性・テクノロジー・ライフハックなどの記事を配信しています。見逃さないように読者登録をお忘れなく！

Recommendation!