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>