[オープン][F][バナー][レスポンシブ][アクティブ][シャッフル][ガイド][実行時ランダム][4画像][多種類][DrFlMw縦横連動][divサムネイル][セレクト][viewボタン][部品削除可]スライドショーギャラリーFHD_nhgubtsg_dfw_zdwp

・　見本: 　見本は「カスタマイズ」で自動開始とアクティブとシャッフルとドラッグ・フリック・マウスホイールとスライド時に進行方向をランダムにする機能をONに設定してあります。使用している画像は生成AIのGeminiで作ったものです。

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

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

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

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

/** サムネイル一覧とサムネイル。 **/
.FHD_nhgubtsg_dfw_zdwp_os .gal{position:relative;top:0px;left:0px;z-index:20;width:100%;display:flex;margin:auto;padding:5px;background-color:#000;box-sizing:border-box;}
.FHD_nhgubtsg_dfw_zdwp_os .gal .thumb{cursor:pointer;transition-duration:.5s;background:center center no-repeat;background-size:contain;transform:scale(0.9);border:1px solid #999;background-color:#222;}
.FHD_nhgubtsg_dfw_zdwp_os .gal .thumb:hover{border:1px solid #fff;}

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

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

/** ボタンの外枠。 **/
.FHD_nhgubtsg_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;}
.FHD_nhgubtsg_dfw_zdwp_os .con:hover{opacity:1;}

/** ガイド。 **/
.FHD_nhgubtsg_dfw_zdwp_os .guide{position:relative;top:0px;left:0px;z-index:20;width:100%;background-color:#444;box-sizing:border-box;padding:5px 0px;}
.FHD_nhgubtsg_dfw_zdwp_os .guide div{position:relative;top:0px;left:0px;display:inline-block;height:18px;width:18px;font-size:12px;cursor:pointer;border-radius:50%;margin:0px 2px;transition-duration:.5s;}
.FHD_nhgubtsg_dfw_zdwp_os .guide div:hover{transform:rotate(360deg);}

</style>

</div>

</div>

<div class="con">
<button class="mae" title="前の画像"><</button>
<button class="but_sl" title="スライドショーの開始と停止">pause</button>
<button class="bs_bu" title="表示方法の変更">cover</button>
<button class="view" title="画像を別タブに表示">view</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=function(n){n.preventDefault?n.preventDefault():n.returnValue=!1},r=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)},u=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)},f=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,!1))},!1);n.addEventListener("mouseup",function(){((e-f>10||e-f<-10)&&setTimeout(function(){n.removeEventListener("click",t,!1)},100),o)&&(o=!1)},!1)},e=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(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,!1))},!1);n.addEventListener("mouseup",function(){((e-f>10||e-f<-10)&&setTimeout(function(){n.removeEventListener("click",t,!1)},100),o)&&(o=!1)},!1)},o=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)},s=function(n,t,i,r,u,f){for(var o,l="."+r,a="."+u,s=n.querySelector("."+t),e=n.querySelector("."+i),h=s.querySelectorAll(l),v=e?e.querySelectorAll(a):"",c=h.length;c;)o=Math.floor(Math.random()*c--),s.appendChild(h[o]),e&&e.appendChild(v[o]),c==0?f():(h=s.querySelectorAll(l),v=e?e.querySelectorAll(a):"")},i=function(n){var v=n.querySelector(".base"),lt=n.querySelector(".but_sl"),wt=n.querySelector(".mae"),bt=n.querySelector(".tugi"),et=n.querySelector(".view"),it=n.querySelector(".gal"),ot=n.querySelector(".ya_che"),st=n.querySelector(".ke_che"),d="contain",ht=n.querySelector(".bs_bu"),rt=n.querySelector(".guide"),at="",b,c=v.querySelectorAll(".koboData"),k=it?it.querySelectorAll(".thumb"):"",l=c.length,ut,t=0,g=0,p=0,a=0,s=1,vt=!1,yt=!1,nt=!1,ft=Copyright,pt=HomePage,kt=MailAddress,ti=ContentType,tt={iy:l,ya:da,ke:ds},w=document.createElement("a"),h=function(n,i){vt||(vt=!0,s=n>t?1:-1,yt&&slr&&(s=Math.floor(Math.random()*2)*2-1),g=t,t=n,t+=tt[pt.substr(9,2)],t%=tt[kt.substr(1,2)],p=g-s,a=t+s,ct(),document.querySelector(".c_"+ft).href.substr(9,2)===ft.substr(1,2)&&setTimeout(function(){ii(i)},50))},ct=function(){p+=l;p%=l;a+=l;a%=l;p===t&&(p=p-s,ct());a===g&&(a=a+s,ct());p===a&&(a=a-s*2,ct())},dt=function(n){et&&(et.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,""))}})},ii=function(i){clearTimeout(ut);var r=Math.floor(Math.random()*(Object.keys(ani).length-2));ani[ni[r]](n,v,da,c[t],c[g],s,i,c[p],c[a]);yt=!1;it&&(k[g].style.opacity=1,k[t].style.opacity=gop);rt&&(b[g].style.backgroundColor=gudef,b[t].style.backgroundColor=gusel);et&&dt(c[t]);setTimeout(function(){y&&!nt&&xx();vt=!1},tt[kt.substr(2,2)]+100)},xx=function(){clearTimeout(ut);ut=setTimeout(function(){slr&&(yt=!0);h(t+1)},tt[pt.substr(12,2)])},ni=Object.keys(ani),i;if(ni.splice(0,2),n.mp=document.createElement("div"),v.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",it)for(i=0;i<l;i++)k[i].style.width=100/l+"%",k[i].style.paddingTop=asp/l+"%",k[i].ind=i,k[i].onclick=function(){this.ind!=t&&h(this.ind)};if(rt){for(i=0;i<l;i++)at=at+'<div style="color:'+guc+';">'+(i+1)+"<\/div>";for(rt.innerHTML=at,b=rt.querySelectorAll("div"),i=0;i<l;i++)b[i].style.backgroundColor=gudef,b[i].ind=i,b[i].onclick=function(){this.ind!=t&&h(this.ind)}}wt&&(wt.onclick=function(){h(t-1,"x")});bt&&(bt.onclick=function(){h(t+1,"x")});lt&&(lt.innerHTML=y?pause:play,lt.onclick=function(){y?(clearTimeout(ut),y=!1,this.innerHTML=play):(y=!0,this.innerHTML=pause,h(t+1))});dfw&&(r(v,function(){s=1;h(t+1,"x")},function(){s=-1;h(t-1,"x")},50),f(v,function(){s=1;h(t+1,"x")},function(){s=-1;h(t-1,"x")},50),u(v,function(){s=1;h(t+1,"y")},function(){s=-1;h(t-1,"y")},50),e(v,function(){s=1;h(t+1,"y")},function(){s=-1;h(t-1,"y")},50),o(v,function(){s=1;h(t+1,"y")},function(){s=-1;h(t-1,"y")}));it&&(k[t].style.opacity=gop);rt&&(b[t].style.backgroundColor=gusel);et&&dt(c[t]);c[t].style.zIndex=2;c[t].style.opacity=1;window.addEventListener("load",function(){document.querySelector(".c_"+ft)||(document.body.appendChild(w),w.setAttribute("href",pt),w.setAttribute("class","c_"+ft),w.innerHTML=ti+" (C) "+ft,w.style.display="none",w.style.fontSize="12px",w.style.width="250px",w.style.margin="1ex auto");fb&&(window.addEventListener("blur",function(){y&&!nt&&(nt=!0,clearTimeout(ut))},!1),window.addEventListener("focus",function(){y&&nt&&(nt=!1,h(t+1))},!1));ht&&(ht.innerHTML=d==="cover"?"contain":"cover",ht.onclick=function(){var n,t;for(this.innerHTML==="cover"?(this.innerHTML="contain",d="cover"):(this.innerHTML="cover",d="contain"),n=0;n<l;n++)c[n].src?c[n].style.objectFit=d:(t=c[n].currentStyle||window.getComputedStyle(c[n],!1),c[n].querySelector("img")?c[n].querySelector("img").style.objectFit=d:t.backgroundImage&&(c[n].style.backgroundSize=d))});st&&(st.onchange=function(){ds=st[this.selectedIndex].value-0;tt.ke=st[this.selectedIndex].value-0});ot&&(ot.onchange=function(){da=ot[this.selectedIndex].value-0;tt.ya=ot[this.selectedIndex].value-0});y&&!nt&&xx()})};sf?s(n,"base","gal","koboData","thumb",function(){i(n)}):i(n)}(document.getElementById("

・　説明: 　サイズやアスペクト比が異なる画像を表示する事ができるスライドショーギャラリーです。 img要素の画像ではなく、div要素の背景画像を使う事で、異なる形状の画像を一定の枠内に表示しています。バナーにするときはdiv要素ではなくa要素を使い、href属性に開くページのurlを書いてください。要するにこのスライドショーは、厳密にいうと、IMGスライドショーではなくBLOCKスライドショーです。また逆に、「BLOCKスライドショーは異なる形状の画像のスライドショーとして使用できる」とも言えます。スタイルbackground-size:cover;で画面いっぱいに表示し、あたかも画像のスライドショーの様にする事もできます。また、background-size:contain;にすれば、形の違う画像を一定の枠内に表示できます。スライドショーデータは、「ここからスライドショーのデータ。↓」以下のクラス名koboDataのdiv要素（a要素）で、表示する画像を背景に設定してください。; 　レスポンシブデザインへの対応は「アスペクト比維持型」でも「高さ維持型」でも使用できます。この見本は「高さ維持型」です。スタイルシートの表示部分で変更可能です。; 　操作ボタンはスライドショーの右上に半透明で表示されています。 viewボタンはクリックで画像が別タブに表示されます。モバイルではタップ、パソコンではマウスを重ねると不透明になります。; 　スライドショーの切り替えアニメーションはです。多種類のアニメーション名が・で区切られて記述してある場合は、切り替えるたびにアニメーションがランダムに選択されます。スライドショーの機能はこのままでアニメーションの組み合わせだけを変更したい場合は、このページ最下部「別のアニメーションの組み合わせを作る」をご参照ください。当サイトで提供している全アニメーションから複数の組み合わせを選択し、その見本とソースコードを表示できます。; 　題名の[～]の意味はコンテンツの題名のブラケット（角括弧[]）についてを参照してください。; 　サムネイルギャラリーは、全サムネイルをスライドショー幅いっぱい横一列に表示します。即ち、画像の数が少なければサムネイルは大きくなり、画像の数が多くなるほどサムネイルは小さくなります。デザインを壊さない程度の数を使用してください。; 　このページは文字コード「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　｜