CSSの border-radius を利用して、Nodeを円形に拡大縮小する。
対象NodeはCSSで「position: absolute」に設定し、width と height は同じ数値にしておく必要がある。
対象Nodeをklib独自の予約変数に登録して処理しているので、繰り返し実行しても対応可能。また、この関数が動作中かどうかはklib独自の予約変数『klibAniCircleMoving』(Bool値)で確認することが可能。
画像を使用する場合には、対象Nodeの背景画像として設定し、位置を縦横共に center に設定するとよい。
クリックやタップで動作するサンプル。
HTML :
<div id="sample1">
<div id="sample1_a" onclick="$aniCircle('sample1_a',300,7)"></div>
<div id="sample1_b" onclick="$aniCircle('sample1_b',150,12)"></div>
</div>
Sass :
#sample1 {
position: relative;
#sample1_a {
position: absolute;
width: 160px;
height: 160px;
background: url(../../images/pht_1.jpg) no-repeat center center;
background-size: auto 300px;
border-radius: 80px;
}
#sample1_b {
position: absolute;
width: 300px;
height: 300px;
background: url(../../images/pht_2.jpg) no-repeat center center;
background-size: auto 300px;
border-radius: 150px;
}
}
オンマウス(onmouseover/onmouseout)で動作するサンプル。
HTML :
<div id="sample2">
<div id="sample2_a" onmouseover="$aniCircle('sample2_a',260,8)" onmouseout="$aniCircle('sample2_a',160,20)"></div>
</div>
Sass :
#sample2 {
position: relative;
#sample2_a {
position: absolute;
width: 160px;
height: 160px;
background: url(../../images/pht_1.jpg) no-repeat center center;
background-size: auto 260px;
border-radius: 80px;
}
}
オンマウス(onmouseover/onmouseout)で動作するサンプル。背景画像ではなく子Nodeにテキストを持つ。
HTML :
<div id="sample3">
<div id="sample3_a" onmouseover="$aniCircle('sample3_a',350,13)" onmouseout="$aniCircle('sample3_a',200,22)">
○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○。
</div>
</div>
Sass :
#sample3 {
position: relative;
#sample3_a {
position: absolute;
width: 200px;
height: 200px;
background: rgba(#c6dbde,0.15)
border: 2px dashed rgba(#666666,0.2);
border-radius: 100px;
overflow: hidden;
}
}
クリック(onclick)で動作するサンプル。背景画像ではなく子Nodeにテキストを持つ。
border-radiusの変更を禁止し、代わりに外部の関数でコントロールすることで、四角く開いて丸く閉じる動作にしている。
HTML :
<div id="sample4">
<div id="sample4_a" onmouseover="$aniCircle('sample4_a',350,13,false);sample4_radius();" onmouseout="$aniCircle('sample4_a',200,22,false);sample4_radius();">
○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○。
</div>
</div>
Sass :
#sample4 {
position: relative;
#sample4_a {
position: absolute;
width: 200px;
height: 200px;
background: rgba(#c6dbde,0.15)
border: 2px dashed rgba(#666666,0.2);
border-radius: 100px;
overflow: hidden;
}
}
Javascript :
function sample4_radius() {
//サイズによってborder-radiusをコントロール
var nodeSize=$id("sample4_a").offsetWidth;
var useRadius=Math.round(((354-nodeSize)/154)*100);
$id("sample4_a").style.borderRadius=useRadius+8+"px";
//$aniCircle()が動作している間は繰り返す
if(klibAniCircleMoving) {
setTimeout(sample4_radius,40);
}
}