うさぎのイラスト

ネットアンサー55備忘録

web技術を書いていきます

Velocity.jsの使い方

-2017年08月10日-
参考サイト:
Tip note by tam
LIG(fadeInまたがslideDownの記述方法書いてある)
パラメータ解説
easing一覧表
velocityプラスプラグイン イージング機能
<script>
$(function(){
  $.Velocity.mock = 10;
  $("div")
    .velocity(
      { borderRadius: '5000px'},
      { duration: 10,
        queue: false }
    )
    .velocity(
      { width: '10000px'},
      { duration: 100,
        queue: false }
    )
    .velocity(
      { height: '10000px'},
      { duration: 100,
        queue: false }
    )
    .velocity(
     { scale: 1.5},
     { duration: 100,
        delay: 900,
        loop: 2
    });
});
</script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>

<style>
h1 {
  font-size: 14px;
  font-weight: bold;
}

div {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  margin: 0 0 30px 0;
  background-color: #FA8072;
}

p {
  font-size: 12px;
}

a {
  color: #285294;
}
</style>

<h1>■$.Velocity.mockを指定しない場合(再生時間:0.2秒)</h1>
<div></div>