kurt.grigg８■文字■　波文字マウス

●2016/08/16：原本自体が、即時関数で囲んでグローバル変数を消してあります。
文章がさざ波（Ripple）のようにゆれながら付いてくるマウスストーカーのJavaScriptです。
原本は文字の色が単色指定のみだったのを、６パターンに色が付けられるようにしました。
「単色」「赤色系統のランダム」「緑色系統のランダム」「青色系統のランダム」「虹色のランダム」「灰色のランダム」です。
「虹色のランダム」については、■マウスストーカー１-２■文字■虹色のキラキラ星 -2013年版改造-■を参考にしました。
さらに文字に影も付けられます。
見本は「赤色系統のランダム」を選択し、「黒の輪郭線の影」を付けました。原本はこちらから。

JavaScriptは違いますが、文字色指定方法は下記と同じですので、参考にして下さい。

「単色の白色」「赤のボカシの影」を付けた見本はこちら　→　kurt.grigg７■文字■円軌道文字のマウス
「灰色のランダム」「赤紫色のボカシの影」を付けた見本はこちら　→　kurt.grigg９■文字■波と円の合体マウス

<!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>kurt.grigg８■文字■　波文字マウス</title>

<style type="text/css"><!--
body{background:#eda;}/*★背景色指定。薄茶色。不要なら削除*/
--></style>

</head>
<body>

<!--★コピーここから　位置はbodyの中です-->
<script type="text/javascript"><!--
/*===================================================================
波文字マウス　Ripple Text　by Kurt Grigg - http://www.btinternet.com/~kurt.grigg/javascript（閉鎖済）
掲載サイト：http://www.kurtsdhtml.talktalk.net/　　★ソースを簡略化。文字色ランダム指定追加　2016/08/16
虹色ランダム指定参考サイト：http://www.mf2fm.com/rv （Tinkerbell Magic Sparkle ）
====================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var msg = "動くJavaScriptはコピーだけで動作するサンプルを紹介するサイト";//★マウスストーカー用文字指定。お好みで

var colour="random"; //★文字色指定。左記の"random"の項目に色名を記述すると記述した１色になる。「random」指定なら下記も指定
//★「1は赤系統のランダム」「2は緑系統のランダム」「3は青系統のランダム」「4は虹色のランダム」「5は灰色のランダム」。上記単色指定の時は「0」
var r_mode=1;

var fs=22;           //★文字の大きさ。単位px
var sc=0.8;          //★マウスが静止した時の文字同士の間隔
var ft="HGS創英角ポップ体";   //★原本arial。文字の書体。指定しない時は var ft="";で
var delay=0.35;      //★原本0.35。文字のゆらゆら度。1未満で指定。Must be less than 1
var speed=40;        //★原本40。文字の速度。setTimeout - run speed
var hy=30;           //★マウスと文字の先頭の上下の距離。マイナスで文字が上
var hx=0;          　//★マウスと文字の先頭の左右の距離。マイナスで文字が左
/*★↓文字の影指定をCSS形式で記述。見本は黒の輪郭線指定。好みで変更可。指定不要ならvar fcss="";で*/
var fcss="text-shadow:1px 1px 1px #000;";

//指定ここまで End user config.--------------------------------------------------
msg=msg.split("");
var n=msg.length; 
var y=0, x=0, yp=[], xp=[], yd=[], xd=[], temp=[], scy=0, scx=0, i=0;
for (i=0; i<n; i++){
document.write("<span id='letters"+i+"' style='position:absolute;font-size:"+fs+"px;font-family:"+ft+";"+fcss+"'>"+msg[i]+"<\/span>");
}
document.onmousemove=function(e){ y=e.pageY+hy; x=e.pageX+hx;}
function assign(){
var h=window.pageYOffset+window.innerHeight-fs-hy-18;//無限落下停止用
for(i=0; i<n; i++){ temp[i].top =Math.min(h, yp[i])+'px'; temp[i].left=xp[i]+(i*(fs*sc))+'px';} 
}
function ripple(){
yp[0]=yd[0]+=(y-yd[0]) * delay;
xp[0]=xd[0]+=(x-xd[0]) * delay;
for(var i=1; i<n; i++){
yp[i] = yd[i]+=(yp[i-1] - yd[i]) * delay;
xp[i] = xd[i]+=(xp[i-1] - xd[i]) * delay;
}
assign(); setTimeout(ripple,speed);
}
function newColour() {   /*■文字色指定追加*/
var c=[Math.floor(Math.random()*256),Math.floor(Math.random()*256)];
if(r_mode===1){return("rgb(255,"+c[0]+","+c[1]+")");}//赤
else if(r_mode===2){return ("rgb("+c[0]+",255,"+c[1]+")");}//緑
else if(r_mode===3){return ("rgb("+c[0]+","+c[1]+",255)");}//青
else if(r_mode===4){
var cc=[];
cc[0]=255;
cc[1]=Math.floor(Math.random()*256);
cc[2]=Math.floor(Math.random()*(256-cc[1]/2));
cc.sort(function(){return (0.5-Math.random());});
return ("rgb("+cc[0]+","+cc[1]+","+cc[2]+")");}//虹色
else if(r_mode===5){return ("rgb("+c[0]+","+c[0]+","+c[0]+")");}//灰色
else if(r_mode===0){document.getElementById("letters"+i).style.color=colour;}
}
function init(){
for (i=0; i<n; i++){
yp[i]=xp[i]=yd[i]=xd[i]=0;
temp[i]=document.getElementById("letters"+i).style; 
temp[i].color=(colour=="random")?newColour():colour;//■文字色指定追加
}
ripple();
}
init();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

kurt.grigg８■文字■ 波文字マウス UP日時 : 2016/08/16

　kurt.grigg８■文字■　波文字マウス　　　　UP日時 : 2016/08/16