kurt.grigg１２■文字■　youtubeに文字が飛ぶ（範囲）

<!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１２■文字■　youtubeに文字が飛ぶ（範囲）</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{background:#acf;}/*★背景色　水色*/

/*★#bsM必須。youtube(文字が飛ぶ領域)の位置指定。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#bsM{
position:relative;/*★必須。基準位置の指定*/
margin:100px auto 50px;/*★水平中央位置指定(上、左右、下)*/
width:560px;/*★必須。youtubeの横幅*/
height:315px;/*★必須。youtube縦幅*/
border:solid 10px #a82;/*★茶色の枠指定*/
box-shadow:5px 5px 10px #333;/*★黒色の影指定*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。ここから範囲指定の位置。id="bsM"は必須。-->
<div id="bsM">
<iframe width="560" height="315" src="https://www.youtube.com/embed/LB_hBw-2MCE" frameborder="0" allowfullscreen></iframe><!--★←youtubeのコード。不要なら削除-->
</div>
<!--★ここまで範囲指定の位置-->

<script type="text/javascript"><!--
/*=====================================================================
文字１個がスライドショーしながらランダム移動（範囲指定）★2017/06/25　
参考：画像１個ランダム移動　By　Random Movement Script by kurt.grigg@virgin.net(JS保管　http://www2.tky.3web.ne.jp/~ogura1/)
参考：画像１個がスライドショーしながら移動　By　Naughty Windows Script by kurt.grigg@virgin.net(JS保管 上記)
======================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var txt=["安倍友優遇反対","共謀罪反対","メディアのアンコン反対","三権分立を守れ","&hearts;"]; //★浮遊する文字指定。増減可能。&hearts;はハート

//★文字の色指定。増減可能。色を順番に"●",と区切って並べる。ランダムなので上記文字数より多くても少なくても可。最後の ] の前には ,(カンマ) 無し
var clrs=["#ccc","#ff0","aqua","pink","#5f5"]; 
var fmax=30;     //★文字の最大サイズ
var fmin=12;     //★文字の最小サイズ。クロムとオペラは10px以下は10px表示
var maxOp=1;     //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.8;  //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var inZ=1;       //★浮遊する文字と他の文章(画像)同士との重なり具合。1 以上を指定。他の文章(画像)との重なり具合で変更する
var spdF=30;     //★浮遊速度。原本10。数値が大きいほど遅い
var speed=5000;  //★文字のスライドショーする速度。1000=1秒
	
var fcss="text-shadow:0px 0px 2px #333;";//★CSSでの星の文字の影指定。見本は黒の輪郭線。不要ならvar fcss="";で

//指定ここまで----------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var i=0,len=txt.length;
var sss="<span id='tt' style='z-index:"+inZ+"; "+fcss+"'>"+txt[0]+"</span>";
document.write(sss);
function chT(){
var r=Math.floor(Math.random()*clrs.length);      //■追加。乱数の発生０～clrs.length（配列 clrs の色の数）
var fs=Math.floor(Math.random()*(fmax-fmin)+fmin);//■追加
var opa=Math.random()*(maxOp-miniOp)+miniOp;      //■追加
$("tt").style.color=clrs[r]; $("tt").style.fontSize=fs+"px"; $("tt").style.opacity=opa; //■追加 
if (i >=len){i=0;} $("tt").innerHTML=txt[i]; i++;
setTimeout(chT,speed);
}
var R=0,PB=0,RD=0,VB=0,HB=0;
var Y=10,X=10,D=Math.floor(Math.random()*60+10);
function Curve(){
var plusMinus=[1,-1,2,-2,3,-3,0,1,-1,4,-4];
R=Math.floor(Math.random()*plusMinus.length);
RD=plusMinus[R];
setTimeout(Curve,1800);
}
function MoveRandom(){
var H=bsM.clientHeight;
var W=bsM.clientWidth;
var YS=bsM.clientTop+bsM.offsetTop;
var XS=bsM.clientLeft+bsM.offsetLeft;
var BY=-(tt.offsetHeight), BX=-(tt.offsetWidth);
PB=D+=RD;
var y=3*Math.sin(PB*Math.PI/180);/*SY=3を数値で*/
var x=5*Math.cos(PB*Math.PI/180);/*SX=5を数値で*/
if (D<0){ D+=360;}
Y+=y; X+=x; VB=180-D; HB=0-D;
//Corner rebounds! not necessary but looks nice.
if ((Y < 1) && (X < 1)) {Y=1;X=1;D=45;}
if ((Y < 1) && (X > W+BX)) {Y=1;X=W+BX;D=135;}
if ((Y > H+BY) && (X < 1)) {Y=H+BY;X=1;D=315;}
if ((Y > H+BY) && (X > W+BX)) {Y=H+BY;X=W+BX;D=225;}
//Edge rebounds!
if (Y < 1) {Y=1;D=HB;}  
if (Y > H+BY) {Y=H+BY;D=HB;}  
if (X < 1) {X=1;D=VB;} 
if (X > W+BX) {X=W+BX;D=VB;} 
var ob=$("tt").style;
ob.top=(Y+YS)+"px"; ob.left=(X+XS)+"px"; ob.position="absolute";
setTimeout(MoveRandom,spdF);
}
chT();Curve();MoveRandom();//全部のオンロード
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>
kurt.grigg１２■文字■ youtubeに文字が飛ぶ（範囲） UP日時 : 2017/06/25

　kurt.grigg１２■文字■　youtubeに文字が飛ぶ（範囲）　　　　UP日時 : 2017/06/25
