Little Strange Software

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

【JavaScript】青い空と白い雲【乱数背景】

 どうも!LSSです!!

 

JavaScriptで、背景に「青い空と白い雲」を乱数を用いて描いてみました。

乱数なので、ページを開くたびに模様が変わります。

 

 

コード

<script>
bgtxt='';
for(i=0;i<50;i++){
cr=Math.floor(Math.random()*60+30);
ct=Math.floor(Math.random()*50+cr);
cx=Math.floor(Math.random()*400+ct*2);
cy=Math.floor(Math.random()*400+ct*2);
cpx=Math.floor(Math.random()*100);
cpy=Math.floor(Math.random()*100);
bgtxt+='radial-gradient('+cr+'px '+cr+'px at '+ct+'px '+ct+'px,#ffffff30,#ffffff00) '+cpx+'% '+cpy+'%/'+cx+'px '+cy+'px repeat,';
}
document.body.style.background=bgtxt+'#aaaaff';
</script>

 

 

ついでに、記事部分の背景も透過

bodyの背景を変えるだけだと、スマホで見た場合に表示される面積が少ないので、記事部分の背景も透過してみました。

 

記事部分の背景を透過するコード

<style>
article{background:transparent!important;}
</style>

 

 

乱数なもので…

「なるべく自然な感じになるように」調整は試みましたが、実際どの程度かは…まさに「運次第」なところはありますw

 

 

 

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

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