Now Loading...
menu
  • すべて
  • カメラで遊ぶ
  • 写真を楽しむ
  • 旅
  • モノ
  • おすすめツール
  • web制作

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

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

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

 

ページを読み込んだときに、コンテンツをふわっふわっと表示させたい。

最近よく見るあれをやってみます。

 

ふわっという動きは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

2つの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

スクロールしたら、「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(); は、ふわっふわっの処理を関数にして呼び出しています。

 

トップページで実装しているよ。

 

 

ふわっと表示させたい方に、こちらの記事もおすすめです。

イマドキなコーディングって?最近のwebサイトの作り方。

 

share on