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

近頃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プラグインを使うといいかも。
素敵なカスタマイズ方法があれば、ぜひ教えてくださいね!
初めまして。
ライブドアブログにhttp://yubit.jpというサイトの更新情報のようなブログの記事をカテゴリ別に表示できるタブメニューを設置することは出来ないでしょうか?
もし作り方をご存知でしたら教えていただけないでしょうか?
よろしくお願いします。
いつも大変役立つ記事ありがとうございます。
日本中のクリエイターが参考にさせていただいています。
もちろん自己責任でですが、コードペンなどでご紹介いただいているウェブクリエイターボックスさんのソースコードは、
どのようなライセンスで使わせていただけるのでしょうか?
商用でも使いたくなるクオリティーなので、皆さん気になっていると思います。
お時間のある時にお教え頂けませんでしょうか?
ソースコードは自由に使ってください。使用している画像は私がライセンス保持しているものもありますので、ご相談ください。
大変ありがとうございます。
これからも、世界の情報を皆さん楽しみにしております。
頑張ってください。