[JS]とっても簡単な記述でアニメーションが実装できる単体のスクリプト -Move.js

エレメントの移動や拡大、カラー変更などを、29種類のイージングのエフェクトを伴ってアニメーションで実装できるスクリプトを紹介します。

Move.js -GitHub
Move.js

[ad#ad-2]

たくさんあるデモの中からいくつかコードと共に紹介します。

Move#set

エレメントをアニメーションで、移動させます。

JavaScript

move('#example-1 .box')
  .set('margin-left', 200)
  .end();

Move#rotate

エレメントをアニメーションで、回転させます。

JavaScript

move('#example-4 .box')
  .rotate(140)
  .end();

Move#duration

アニメーションの持続時間を設定します。

JavaScript

move('#example-5 .box')
  .set('background-color', 'blue')
  .duration('2s')
  .end();

[ad#ad-2]

Move#skew

エレメントをアニメーションで、歪めます。

JavaScript

move('#example-8 .box')
  .x(300)
  .skew(50)
  .set('height', 20)
  .end();

Move#ease

イージングは29種類用意されており、同時にアニメーションさせることもできます。

JavaScript

move('#example-10 .box1').x(400).end();
move('#example-10 .box2').ease('in').x(400).end();
move('#example-10 .box3').ease('out').x(400).end();
move('#example-10 .box4').ease('in-out').x(400).end();
move('#example-10 .box5').ease('snap').x(400).end();
move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end();

setTimeout(function(){
  move('#example-10 .box1').x(0).end();
  move('#example-10 .box2').x(0).end();
  move('#example-10 .box3').x(0).end();
  move('#example-10 .box4').x(0).end();
  move('#example-10 .box5').x(0).end();
  move('#example-10 .box6').x(0).end();
}, 1200);