スクロールでふわっと表示(jQuery + CSS)
Tips

2017.01.16

スクロールでふわっと表示(jQuery + CSS)

みなさん、こんにちは、フロントエンドエンジニアのやまもとです。
今回は昨今、色々なサイトで見かける、
「スクロールして要素が画面の中に入った時にフェードインする」
という感じのエフェクトについて書いて見ようかと思います。
この処理は簡単な処理なのですが、
やり方しだいで色々と応用が効くので、覚えておくと便利かと思います。
今回の処理は3ステップ

  1. スクロールの量を取得する(「scrollTop()」を使用)
  2. 要素のドキュメント上の位置を取得する(「offset()」を使用)
  3. 1と2の値を比較して画面に入ったかどうかを判定する

1. スクロールの量を取得する(「scrollTop()」を使用)

こちらタイトルの通りの処理なのですが、jQueryで用意されている
便利なメソッドのscrollTop()を利用して、
今、どれくらいスクロールしたかを取得します。
また、スクロールごとに処理をさせるために、
同じくjQueryのon()メソッドを使って、
スクロールが行われるごとに発生するscrollイベントに
紐付けて処理を行わせます。

JS

$(function(){
// スクロールごとに処理をさせる
$(window).on('scroll',function(){
// スクロール毎の処理
// スクロール量を取得
var scroll_top = $(window).scrollTop();
});
});

2. 要素のドキュメント上の位置を取得する(「offset()」を使用)

次に目的の要素ののドキュメント上の位置を取得します。
目的の要素には任意のクラスには(今回は「effect」)を付与し、
jQueryのメソッドoffset()を利用して、
ドキュメント上の位置を取得します。

HTML

<div class="effect">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、
</div>
<div class="effect">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、
</div>
<div class="effect">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、
</div>
<div class="effect">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、
</div>

CSS

div {
width : 400px;
height : 400px;
margin-bottom: 50px;
}
div:nth-of-type(2n) {
color: #FFFFFF;
background-color:#2D579A;
}

JS

$(function(){
// スクロールごとに処理をさせる
$(window).on('scroll',function(){
// スクロール毎の処理
// スクロール量を取得
var scroll_top = $(window).scrollTop();
// eachを利用して「effect」クラスの要素それぞれに処理を行なう
$('.effect').each(function(){
// 要素のドキュメント上の位置を取得
var offset_top = $(this).offset().top ;
});
});
});

3. 1と2の値を比較して画面に入ったかどうかを判定する

最後に取得した2つの値を比較して、画面上に要素が入ったかどうかを判定します。
今回は画面上に登場した要素に対して「fadein」というクラスを付与し、
CSSのtransitionを使ってアニメーションを実装します。
また、画面上端ででアニメーションを開始するというパターンは少ないかと思いますので、
比較の際にスクロール量に対してのマージンを設けています。
最後の例はcodepenで、
※ HTMLは同じです。それぞれの要素にはアニメーションをわかりやすくするために色をつけています。

See the Pen スクロールしてフレームインした時にフェードインなどさせたい場合の処理(jQuery) by Shinji Yamamoto (@commono_yamamoto) on CodePen.

今回はCSSのクラスのつけはずしでアニメーションを行いましたが、
要素ごとに同じクラスで別の動きをさせたり、
jQueryでアニメーションさせたりすることもできますので、
ぜひトライしてみてくださいね!

Relative Post

Latest Journal

philosophy | 哲学

philosophy | 哲学

commono
2016.12.19
Vision | 展望

Vision | 展望

commono
2016.12.09
webデザインフロー(1)インサイド→アウト ー理論編ー

webデザインフロー(1)インサイド→アウト ー理論編ー

Shun Uchimura
2017.05.13
オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

Shun Uchimura
2017.05.13
オウンドメディア(2)押さずに、引き込む。

オウンドメディア(2)押さずに、引き込む。

Shun Uchimura
2017.05.13
オウンドメディア(1)受け手主観でオウンドメディアをつくる

オウンドメディア(1)受け手主観でオウンドメディアをつくる

Shun Uchimura
2017.05.13
デザイナーとしてマーケティングを考える(4)4Pのキモを知る

デザイナーとしてマーケティングを考える(4)4Pのキモを知る

Shun Uchimura
2017.05.12
デザイナーとしてマーケティングを考える(3)4Pは古いのか

デザイナーとしてマーケティングを考える(3)4Pは古いのか

Shun Uchimura
2017.05.12
ajaxっぽいスムーズな画面遷移の方法(3/3)

ajaxっぽいスムーズな画面遷移の方法(3/3)

Shinji Yamamoto
2017.12.28
ajaxっぽいスムーズな画面遷移の方法(2/3)

ajaxっぽいスムーズな画面遷移の方法(2/3)

Shinji Yamamoto
2017.11.24
ajaxっぽいスムーズな画面遷移の方法(1/3)

ajaxっぽいスムーズな画面遷移の方法(1/3)

Shinji Yamamoto
2017.11.22
スムーススクロールがうまく動かない場合の解決方法

スムーススクロールがうまく動かない場合の解決方法

Shinji Yamamoto
2017.11.22
Javascript APIでのストリートビュー実装方法

Javascript APIでのストリートビュー実装方法

Shinji Yamamoto
2017.11.15
指定の範囲までついてくるフローティングバナー

指定の範囲までついてくるフローティングバナー

Shinji Yamamoto
2017.07.13

View ALL

Contact