jQueryとcss3だけでスクロールすると文字がふわっとでてくる方法を上品かつ結構いろんなところで
使えそうなので備忘録として残しておきます。

さっそくソースから！

See the Pen スクロールすると文字がふわっとでてくる by sayuri (@giraffeweb) on CodePen.0

JSをくみこんでしまえばさくっと実装できるのですごく便利です！

JSは以下を読み込んでください。

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

でjQueryに以下の指示をします。

$(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");
    }
  });
});

これは$(window).scrollTop(); で、ウィンドウのスクロール位置を取得して
pタグがきたらtxt-effectをpタグに付与しなさいっていう指示です。

あとはcssで調整すればサクッと動きます！

みなさんもぜひ試してみくださいね(*’ω’*)

• blog,
• code,
• css3,
• web