ふわふわ■中心点１６　光輪踊る(文字CSS)kurt.grigg

●2016/04/30：即時関数で囲んで、グローバル変数を消しました。
文字（CSS装飾）が回転しながら浮遊するJavaScriptです。

■光点が背景色のJavaScriptはこちら→　ふわふわ■中心点■１４光輪踊る(背景色)kurt.grigg
■光点が文字色のJavaScriptはこちら→　ふわふわ■中心点■１５光輪踊る(文字色)kurt.grigg
■文章が回転するJavaScriptはこちら→　ふわふわ■中心点■１７文字の輪踊る-kurt.grigg-
■画像が回転するJavaScriptはこちら→　ふわふわ■中心点■１８画像の輪踊る-kurt.grigg-

上記２作は光点が自動で色変化しましたが今回はそれを削除し、文字のCSS変化に変更しました。
文字（複数種類）、変化する色、光点の表示数、光点のサイズ（複数種類）、速度、リングのサイズ、透過が指定できます。
さらにCSSの文字の影指定を付けて、ボカシや輪郭線が指定可能です。今回は白のボカシを入れています。

■文字をCSSで装飾した拡大縮小JavaScriptはこちら→　ふわふわ■中心点■２１光輪踊る(文字CSS)拡大縮小

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ふわふわ■中心点１６　光輪踊る(文字CSS)kurt.grigg</title>

<!--★背景画像指定ここから。不要なら削除-->
<style type="text/css"><!--
body{
background:url(drw6.jpg) no-repeat #000;/*★背景画像指定。繰り返し無し。背景色黒色*/
background-size:100% auto;/*★背景画像横幅100%指定。見本の画像の実寸は横800px縦455px*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*============================================================================
踊る光輪　オリジナルby kurt.grigg@virgin.net     
*Crazy Circle from Rainbow Arch -->*http://rainbow.arch.scriptmania.com -->
★古いブラウザ対応分を削除。背景色の色変化の光点を、文字のCSS装飾の光点に変更。　2016/04/30
==============================================================================*/
(function (){ var i=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★文字指定。増減可能。文字を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var moj=["○","+","*"];
var fsz=["18px","24px","12px"];         //★文字のサイズ。増減可能。px指定でも%指定でも可能
var Clrs=["#ff9","#999","#fff","#9ff"]; //★文字の色。増減可能
var n=16;　　　　　 //★文字の表示数。増減可能
var opa=0.8;        //★文字の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var spd=20;         //★速度。数値が小さいほど速い
var b=100;    　　　//★リングの大きさ

/*★↓文字の影指定をCSS形式で記述。白いボカシ用。好みで変更可。指定不要ならvar snowcss="";で。*/
var snowcss="text-shadow: 2px 2px 5px #fff,-2px 2px 5px #fff,2px -2px 5px #fff,-2px -2px 5px #fff;";

//---------------指定項目ここまで--------------------------------------------------
var y=0,x=0,c1=0.05,cs1=0,c2=0.1,cs2=0,e=Math.round(360/n);
function fly(){
var h=window.innerHeight, w=window.innerWidth-30, sy=window.pageYOffset, sx=window.pageXOffset;
y=sy+h/2+h/3*Math.cos((cs2)/3)*Math.cos(cs2/50);
x=sx+w/2+w/2.4*Math.sin((cs2)/5)*Math.cos(cs2/30);
cs2+=c2;
}
function Circle(){
for (i=0; i<n; i++){
var divs=document.getElementById("stars"+i).style;
divs.top=(y+b*Math.cos(cs1+i*e*Math.PI/180)*Math.cos(cs1/3)*Math.sin(cs1/6))+"px"; 
divs.left=(x+b*Math.sin(cs1+i*e*Math.PI/180)*Math.cos(cs1/6))+"px";
}
cs1-=c1; fly(); setTimeout(Circle,spd);
}
var sss='';
for (i=0; i<n; i++){
sss+='<span id="stars'+i+'" style="position:absolute;top:0;left:0;color:'+Clrs[i%Clrs.length]+';font-size:'+fsz[i%fsz.length]+';opacity:'+opa+';'+snowcss+'">'+moj[i%moj.length]+'</span>';}
document.write(sss);
Circle();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

中心点１６■光輪踊る(文字CSS)kurt.grigg 最終修正日 : 2016/04/30

　中心点１６■光輪踊る(文字CSS)kurt.grigg　　　　最終修正日 : 2016/04/30