要素をふわっと出す、css3アニメーションで簡単エフェクト。

2018.10.19

#css #webtips

髪を切って、きのこになりました。秋です。

ページを読み込んだときに、コンテンツをふわっふわっと表示させたい。
最近よく見るあれをやってみます。

ふわっという動きはcss3のtransitionで時間を制御。
「effect-fade」と「effect-scroll」、2種類のcssアニメーションを用意してスクロールをトリガーにjsで切り替えます。

html

ふわっふわっと表示させたい要素に「effect-fade」というclassを付与します。

ブロックまるごとふわっとさせたい

<section class="effect-fade">
 <h1>タイトル1</h1>
 <p>説明文1</p>
</section>
<section class="effect-fade">
 <h1>タイトル2</h1>
 <p>説明文2</p>
</section>
<section class="effect-fade">
 <h1>タイトル3</h1>
 <p>説明文3</p>
</section>

エレメントひとつひとつをふわっとさせたい

<section>
 <h2 class="effect-fade">コンテンツのタイトル</h2>
 <div>
  <ul>
   <li class="effect-fade">コンテンツその1</li>
   <li class="effect-fade">コンテンツその2</li>
   <li class="effect-fade">コンテンツその3</li>
  </ul> 
</div>
</section>

css

２つのclassを準備します。

.effect-fade {
　opacity : 0;
　transform : translate(0, 45px);
　transition : all 300ms;
}
.effect-fade.effect-scroll {
　opacity : 1;
　transform : translate(0, 0);
}

「effect-fade」はコンテンツを見えないように透過させ、45px下に移動。transitionでアニメーションしています。これが初期表示です。「effect-scroll」は透過せずに元の位置で通常表示してます。

js（jQuery）

スクロールしたら、「effect-fade」というclassが付与された要素に「effect-scroll」というclassをjsで追加。

$(function(){
　$(window).scroll(function (){
    $('.effect-fade').each(function(){
        var elemPos = $(this).offset().top;
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        if (scroll > elemPos - windowHeight){
            $(this).addClass('effect-scroll');
        }
    });
　});
});

参考サイト

参考にさせていただいたサイト。勉強になった！

海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法

動きがあると、それだけでなんだかおしゃれ。

jQueryって便利。

追記：初期表示、ページを開いたときにもふわんとさせる

ページを開いたときにコンテンツが隠れた状態になるので、初期表示でもふわんとさせよう。とトリリンガルなPGさんがコードを書き足してくれました。あざす。

js

window.onload = function() {
  scroll_effect();

  $(window).scroll(function(){
   scroll_effect();
  });

  function scroll_effect(){
   $('.effect-fade').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > elemPos - windowHeight){
     $(this).addClass('effect-scroll');
    }
   });
  }
};

onloadで一度ふわっ。初期表示でふわっとさせ、スクロールしたときにもふわんとさせます。
scroll_effect(); は、ふわっふわっの処理を関数にして呼び出しています。