[JS][CSS3] jQuery を使わずに fadeIn / fadeOut のアニメーションを実装する方法

jQuery を使わずに、CSS3・requestAnimationFrame メソッド・setTimeout 関数で fadeIn / fadeOut のアニメーション表現を行うということをやってみました。jQuery を使えば fadeIn()、fadeOut() だけの記述で済むことですが、いざそれを使わずにとなると大変だなという印象です…。

各サンプルは、マウスオーバー時にフェードアウト・マウスアウト時にフェードインします。 HTML は共通で以下のようになっています。

<div id="box">FadeIn/Out</div>

CSS3 でフェードイン・アウトする

opacity の変化を transition プロパティでアニメーションにします。transition を設定するだけでアニメーションにしてくれるのでとても簡単です。transition は IE10以上で対応しています。

See the Pen CSS3でフェイドイン/アウト by Saomocari (@Saomocari) on CodePen.

CSSコード

#box{
  width: 150px;
  height: 100px;
  〜略〜
  opacity:1;
  transition:all 0.3s;
}
#box:hover{
  opacity:0.5;
  transition:all 0.3s;
}

JavaScript の requestAnimationFrame メソッドを使ってフェードイン・アウトする

JavaScript の requestAnimationFrame メソッドを使い、マウスオーバー時 opacity を 0.5 の値に、マウスアウト時に opacity を 1 の値に戻すということをアニメーションにしています。この requestAnimationFrame メソッドもまた、IE10以上でないと使えません…。

See the Pen requestAnimationFrame メソッドでフェードイン・アウト by Saomocari (@Saomocari) on CodePen.

JavaScript コード

window.onload = function(){

var box = document.getElementById('box');
// ↑フェードさせたい要素のIDを(' ')内に指定
var boxOpa;
box.style.opacity = 1;

// フェードアウト時のアニメーション設定
function fadeOut(){
  var boxOpa = parseFloat(box.style.opacity);
  var opaValue = .05;
  var limit = 0.5;
  // ↑ opacity値の限度
  //(この設定だと opacity:0.5 まで透明に)

   if(boxOpa > limit){
     boxOpa = boxOpa - opaValue;
     box.style.opacity = boxOpa;
     requestAnimationFrame(fadeOut);
     // ↑ requestAnimationFrame で opacity値 が 0.5 になるまで
     // 透明度を0.05ずつ減らして行く
   }
}

// フェードイン時のアニメーション設定
function fadeIn(){
  var boxOpa = parseFloat(box.style.opacity);
  var opaValue = .05;

   if(boxOpa < 1){
     boxOpa = boxOpa + opaValue;
     box.style.opacity = boxOpa;
     requestAnimationFrame(fadeIn);
     // ↑ requestAnimationFrame で opacity値 が 1 になるまで
     // 透明度を0.05ずつ足して行く
   }
}  

// マウスオーバー時に fadeOut アニメーションを実行
box.onmouseover = function(){
  fadeOut();
}
// マウスアウト時に fadeIn アニメーションを実行
box.onmouseout = function(){
  fadeIn();
}

}

JavaScript の setTimeout を使ってフェードイン・アウトする

JavaScript の setTimeout 関数を使い、マウスオーバー時に opacity を 0.5 の値へ、マウスアウト時に 1 の値へ、1/100 秒ごとに 0.05 ずつ opacity 値を足したり引いたりすることで、アニメーションにしています。動作確認は IE7 までOKでした。

See the Pen JavaScript の setTimeout を使ってフェードイン・アウトフェードイン・アウト by Saomocari (@Saomocari) on CodePen.

JavaScript コード

window.onload = function(){  

var box = document.getElementById('box') ;
// ↑フェードさせたい要素のIDを(' ')内に指定
var limit = 0.5;
//  ↑ opacity値の限度

// フェイドアウトアニメーション設定
var fadeOut_timer;
function fadeOutTimer(opaValue){
    if (opaValue > limit && opaValue > 0.05){
        box.style.filter = "alpha(opacity:"+(opaValue*100)+")";
        box.style.opacity = opaValue;
        opaValue = opaValue - 0.05;
        fadeOut_timer = setTimeout(function(){ fadeOutTimer(opaValue); }, 10);
        // ↑ setTimeout で opacity値 が 0.5 になるまで
     	// 透明度を0.05ずつ減らして行くことを 1/100 秒毎に繰り返す
     	// タイマーを設定する
    } else {
        clearTimeout(fadeIn_timer);
        // ↑ opacity値 が 0.5 になったらタイマーを止める
        box.style.filter = "alpha(opacity:"+(limit*100)+")";
        box.style.opacity = limit;
        // limit 値の透明度を設定
    }
}

// フェイドインアニメーション設定
var fadeIn_timer;
function fadeInTimer(opaValue){
    if (opaValue < 1){
        box.style.filter = "alpha(opacity:"+(opaValue*100)+")";
        box.style.opacity = opaValue;
        opaValue = opaValue + 0.05;
        fadeIn_timer = setTimeout(function(){fadeInTimer(opaValue);}, 10);
     	// ↑ setTimeout で opacity値 が 1 になるまで
     	// 透明度を0.05ずつ足して行くことを 1/100 秒毎に繰り返す
     	// タイマーを設定する
    } else {
        clearTimeout(fadeIn_timer);
        // ↑ opacity値 が 1 になったらタイマーを止める
        box.style.filter = "alpha(opacity:100)";
        box.style.opacity = 1;
    }
}

// マウスオーバー時に fadeOut アニメーションを実行
box.onmouseover = function(){
    clearTimeout(fadeIn_timer);
	 // ↑ 連続してマウスアウトした時のために
	 // fadeOutアニメーションを止める処理
  	 // (jQuery の stop() のようなもの)
    var opaValue = 1;
    fadeOutTimer(opaValue);
}
// マウスアウト時に fadeIn アニメーションを実行
box.onmouseout = function(){
    clearTimeout(fadeOut_timer);
    var opaValue = limit;
    fadeInTimer(opaValue);
}

}

以上、3パターンのコードでした。

jQuery を使わずにクロスブラウザでアニメーションしたい場合は、最後の setTimeout 関数を使う方法になりますが、とてもコードが長くなってしまいました。

JavaScript の勉強のため色々コードを書いてみてるので、こういうエントリーになりましたが、そこまでパフォーマンスを気にしなくてもよい場合は、やはり jQuery などのライブラリーを使うのが効率的ですね…。

CSS3 のアニメーションは直感的に使えて楽しいので、もっと普通に使える場面が増えるといいなと思います。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS