jQueryとCSS3で手軽に実装できるスクロールエフェクト

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

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

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: 0.1;
}
.txt-effect {
  animation: txtEffect 2s both;
}
@keyframes txtEffect {
  100% {
    opacity: 0.5;
    font-size: 48px;
  }
}

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

完成！

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

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

前から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);
  }
}

完成！

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

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

カスタマイズしてみよう

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

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

• WOW.js
• scrollorama
• ScrollMagic

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