yama-dev
3/24/2015 - 8:50 AM

Velocity.js

Velocity.js

Velocity.md
content_copyfile_download
  • Rendered
  • Source

Velocity.js

使い方

最低限の内容をJavaScriptのコメントに記載。

<i></i>

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.js"></script>

i {display: block; width: 50px; height: 50px; background: #ccc; position: absolute;}

$('i').velocity(
    {
        width: '100px',
        height: '100px',
        backgroundColor: '#000000',
        translateX: '+=200px',
        translateY: '+=200px'
    }, {
        // Option
        duration: 500, // アニメーション時間
        easing: 'ease-in-out', // イージング : linear, swing, ease, ease-in, ease-out, ease-in-out, [200, 15]
        begin: function(){console.log('start');}, // or null
        progress: null, // 進捗率
        complete: function(){console.log('end');}, // or null
        loop: 1, // 繰り返し : or false
        delay: 0, // 開始、ループ時に遅延させる Ex.1000
        display: 'none' // 表示・非表示 : false, 'none', 'block'
    }
);

// 省略記法
// $('i').velocity({...}, 500, 'ease-in-out'); 

// チェーンで繋ぐことも可能
// $('i')
//    .velocity({...}, 500, 'ease-in-out')
//    .velocity({...}, 500, 'ease-in-out');

参考URL