[オープン]object-fit型[Fof][レスポンシブ][アクティブ][シャッフル][DrFlMw縦横連動][実行時ランダム][4画像][多種類][セレクト][部品削除可]スライドショーFofHD_nhsl_dfw_zdwp

・　見本: 　見本は「カスタマイズ」で自動開始と[アクティブ]と[シャッフル]と[実行時ランダム]機能をONに設定してあります（[～]の意味はコンテンツの題名のブラケット（角括弧[]）についてを参照）。この見本はデータにimg要素を使うため右クリックから「新しいタブで画像を開く」事が可能です。よってviewボタンは削除してあります。このページでは、実際の地球の写真を加工したものや生成AIのGeminiで作った地球の画像と私が撮影した写真を合成したものを使っています。

/** ページ全体。必要に応じて書き換えてください。 **/
body{font-family:"メイリオ";text-align:center;margin:0;padding:0;border:0;outline:0;}

/** スライドショー全体。max-width:～px;に最大表示サイズを書く。 **/
.FofHD_nhsl_dfw_zdwp_os{position:relative;top:0;left:0;width:90%;max-width:640px;margin:auto;overflow:hidden;}

/** 表示部分。 **/
/** アスペクト比維持型はheight:～;の代わりにpadding-top:～%;に画像の（高さ／幅）を％で書く。 **/
/** 高さ固定型はpadding-top:の代わりにheight:～;で高さを固定する。 **/
.FofHD_nhsl_dfw_zdwp_os .base{position:relative;top:0;left:0;height:480px;}

/** 個々のデータ。 **/
.FofHD_nhsl_dfw_zdwp_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;box-sizing:border-box;object-fit:contain;background-color:#ccb;border:20px solid #ccb;}

/** ボタン。 **/
.FofHD_nhsl_dfw_zdwp_os .mae,.FofHD_nhsl_dfw_zdwp_os .tugi{width:26px;height:26px;border-radius:50%;cursor:pointer;border:0;background-color:#fff;}
.FofHD_nhsl_dfw_zdwp_os .but_sl{width:50px;height:24px;cursor:pointer;border:0;background-color:#fff;}
.FofHD_nhsl_dfw_zdwp_os .bs_bu{width:60px;height:24px;cursor:pointer;border:0;background-color:#fff;}

/** 速度変更セレクトボックス。 **/
.FofHD_nhsl_dfw_zdwp_os .ke_che,.FofHD_nhsl_dfw_zdwp_os .ya_che{position:relative;top:0px;left:0px;width:55px;height:24px;box-sizing:border-box;border:0;}

/** ボタンの外枠。 **/
.FofHD_nhsl_dfw_zdwp_os .con{position:absolute;top:10px;right:10px;z-index:20;padding:6px;color:#fff;font-size:14px;background-color:rgba(0,0,0,0.6);border-radius:19px;transition:0.5s;opacity:0.1;}
.FofHD_nhsl_dfw_zdwp_os .con:hover{opacity:1;}

/** セレクトボックス。 **/
.FofHD_nhsl_dfw_zdwp_os .ke_che{width:55px;height:24px;box-sizing:border-box;}
.FofHD_nhsl_dfw_zdwp_os .ya_che{width:55px;height:24px;box-sizing:border-box;}

</style>

</div>

<div class="con">
<button class="mae" title="前の画像"><</button>
<button class="but_sl" title="スライドショーの開始と停止">pause</button>
<button class="bs_bu" title="表示方法の変更">cover</button>
<select class="ke_che" title="スライドショー速度">
<option value='2000'>2秒</option>
<option value='5000' selected>5秒</option>
<option value='10000'>10秒</option>
<option value='30000'>30秒</option>
</select>
<select class="ya_che" title="アニメーション速度">
<option value='600'>0.6秒</option>
<option value='800'>0.8秒</option>
<option value='1000'>1秒</option>
<option value='1500' selected>1.5秒</option>
<option value='2000'>2秒</option>
</select>
<button class="tugi" title="次の画像">></button>
</div>

</div>

t={SDA:function(n){n.preventDefault?n.preventDefault():n.returnValue=!1},XF:function(n,t,i,r){var f,e,u=!1;n.addEventListener("touchstart",function(){f=event.changedTouches[0].pageX;u=!0},!1);n.addEventListener("touchmove",function(n){u&&(n.preventDefault(),e=event.changedTouches[0].pageX,e-f>r?(u=!1,i()):e-f<-r&&(u=!1,t()))},!1);n.addEventListener("touchend",function(){u&&(u=!1)},!1)},YF:function(n,t,i,r){var f,e,u=!1;n.addEventListener("touchstart",function(){f=event.changedTouches[0].pageY;u=!0},!1);n.addEventListener("touchmove",function(n){u&&(n.preventDefault(),e=event.changedTouches[0].pageY,e-f>r?(u=!1,i()):e-f<-r&&(u=!1,t()))},!1);n.addEventListener("touchend",function(){u&&(u=!1)},!1)},XD:function(n,i,r,u){var f,e,o=!1,s=navigator.userAgent;n.addEventListener("mousedown",function(n){s.search(/iPhone/)!=-1||s.search(/iPad/)!=-1||s.search(/iPod/)!=-1||s.search(/Android/)!=-1||n.preventDefault();n.returnValue=!1;f=document.all?event.x:n.pageX;o=!0},!1);n.addEventListener("mousemove",function(s){o&&(s.preventDefault?s.preventDefault():s.returnValue=!1,e=document.all?event.x:s.pageX,e-f>u?(o=!1,r()):e-f<-u&&(o=!1,i()),(e-f>10||e-f<-10)&&n.addEventListener("click",t.SDA,!1))},!1);n.addEventListener("mouseup",function(){((e-f>10||e-f<-10)&&setTimeout(function(){n.removeEventListener("click",t.SDA,!1)},100),o)&&(o=!1)},!1)},YD:function(n,i,r,u){var f,e,o=!1,s=navigator.userAgent;n.addEventListener("mousedown",function(n){s.search(/iPhone/)!=-1||s.search(/iPad/)!=-1||s.search(/iPod/)!=-1||s.search(/Android/)!=-1||n.preventDefault();n.returnValue=!1;f=document.all?event.y:n.pageY;o=!0},!1);n.addEventListener("mousemove",function(s){o&&(t.SDA(s),e=document.all?event.y:s.pageY,e-f>u?(o=!1,r()):e-f<-u&&(o=!1,i()),(e-f>10||e-f<-10)&&n.addEventListener("click",t.SDA,!1))},!1);n.addEventListener("mouseup",function(){((e-f>10||e-f<-10)&&setTimeout(function(){n.removeEventListener("click",t.SDA,!1)},100),o)&&(o=!1)},!1)},MW:function(n,t,i){var r=function(n){var r=window.event||n,u=r.detail?r.detail*-120:r.wheelDelta;if(u<=-120?t():i(),r.preventDefault)r.preventDefault();else return!1},u=/Firefox/i.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel";n.addEventListener(u,r,!1)}},r=function(n,t,i,r){for(var s,f="."+i,u=n.querySelector("."+t),e=u.querySelectorAll(f),o=e.length;o;)s=Math.floor(Math.random()*o--),u.appendChild(e[s]),o==0?(n.m=u.querySelectorAll(f),r()):e=u.querySelectorAll(f)},i=function(n){var o=n.querySelector(".base"),tt=n.querySelector(".but_sl"),et=n.querySelector(".mae"),ot=n.querySelector(".tugi"),b=n.querySelector(".view"),k=n.querySelector(".ya_che"),d=n.querySelector(".ke_che"),c="contain",it=n.querySelector(".bs_bu"),u=o.querySelectorAll(".koboData"),l=u.length,p,i=0,g=0,s=0,e=0,r=1,rt=!1,ut=!1,a=!1,w=Copyright,ft=HomePage,st=MailAddress,at=ContentType,v={iy:l,ya:da,ke:ds},h=document.createElement("a"),f=function(n,t){rt||(rt=!0,r=n>i?1:-1,ut&&slr&&(r=Math.floor(Math.random()*2)*2-1),g=i,i=n,i+=v[ft.substr(9,2)],i%=v[st.substr(1,2)],s=g-r,e=i+r,nt(),document.querySelector(".c_"+w).href.substr(9,2)===w.substr(1,2)&&setTimeout(function(){vt(t)},50))},nt=function(){s+=l;s%=l;e+=l;e%=l;s===i&&(s=s-r,nt());e===g&&(e=e+r,nt());s===e&&(e=e-r*2,nt())},ht=function(n){b&&(b.onclick=function(){if(n.src)window.open(n.src);else{var t=n.currentStyle||window.getComputedStyle(n,!1);n.querySelector("img")?window.open(n.querySelector("img").src):t.backgroundImage&&window.open(t.backgroundImage.slice(4,-1).replace(/"/g,""))}})},vt=function(t){clearTimeout(p);var f=Math.floor(Math.random()*(Object.keys(ani).length-2));ani[lt[f]](n,o,da,u[i],u[g],r,t,u[s],u[e]);ut=!1;b&&ht(u[i]);setTimeout(function(){y&&!a&&ct();rt=!1},v[st.substr(2,2)]+100)},ct=function(){clearTimeout(p);p=setTimeout(function(){slr&&(ut=!0);f(i+1)},v[ft.substr(12,2)])},lt=Object.keys(ani);lt.splice(0,2);n.mp=document.createElement("div");o.appendChild(n.mp);n.mp.style.position="absolute";n.mp.style.top="0px";n.mp.style.left="0px";n.mp.style.zIndex=0;n.mp.style.width="100%";n.mp.style.height="100%";n.mp.style.display="none";n.mp.style.transitionProperty="transform,left,clip";n.mp.style.backgroundColor="#fff";et&&(et.onclick=function(){f(i-1,"x")});ot&&(ot.onclick=function(){f(i+1,"x")});tt&&(tt.innerHTML=y?pause:play,tt.onclick=function(){y?(clearTimeout(p),y=!1,this.innerHTML=play):(y=!0,this.innerHTML=pause,f(i+1))});dfw&&(t.XF(o,function(){r=1;f(i+1,"x")},function(){r=-1;f(i-1,"x")},50),t.XD(o,function(){r=1;f(i+1,"x")},function(){r=-1;f(i-1,"x")},50),t.YF(o,function(){r=1;f(i+1,"y")},function(){r=-1;f(i-1,"y")},50),t.YD(o,function(){r=1;f(i+1,"y")},function(){r=-1;f(i-1,"y")},50),t.MW(o,function(){r=1;f(i+1,"y")},function(){r=-1;f(i-1,"y")}));it&&(it.innerHTML=c==="cover"?"contain":"cover",it.onclick=function(){var n,t;for(this.innerHTML==="cover"?(this.innerHTML="contain",c="cover"):(this.innerHTML="cover",c="contain"),n=0;n<l;n++)u[n].src?u[n].style.objectFit=c:(t=u[n].currentStyle||window.getComputedStyle(u[n],!1),u[n].querySelector("img")?u[n].querySelector("img").style.objectFit=c:t.backgroundImage&&(u[n].style.backgroundSize=c))});d&&(d.onchange=function(){ds=d[this.selectedIndex].value-0;v.ke=d[this.selectedIndex].value-0});k&&(k.onchange=function(){da=k[this.selectedIndex].value-0;v.ya=k[this.selectedIndex].value-0});b&&ht(u[i]);u[i].style.zIndex=2;u[i].style.opacity=1;fb&&(window.addEventListener("blur",function(){y&&!a&&(a=!0,clearTimeout(p))},!1),window.addEventListener("focus",function(){y&&a&&(a=!1,f(i+1))},!1));window.addEventListener("load",function(){document.querySelector(".c_"+w)||(document.body.appendChild(h),h.setAttribute("href",ft),h.setAttribute("class","c_"+w),h.innerHTML=at+" (C) "+w,h.style.display="none",h.style.fontSize="12px",h.style.width="250px",h.style.margin="1ex auto");y&&!a&&ct()})};sf?r(n,"base","koboData",function(){i(n)}):i(n)}(document.getElementById("

・　説明: 　サイズやアスペクト比が異なる画像を表示する事ができるスライドショーです。スライドショーデータは、「ここからスライドショーのデータ。↓」以下のクラス名koboDataのimg要素で、表示する画像を設定してください。; 　レスポンシブデザイン対応で要素内にアスペクト比が異なる画像を表示する方法は2種類あり、img要素のスタイルシートobject-fitを使う方法と、画像をdiv要素の背景にしてスタイルシートbackground-sizeをcontainに設定しimg要素の代わりに使う方法です。当サイトの[F]型スライドショーではbackground-sizeを使う方法を採用していますが、このページではobject-fitを使う方法を採用しました。; 　ただし、object-fit型ではバナーのデータを混ぜる事はできません。もちろん、クラス名koboDataのa要素のbackground-size型のデータや、img要素をクラス名koboDataのa要素で囲んでimg要素にスタイルobject-fitを設定する方法などでバナーにする事は可能ですが、クラス名koboDataがimg要素ではなくなり、スタイルシートの設定も複雑になるため、このページでは採用しません。; 　レスポンシブデザインへの対応は「アスペクト比維持型」でも「高さ維持型」でも使用できます。スタイルシートの表示部分を設定してください。; 　操作ボタンはスライドショー右上に半透明に表示されています。モバイルではタップ、パソコンではマウスを重ねると不透明になり可視化されます。; 　スライドショーの切り替えアニメーションはです。多種類のアニメーション名が・で区切られて記述してある場合は、切り替えるたびにアニメーションがランダムに選択されます。スライドショーの機能はこのままでアニメーションの組み合わせだけを変更したい場合は、このページ最下部「別のアニメーションの組み合わせを作る」をご参照ください。当サイトで提供している全アニメーションから複数の組み合わせを選択し、その見本とソースコードを表示できます。; 　題名の[～]の意味はコンテンツの題名のブラケット（角括弧[]）についてを参照してください。; 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。

アスペクト比維持型
	⇔
高さ維持型
	⇔

・　ソースコード: 　以下のソースコードは、スライドショーだけを表示する独立したページ全体のものです。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。スライドショーを他のページに張り付けて使うときは、ソース内の説明に従い、スタイル部分をHEADに、スライドショー本体部分を貼り付ける位置に、スクリプトをBODY内の最下部（スライドショー本体よりも下ならば可）にコピーしてください。; 　見本の画像は、パソコンでの編集では表示されますが、Web上にアップすると表示されないものもあります。必ずご自身の画像に書き換えてください。

・　別のアニメーションの組み合わせを作る: 下の「アニメーションの文字列」を参照し、ご希望のアニメーションの組み合わせ（一つでも可）文字列を作り、下の枠内に記述し、「この組み合わせで作る」ボタンをクリックしてください。その際、一つの時はアニメーション文字列のみ、複数の時はアニメーション文字列を半角文字の「&」で結合しで記述してください。
例えば、
縦横入れ替わり・縦横3D入れ替わり・縦横転がりの３個ならば「d_ire_xy&d_ire3D_xy&d_koro_xy」となります。
brightness・blur・ランダムclip-polygon・ランダムclip-circleの４個ならば「brightness&blur&polygon&circle」となります。
3D横ズーム入れ替わり・3D縦ズーム入れ替わりの２個ならば「ire3D_x&ire3D_y」となります。
ランダム透かし移動インアウトの１個だけならば「r_su_in_out」となります。
なお、何も書かずにクリックすると、枠内に薄い文字で表示されている組み合わせが作られます。
文字列の途中で改行したり空白や無関係の文字を入れたりすると、動かないスライドショーが作られます。
アニメーションの数に制限はありませんが、多くなると煩雑になるため３～５個程度が無難だと思います。

・　アニメーションの文字列（表記形式は、アニメーション名 ⇒ 文字列）: ★　以下はドラッグ・フリック・マウスホイールにアニメーションの縦横方向が連動します。; 縦型と横型が合体したアニメーション。
｜　縦横連動ランダムズーム3D回転1 ⇒ d_r_z3D_xy　｜　縦横連動ランダムズーム3D回転2 ⇒ d_r_3D_xy　｜　縦横スクロール ⇒ d_sc_xy　｜　縦横透かしスクロール ⇒ d_susc_xy　｜　縦横視差スクロール ⇒ d_shisa_xy　｜　縦横透かし視差スクロール ⇒ d_sushisa_xy　｜　縦横入れ替わり ⇒ d_ire_xy　｜　縦横転がり ⇒ d_koro_xy　｜　縦横3D回転 ⇒ d_rot_xy　｜　縦横3D裏返し ⇒ d_ura3D_xy　｜　縦横3D入れ替わり ⇒ d_ire3D_xy　｜　縦横3D逆入れ替わり ⇒ d_rei3D_xy　｜　縦横CUBE回転 ⇒ d_cube_xy　｜　縦横コーナー回転 ⇒ d_corner_xy　｜　縦横CUBE枠内回転 ⇒ d_becu_xy　｜　; 縦型と横型が合体した4画像アニメーション。4画像に対応したスライドショーのみで使用可。
｜　縦横インアウトバックカルーセル ⇒ d4_ca_inoutback_xy　｜　縦横透かしインアウトバックカルーセル ⇒ d4_suca_inoutback_xy　｜　ズーム縦横インアウトバックCUBE回転 ⇒ d4_zcube_inoutback_xy　｜　ズーム縦横インアウトバックCORNER回転 ⇒ d4_zcorner_inoutback_xy　｜　ズーム縦横インアウトバック3Dスクロール ⇒ d4_zsc3D_inoutback_xy　｜　ズーム縦横インアウトバック転がり ⇒ d4_koro_inoutback_xy　｜　ズーム縦横インアウトバック3D回転 ⇒ d4_z3Drot_inoutback_xy　｜　; ★　以下はドラッグ・フリック・マウスホイールにアニメーションの縦横方向が連動しません。; 方向性がないタイプで、前進でも後退でも変わらないもの。
｜　透かし ⇒ su　｜　フェード ⇒ fade　｜　落下 ⇒ rakka　｜　ブライトネス ⇒ brightness　｜　ブラー ⇒ blur　｜　ランダムクリップポリゴン ⇒ polygon　｜　ランダムクリップサークル ⇒ circle　｜　起き上がり ⇒ rise　｜　ショットズーム回転 ⇒ shot_zoom　｜　フラッシュ ⇒ flash　｜　ランダムワイプ ⇒ wipe　｜　; 方向性があるタイプで、前進と後退でアニメーションの方向が変わるもの。
｜　アップダウン ⇒ ud　｜　ダウンアップ ⇒ du　｜　ダウンジャンプ ⇒ dj　｜　ランダムアップダウン ⇒ uddu　｜　Z方向スクロール ⇒ z_sc　｜　せり出し ⇒ seri　｜　横転がり ⇒ koro_x　｜　縦転がり ⇒ koro_y　｜　横入れ替わり ⇒ ire_x　｜　縦入れ替わり ⇒ ire_y　｜　スクロール横 ⇒ sc_x　｜　スクロール縦 ⇒ sc_y　｜　透かしスクロール横 ⇒ susc_x　｜　透かしスクロール縦 ⇒ susc_y　｜　視差スクロール横 ⇒ shisa_x　｜　視差スクロール縦 ⇒ shisa_y　｜　視差透かしスクロール横 ⇒ sushisa_x　｜　視差透かしスクロール縦 ⇒ sushisa_y　｜　ランダム回転移動インアウト ⇒ in_out　｜　; 方向性があるタイプで、前進と後退で3Dアニメーションの方向が変わるもの。
｜　横3D回転 ⇒ rot_x　｜　縦3D回転 ⇒ rot_y　｜　CUBE横ズーム回転 ⇒ cube_x　｜　CUBE縦ズーム回転 ⇒ cube_y　｜　3D横ズーム入れ替わり ⇒ ire3D_x　｜　3D縦ズーム入れ替わり ⇒ ire3D_y　｜　3D横ズーム逆入れ替わり ⇒ rei3D_x　｜　3D縦ズーム逆入れ替わり ⇒ rei3D_y　｜　3D横ズーム裏返し ⇒ ura3D_x　｜　3D縦ズーム裏返し ⇒ ura3D_y　｜　3D横ズームスクロール ⇒ sc3D_x　｜　3D縦ズームスクロール ⇒ sc3D_y　｜　CUBE枠内横回転 ⇒ becu_x　｜　CUBE枠内縦回転 ⇒ becu_y　｜　ドア横回転 ⇒ door_x　｜　ドア縦回転 ⇒ door_y　｜　縦スウィング ⇒ swing_y　｜　縦ズームスウィング ⇒ z_swing_y　｜　; 方向性があるタイプで、前進と後退に関係なく3Dアニメーションの方向がランダムに変わり、縦方向と横方向もランダムに変わるもの。
｜　縦横前後ランダムズーム3D回転1 ⇒ r_xynp_z3D1　｜　縦横前後ランダムズーム3D回転2 ⇒ r_xynp_z3D2　｜　; 方向性があるタイプで、前進と後退で3Dアニメーションの方向が変わるが、縦方向と横方向がランダムに変わるもの。
｜　ランダム3D縦横ズーム裏返し ⇒ r_ura3D_xy　｜　ランダムタイミング3Dズーム裏返し ⇒ r_ura3D_ttf　｜　ランダム3D縦横ズーム入れ替わり ⇒ r_ire3D_xy　｜　ランダム3D縦横ズーム逆入れ替わり ⇒ r_rei3D_xy　｜　ランダム縦横ズームCUBE回転 ⇒ r_cube_xy　｜　ランダム縦横ズームコーナー回転 ⇒ r_corner_xy　｜　ランダム縦横ズーム3D回転1 ⇒ r_z3D_xy　｜　ランダム縦横ズーム3D回転2 ⇒ r_3D　｜　; 方向性があるタイプで、前進と後退でページめくりアニメーションの方向が変わるもの。
｜　射光型3D横ズームページめくり ⇒ page0　｜　射光型3D縦ズームページめくり ⇒ page05　｜　全回転型3D横ズームページめくり ⇒ page1　｜　全回転型3D縦ズームページめくり ⇒ page15　｜　2D摘みページめくり ⇒ page2　｜　2Dずらしページめくり ⇒ page3　｜　; 前進でも後退でもアニメーションの方向がランダムなもの。
｜　ランダム縦横スクロール ⇒ sc_xy　｜　ランダム方向移動 ⇒ sc_r　｜　ランダム方向視差移動 ⇒ shisa_r　｜　ランダムズーム ⇒ z　｜　円ワイプ ⇒ wipe_en　｜　ランダム回転入れ替わり ⇒ rot_ire　｜　ランダムタイミング移動 ⇒ sc_r_ttf　｜　ダウンアップジャンプ ⇒ duj　｜　ランダム透かし移動インアウト ⇒ r_su_in_out　｜　ランダム2D回転 ⇒ r_rot_2d　｜　; 前進・後退に関係なくアニメーションの方向が交互になるもの。シャトル型。
｜　左右シャトル型スクロール ⇒ s_sc_x　｜　上下シャトル型スクロール ⇒ s_sc_y　｜　左右シャトル型透かしスクロール ⇒ s_susc_x　｜　上下シャトル型透かしスクロール ⇒ s_susc_y　｜　左右シャトル型視差移動 ⇒ s_shisa_x　｜　上下シャトル型視差移動 ⇒ s_shisa_y　｜　左右シャトル型透かし視差移動 ⇒ s_sushisa_x　｜　上下シャトル型透かし視差移動 ⇒ s_sushisa_y　｜　左右シャトル型転がり ⇒ s_koro_x　｜　上下シャトル型転がり ⇒ s_koro_y　｜　前後シャトル型zスクロール ⇒ s_z_sc　｜　前後シャトル型せり出し ⇒ s_seri　｜　; 前進・後退に関係なく3Dアニメーションの方向が交互になるもの。シャトル型。
｜　左右シャトル型枠内CUBE回転 ⇒ s_becu_x　｜　上下シャトル型枠内CUBE回転 ⇒ s_becu_y　｜　左右シャトル型ズームCUBE回転 ⇒ s_cube_x　｜　上下シャトル型ズームCUBE回転 ⇒ s_cube_y　｜　左右シャトル型3D入れ替わり ⇒ s_ire3D_x　｜　上下シャトル型3D入れ替わり ⇒ s_ire3D_y　｜　左右シャトル型3D逆入れ替わり ⇒ s_rei3D_x　｜　上下シャトル型3D逆入れ替わり ⇒ s_rei3D_y　｜　左右シャトル型3D裏返し ⇒ s_ura3D_x　｜　上下シャトル型3D裏返し ⇒ s_ura3D_y　｜　左右シャトル型ドア回転 ⇒ s_door_x　｜　上下シャトル型ドア回転 ⇒ s_door_y　｜　; アニメーションにrequestAnimationFrameメソッドを使用したもの。
｜　rAF型びろ～ん ⇒ rAF_OutZ　｜　rAF型弾性移動 ⇒ rAF_FeIdo　｜　rAF型弾性二段階ズーム ⇒ rAF_Rm2StZ　｜　rAF型ランダム弾性移動 ⇒ rAF_RmReIdo　｜　rAF型弾性ズーム ⇒ rAF_RmZ　｜　rAF型バウンスズーム ⇒ rAF_BoZ　｜　rAF型ランダム回転ズーム ⇒ rAF_RZrot　｜