Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【JavaScript】0~100%を2の累乗数で分断するぞう君【謎ツール】

 どうも!LSSです!!

 

…謎なものを作ってしまいました。

 

 

0~100%を2の累乗数で分断するぞう君

 

 

What's this?

最初、「2」が選択されたセレクトボックスと「0%,50%,100%」の文字が表示されています。

これは「0~100%を2つに分けた時の、さかい目となる%」を示しています。
両端である0%と100%、そしてぶったぎった地点である50%ですね。

 

この「2」を、4,8,16,32,64に変更する事ができ、変更すると自動的に%の文字もそれに応じたものに変わります。

%の数が8個以上になった場合は、8個ごとに改行が入ります。

 

 

何に使うん?

例えばCSS

keyframesやgradientで、%指定で均等に分断したくなる事がよくあります(←自分だけ?)。

そんな時、「0,50,100」や「0,25,50,75,100」程度なら即座に分かりますが、さらにその半分、そしてさらにもう半分…となると、なかなか計算が面倒くさくなってくるので、この際、コードに転用しやすい形で出力してくれるツールを、と作ってしまいました。

 

 

リズミカルなアニメーションを目指して

もっと書くと、keyframesアニメーションを作成する際に、4拍子系のリズムでの動きを作ったら、かっこよくなるのかも?

と思ったのも動機の根源のひとつです。

こうして作った%指定に沿ってkeyframesを書き、ところどころ敢えて%を抜くなどで、音楽的なリズムを刻む動きになる…かな?と。

 

 

このツールのコード

<select id="slct">
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
<option value="16">16</option>
<option value="32">32</option>
<option value="64">64</option>
</select>
<div id="gamen"></div>
<p>
<script>
slct.addEventListener('input',slctc,false);
slctc();
function slctc(e){
txt='';
for(i=0;i<parseInt(slct.value);i++){
if(i%8==0){txt+='<br/>';}
txt+=Math.round(i*100000/parseInt(slct.value))/1000+'%,';
}
if(i%8==0){txt+='<br/>';}
txt+='100%'
gamen.innerHTML=txt;
}
</script>
</p>

 

一応、参考までにこのツール自体のコードも載せておきます。

 

そして、実際にkeyframesサンプルを用意するのは、また後日別記事で^^

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^