近頃Webデザインのギャラリーサイトで見かける素敵Webサイトって、どれもアニメーションなどのエフェクトがかっこいいですよね。という事で今回は、中でも簡単に実装できそうな効果をひとつ。スクロールすることで要素が可視範囲に表示されると、CSS3のアニメーションを使ったエフェクトが実行される、というのを実装してみようと思います。なんだか難しそう…と、食わず嫌いでいた人でも、基本さえおさえておけば、あとはアイデア次第で自分好みにカスタマイズできると思いますよ！

↑私が10年以上利用している会計ソフト！

基本：スクロールでテキストをぼわ〜んと表示

画面をスクロールすると、下からぼわ〜んとテキストが表示されるエフェクトを実装してみましょう！

HTML

まずはエフェクトを与える要素をHTMLに記述。安心してください、まだ何も変わったことはしてませんよ。

<p>Nobody likes you</p>
<p>Everyone left you</p>
<p>They're all out without you</p>
<p>Havinng fun</p>
.....

jQuery

次にjQueryを読み込ませます。もちろん、jQueryファイルはダウンロードして利用してもOKです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

JavaScript

$(window).scrollTop(); で、ウィンドウのスクロール位置（最上部）を取得します。 $(this).offset().top; は p 要素の位置ですね。で、scrollY > elPosition - windowH は「p 要素が画面上に表示されたら」という意味です。ちょっとわかりづらいのですが、前述のとおり、取得したスクロール位置はウィンドウの最上部なので、p 要素の位置からウィンドウの高さを引いてあげると、p 要素がウィンドウの最下部に位置するタイミングを取得できるわけです。

そんなわけで「p 要素が画面上に表示されたら」、txt-effect というクラスを p 要素につけてあげます。

$(window).scroll(function() {
  var windowH = $(window).height(),
  scrollY = $(window).scrollTop();

  $('p').each(function() {
    var elPosition = $(this).offset().top;
    if (scrollY > elPosition - windowH) {
      $(this).addClass("txt-effect");
    }
  });
});

CSS

最後にCSSです。デフォルトでは不透明度10％、文字サイズ20pxのテキストを、スクロールにより txt-effect というクラスが加えられると、不透明度やフォントサイズを変更します。アニメーション関連のプロパティについては、過去記事「CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう」をご一読ください！

p {
  text-align: center;
  margin-bottom: 50px;
  font-size: 20px;
  opacity: .1;
}
.txt-effect {
  animation: txtEffect 2s both;
}
@keyframes txtEffect {
  100% {
    opacity: .5;
    font-size: 48px;
  }
}

そういえば、最新のブラウザーでは -webkit- のベンダープレフィックスをつけなくてもよくなったので、コードがかなりスッキリしましたよね。

完成！

こんな感じでぼわ〜んと表示されました！

See the Pen Text come up by scrolling by Mana (@manabox) on CodePen.

応用：ぼかしのかかった画像をくっきりと表示

前からMediumで実装されている、はじめはぼかしのかかった画像が、スクロールによりふわっとアニメーションをつけてくっきり表示される、という効果が気になっていました。本家は別のやり方で実装しているんだと思いますが、ここではさきほどのエフェクトと同じく、jQueryとCSS3で実装してみましょう。

CSS

HTML、JavaScriptともに基本編とあまり変わらないので割愛。全コードはサンプル画面の「HTML」「JS」タブをクリックしてご覧ください。

CSSでぼかしを実装するため、filter プロパティを利用しています。これは現段階では残念ながらIEに非対応です。デフォルトでは画像に15pxのぼかしをかけ、スクロールで新たにクラスが与えられると、ぼかしの値を0にして画像を表示させます。

img {
  -webkit-filter: blur(15px);
  filter: blur(15px);
}
.img-blur {
  animation: imageBlur 1s both;
}
@keyframes imageBlur {
  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

完成！

こちらもぼわ〜んと画像が表示されるようになりました！

See the Pen Scroll Image Blur Effect by Mana (@manabox) on CodePen.

ちなみにLazy Load Pluginと似たような表示方法ですが、このプラグインのように表示スピードをアップという効果ありません。あくまで装飾…ということで。

カスタマイズしてみよう

上記の方法をマスターすれば、プロパティを変えるだけでいろんな表現方法に対応できると思います。例えば width や height でサイズを変えたり、色や位置、背景画像の変更、transform: rotate でクルクル回したり…などなど。あまりやりすぎるとページが見づらくなるので、コンテンツやデザインによってエフェクトの程度を調整してくださいね。

さらに簡単に実装したい！という方は、以下のライブラリーやjQueryプラグインを使うといいかも。

• WOW.js
• scrollorama
• ScrollMagic

素敵なカスタマイズ方法があれば、ぜひ教えてくださいね！