こんにちは。
最近ランニングしてますが、なぜか全然痩せない佐藤です。

今日は、最近webサイトでよく見る、スクロールしていくとコンテンツを”ふわっと”表示させるアニメーションをご紹介します。
コピペだけで実装できます。

実装させるためにまずはcssを用意します。

こんな感じです。

.fuwatto-wrap [class*='fuwatto'] {
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 0.9s; 
}
.fuwatto-wrap [class*='fuwatto'].f-act {
  opacity: 1;
  transform: translate(0, 0); 
}

軽く解説すると、

“fuwatto-wrap”というクラスの子要素で”fuwatto”が付くクラスの付いた要素を少し下にずらし透明にします。

そしてその透明な要素に”f-act”というクラスを付与するとコンテンツが表示される仕組みです。

動きの設定を変えたい場合はtransitionの値を変更してください。

次はjavascriptですね。

内容はこちら。jQueryが必要な構造なので前もって読み込んでおきましょう。

(function($){
	"use strict";
  
  //色々取得
  var $window = $(window),
      nowScroll = $window.scrollTop(),
      wHeight = window.innerHeight,
      $fuwattoWrap = $('.fuwatto-wrap');
  
  /*設定値*/
  var hRatio = 0.8,//画面のどこまで要素が来た時表示させるか。:初期値0.8(画面上より80%の位置)
      fTime = 400,//fuwatto1発動までに必要な時間:初期値400(0.4秒)
      aTime = 250;//その後のfuwatto2～の発動までの必要な時間:初期値250(0.25秒)
  /*設定値ここまで*/
  
  //値の更新
  
  $window.on('scroll',function(){
    nowScroll = $window.scrollTop();
  });
  $window.on('load resize',function(){
    wHeight = window.innerHeight;
  });
  
  
  //fuwatto-wrapがある場合のみ処理
  if($fuwattoWrap.length){
    
    //fuwatto-wrapにクラス付与
    $fuwattoWrap.addClass('not-fuwatto');
    
    //ふわっと処理実行
    actFuwatto();
    
    //スクロール時の処理
    $window.on('scroll',function(){
      //not-fuwattoがある場合のみ処理
      if($('.not-fuwatto').length){
        //ふわっと処理実行
        actFuwatto();
      }
    });
  }
  
  
  function actFuwatto(){
    
    //各not-fuwatto毎の処理
    $('.not-fuwatto').each(function(){
      
      var $this = $(this),
          thisPos = $this.offset().top;
      
      //$thisの位置が画面の80%の位置に来た場合のみ処理
      if(thisPos <= ((wHeight*hRatio)+nowScroll)){
        
        //$thisからnot-fuwattoクラスを消去
        $this.removeClass('not-fuwatto');
        
        //fTime秒後に実行
        setTimeout(function(){
        
          //$thisの中のfuwattoを含むクラスの数を取得
          var kaz = $this.find("[class*='fuwatto']").length,
              finish = 0,
              fuwattoTimer,
              fIndex = 2;
          
          //$thisの子要素にfuwatto1が存在する場合のみ処理
          if($this.find('.fuwatto1').length){
            //$thisの子要素のfuwatto1にf-actクラス付与
            $this.find('.fuwatto1').addClass('f-act');
          }
          
          //aTime秒毎に処理
          fuwattoTimer = setInterval(function(){
            //処理済のがkazを超えたら処理終了
            if(kaz<=finish){
              clearInterval(fuwattoTimer);
            }else{
              //fuwattoの順番ごとにf-actクラス付与
              $this.find('.fuwatto'+fIndex).addClass('f-act');
              finish = $this.find('.f-act').length;
              fIndex++;
            }
          },aTime);
        },fTime);
      }
    });
  }
})(jQuery);

これでjavascriptもＯＫです。

設定を変えたい場合は

/*設定値*/

/*設定値ここまで*/

の中の変数に格納する値を修正すれば変更できます。

あとはhtmlのふわっと処理を与えたい要素にクラスを与えるだけでふわっと表示されます。

クラスを与える法則ですが、まずトリガーとなる要素に”fuwatto-wrap”をその子要素のふわっとする要素に”fuwatto1″を与えます。

複数の要素を順番にふわっとしたい場合は”fuwatto1″、”fuwatto2″といように文末の数字を一つずつ増やしていきます。

もちろん、同時に表示にさせたい場合は同じ数字を与えればOKです。

例：タイトル→写真→説明文の順番で表示させる場合

<section class="fuwatto-wrap">
  <h2 class="fuwatto1">タイトルあああああ</h2>
  <figure>
    <img src="xxxx" class="fuwatto2" alt=""/>
    <figcaption class="fuwatto3">●●で撮影した写真です。</figcaption>
  </figure>
</section>

簡単ですね。

cssを書き換えればふわっとだけでなく結構色々な動きをスクロールで発火させることができるので色々チャレンジしてみてください。