JavaScriptプログラムに関する各種メモ書き:タグ「css」での検索

アニメーションライブラリ velocity.js の記述方法

● 1. velocity.jsの読み込み(jQueryは読み込まなくても可能ですが、共存することもできます)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.js"></script>

● 2. velocity.js のアニメーション記述

省略記法で記述する例

.velocity( 変形させたいパラメータ,(ハッシュ) アニメーション時間(ms), オプション(ハッシュ),  終了時実行関数(関数) )

例1:

$('#menu').velocity({
  opacity    : [ 1, 0 ],
  translateY : [ 0, -50 ]
},600,{ easing: "easeOutCirc" } ,
function(){ console.log("complete !!");  }
);

例2:opacity と translateY それぞれに違うイージングをかけたい場合

$('#menu').velocity({
  opacity    : [ 1, 'easeInQuart', 0 ],
  translateY : [ 0, 'easeOutQuart', -50 ]
},2000);

● 3. velocity.js の連続アニメーションの記述例

3つのアニメーションを連続して動かします。

$('#menu')
.velocity( { opacity: [ 1, 0 ], translateX: [ -30, 1250 ] },600, { easing: "easeOutCirc" } )
.velocity( { translateY: 10 }, 200 )
.velocity( { translateY: 0 }, 200 );

● 4. 複数の要素に対して順番にアニメーションを動作させる記述例

.velocity.ui を追加で読み込ませます。

  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>

Velocity.RegisterEffect でアニメーションを定義して velocityで呼び出します。
stagger が1つ1つの要素を順番にアニメーションしていく際の待ち時間になります。

  $.Velocity.RegisterEffect("trans.my_effect", {
    defaultDuration: 500,
    calls: [[ { opacity: [1,0],  scaleX:[ 1, 0.1 ], scaleY:[ 1, 0.1 ] }, 1.00, { easing: "easeOutCirc" } ]] 
  })

  $('#menu li').css({opacity:0}).velocity("trans.my_effect", {
    easing  : 'ease-in-out',
    duration: 1000,
    stagger : 150
  });

● 5. さらに複雑なアニメーションを記述するには

複雑なアニメーションとそれに伴う処理を簡潔に書くことのできるライブラリ vq を作った

No.1020
06/26 12:05

edit

css
jQuery

jqueryの fadeIn / fadeOut メソッドを CSS3アニメーションにする

jqueryの fadeIn / fadeOut メソッドを CSS3(animation)アニメーションにするには以下のようにします。

デモ : http://logic.moo.jp/livedemo/jquery.fadecss3/demo.html

<link rel="stylesheet" href="jquery.fadecss3.css">
<script type="text/javascript" src="jquery.fadecss3.js"></script>
$('#item').fadeInCss3();
$('#item').fadeOutCss3();

$('#item').fadeInCss3(1000, 'ease-in');
$('#item').fadeOutCss3(3500, 'ease-in-out');

jquery.fadecss3.css として保存

@keyframes fadein_css3_kf {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadein_css3_kf{
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes fadeout_css3_kf {
  0% {opacity: 1;}
  100% {opacity: 0; visibility: hidden; }
}
@-webkit-keyframes fadeout_css3_kf{
	0% {opacity:1;}
	100% {opacity:0; visibility: hidden;}

jquery.fadecss3.js として保存

$.fn.fadeInCss3 = function(duration, easing) {
  var event_alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";
  if (! duration){duration=400;}
  if (! easing){easing='linear';}
  var _this = this;
  setTimeout(function() {
    return $(_this).show().css({
        'animation'                 : 'fadein_css3_kf 400ms linear 0s 1 normal' ,
        'animation-duration'        : duration + 'ms' ,
        'animation-timing-function' : easing ,
        'animation-fill-mode'       : 'forwards' ,
        'visibility'                : 'visible'
    }).on(event_alias, function(){
      $(this).off(event_alias);
      $(this).css({
        'visibility' : 'visible' ,
        'animation'  : 'none'
      });
    });
  }, 0);
};

$.fn.fadeOutCss3 = function(duration, easing) {
  var event_alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";
  if (! duration){duration=400;}
  if (! easing){easing='linear';}
  $(this).each(function(){
    if( $(this).filter(':not(:hidden)').length ){
      $(this).show().css({
          'animation'                 : 'fadeout_css3_kf 400ms linear 0s 1 normal' ,
          'animation-duration'        : duration + 'ms' ,
          'animation-timing-function' : easing ,
          'animation-fill-mode'       : 'forwards' ,
          'visibility'                : 'visible'
      }).on(event_alias, function(){
        $(this).off(event_alias);
        $(this).css({
          'visibility' : 'hidden' ,
          'animation'  : 'none' ,
          'display'    : 'none'
        });
      });
    }
  });
  return $(this);
};

ただ現時点では CSSアニメーションはjQuery本体のanimate()よりは早いものの、Velocity.js には劣るようです。 参考 : http://bit.ly/1QnSfRn

No.1006
02/22 15:14

edit

css
アニメーション
高速化

jQueryを使ってCSS3アニメーションを操作する。【jquery.transit】

■ jquery.transit · GitHub

https://github.com/rstacruz/jquery.transit#readme

jQueryを使いますが、アニメーション自体はCSS3アニメーションなのでスマホでも軽いです。 例:(フェードインの例)

<div id="test" style="border:1px solid red;">テストです</div>
$('#test').transition({ opacity: 0.0, scale: 0.5 }, 0);
$('#test').transition({
  opacity : 1.0,
  scale   : 1.0 ,
  duration: 5000,
  complete: function() {
    alert("CSS3 animation complete!");
  }
});
No.988
12/18 17:23

edit

jQuery
css
アニメーション