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

・　見本: 　見本は「カスタマイズ」で自動開始と[アクティブ]と[シャッフル]と[DrFlMw縦横連動]と[実行時ランダム]機能をONに設定してあります（[～]の意味はコンテンツの題名のブラケット（角括弧[]）についてを参照）。

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

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

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

/** 個々のデータ。 **/
.FR_n9hgubtsg_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:#ccc;border:20px solid #ccc;}

/** サムネイル一覧。 **/
.FR_n9hgubtsg_dfw_zdwp_os .gal_waku{position:relative;top:0px;left:0px;width:100%;z-index:10;margin:auto;background-color:#000;padding-bottom:4px;box-sizing:border-box;}
.FR_n9hgubtsg_dfw_zdwp_os .gal_base{position:relative;top:0px;left:0px;z-index:20;margin:auto;box-sizing:border-box;}

/** サムネイル。[S]では個々の表示枠のアスペクト比をpadding-top:～で設定。～の値はサムネイル幅とスライドショー幅との比率をパーセント単位で。[F][BLOCK]は「カスタマイズ」で設定。 **/
.FR_n9hgubtsg_dfw_zdwp_os .gal_base .thumb{position:absolute;top:0px;left:0px;width:100%;cursor:pointer;transition-duration:.5s;background:center center no-repeat;background-size:contain;transform:scale(0.9);border:2px solid #666;background-color:#222;}
.FR_n9hgubtsg_dfw_zdwp_os .gal_base .thumb:hover{border:2px solid #fff;}

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

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

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

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

/** 三角矢印。 **/
.FR_n9hgubtsg_dfw_zdwp_os .sankaku{position:absolute;bottom:-8px;left:0px;z-index:30;width:100%;text-align:center;color:#fff;font-size:16px;}

</style>

</div>

u={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,t,i,r){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>r?(o=!1,i()):e-f<-r&&(o=!1,t()),(e-f>10||e-f<-10)&&n.addEventListener("click",u.SDA,!1))},!1);n.addEventListener("mouseup",function(){((e-f>10||e-f<-10)&&setTimeout(function(){n.removeEventListener("click",u.SDA,!1)},100),o)&&(o=!1)},!1)},YD:function(n,t,i,r){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&&(u.SDA(s),e=document.all?event.y:s.pageY,e-f>r?(o=!1,i()):e-f<-r&&(o=!1,t()),(e-f>10||e-f<-10)&&n.addEventListener("click",u.SDA,!1))},!1);n.addEventListener("mouseup",function(){((e-f>10||e-f<-10)&&setTimeout(function(){n.removeEventListener("click",u.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)}},c=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):"")},f=[],o="",s="",h=ban?"a":"div",l=lp-fp+1,r=n.querySelector(".base"),i=n.querySelector(".gal_waku"),t=i?i.querySelector(".gal_base"):"",e;window.addEventListener("load",function(){for(var u=0;u<l;u++)f[u]=new Image,f[u].src=pp+(u+fp)+".jpg",o+="<"+h+' class="koboData" href="'+f[u].src+'" target="_blank" style="background-image:url(\''+f[u].src+"')\"><\/"+h+">",s+='<div class="thumb" title="'+(u+fp)+'.jpg" style="background-image:url(\''+f[u].src+"')\"><\/div>";r.innerHTML=o;i&&t&&(t.innerHTML=s);sf?c(n,"base","gal_base","koboData","thumb",function(){e(n)}):e(n)});e=function(n){var at=function(n,t){var i=t.innerHTML;n.innerHTML=i+i},kt=function(n,t,i,r){t.style.transitionDuration=r+"ms";t.style.left=-i.offsetLeft/n.offsetWidth*100+"%";setTimeout(function(){t.style.transitionDuration="0ms"},r+50)},dt=function(n,t,i){for(var r=0;r<t;r++)n[r].style.left=i*r+"%"},gt=function(n,t,i,r){i.style.transitionProperty="left";i.style.left=-r.offsetLeft/t.offsetWidth*100+"%"},ni=function(n,t,i,r,u,f){return u<f/4&&(u+=f/2,t.style.left=-1*i[r+f/2].offsetLeft/n.offsetWidth*100+"%"),u>f*3/4&&(u-=f/2,t.style.left=-1*i[r-f/2].offsetLeft/n.offsetWidth*100+"%"),u},h;at(r,r);i&&t&&at(t,t);var et=n.querySelector(".but_sl"),vt=n.querySelector(".mae"),yt=n.querySelector(".tugi"),tt=n.querySelector(".ya_che"),it=n.querySelector(".ke_che"),rt="contain",ot=n.querySelector(".bs_bu"),d=n.querySelector(".guide"),w,st="",v=r.querySelectorAll(".koboData"),a=i&&t?t.querySelectorAll(".thumb"):"",e=v.length,g,f=e/2,nt=0,p=0,l=0,o=1,ht=!1,ct=!1,b=!1,ut=Copyright,lt=HomePage,pt=MailAddress,ii=ContentType,k={iy:e,ya:da,ke:ds},c=document.createElement("a"),s=function(n,r){ht||(ht=!0,o=n>f?1:-1,ct&&slr&&(o=Math.floor(Math.random()*2)*2-1),nt=f,f=i&&t?ni(i,t,a,f,n,e):n,f+=k[lt.substr(9,2)],f%=k[pt.substr(1,2)],p=nt-o,l=f+o,ft(),document.querySelector(".c_"+ut).href.substr(9,2)===ut.substr(1,2)&&setTimeout(function(){ti(r)},100))},ft=function(){p+=e;p%=e;l+=e;l%=e;p===f&&(p=p-o,ft());l===nt&&(l=l+o,ft());p===l&&(l=l-o*2,ft())},ti=function(u){clearTimeout(g);var s=Math.floor(Math.random()*(Object.keys(ani).length-2));ani[bt[s]](n,r,da,v[f],v[nt],o,u,v[p],v[l]);ct=!1;i&&t&&kt(i,t,a[f],da);d&&(w[nt%(e/2)].style.backgroundColor=gudef,w[f%(e/2)].style.backgroundColor=gusel);setTimeout(function(){y&&!b&&wt();ht=!1},k[pt.substr(2,2)]+100)},wt=function(){clearTimeout(g);g=setTimeout(function(){slr&&(ct=!0);s(f+1)},k[lt.substr(12,2)])},bt=Object.keys(ani);if(bt.splice(0,2),n.mp=document.createElement("div"),r.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",i&&t)for(typeof asp!="undefined"&&typeof thw!="undefined"&&(t.style.width=thw/(asp/100)+"%",t.style.paddingTop=thw+"%"),h=0;h<e;h++)typeof asp!="undefined"&&typeof thw!="undefined"&&(a[h].style.paddingTop=asp+"%"),a[h].ind=h,a[h].onclick=function(){this.ind!=f&&s(this.ind)};if(d){for(h=0;h<e/2;h++)st=st+'<div style="color:'+guc+';">'+(h+1)+"<\/div>";for(d.innerHTML=st,w=d.querySelectorAll("div"),h=0;h<e/2;h++)w[h].style.backgroundColor=gudef,w[h].ind=h,w[h].onclick=function(){this.ind!=f&&(this.ind<e/4?(i&&t&&f>=e/4&&f<e/2-3&&(t.style.left=-1*a[f+e/2].offsetLeft/i.offsetWidth*100+"%"),s(this.ind+e/2)):(i&&t&&f>=e/2+3&&(t.style.left=-1*a[f-e/2].offsetLeft/i.offsetWidth*100+"%"),s(this.ind)))}}vt&&(vt.onclick=function(){s(f-1,"x")});yt&&(yt.onclick=function(){s(f+1,"x")});et&&(et.innerHTML=y?pause:play,et.onclick=function(){y?(clearTimeout(g),y=!1,this.innerHTML=play):(y=!0,this.innerHTML=pause,s(f+1))});dfw&&(u.XF(r,function(){o=1;s(f+1,"x")},function(){o=-1;s(f-1,"x")},50),u.XD(r,function(){o=1;s(f+1,"x")},function(){o=-1;s(f-1,"x")},50),u.YF(r,function(){o=1;s(f+1,"y")},function(){o=-1;s(f-1,"y")},50),u.YD(r,function(){o=1;s(f+1,"y")},function(){o=-1;s(f-1,"y")},50),u.MW(r,function(){o=1;s(f+1,"y")},function(){o=-1;s(f-1,"y")}));i&&t&&(dt(a,e,100),gt(r,i,t,a[f]));d&&(w[0].style.backgroundColor=gusel);v[f].style.zIndex=2;v[f].style.opacity=1;n.appendChild(c);c.setAttribute("href",lt);c.setAttribute("class","c_"+ut);c.setAttribute("target","_blank");c.innerHTML="(C) "+ut;c.style.position="absolute";c.style.bottom="3px";c.style.right="5px";c.style.zIndex=9999;c.style.textAlign="center";c.style.display="none";c.style.fontSize="10px";c.style.color="#fff";c.style.textDecoration="none";c.style.fontFamily="Meiryo UI";c.style.textShadow="1px 1px 0px #000,0px 3px 6px #000";fb&&(window.addEventListener("blur",function(){y&&!b&&(b=!0,clearTimeout(g))},!1),window.addEventListener("focus",function(){y&&b&&(b=!1,s(f+1))},!1));ot&&(ot.innerHTML=rt==="cover"?"contain":"cover",ot.onclick=function(){this.innerHTML==="cover"?(this.innerHTML="contain",rt="cover"):(this.innerHTML="cover",rt="contain");for(var n=0;n<e;n++)v[n].style.backgroundSize=rt});it&&(it.onchange=function(){ds=it[this.selectedIndex].value-0;k.ke=it[this.selectedIndex].value-0});tt&&(tt.onchange=function(){da=tt[this.selectedIndex].value-0;k.ya=tt[this.selectedIndex].value-0});y&&!b&&wt()}}(document.getElementById("

・　説明: 　ファイル名が連番数字でサイズやアスペクト比が異なる画像を使うスライドショーギャラリーです。もちろん同じサイズや同じアスペクト比の画像だけでも使えます。連番の最初の数字は何番でも構いません。「カスタマイズ」で最初と最後の数字と写真へのパスを設定してください。; 　このスライドショーは、img要素の画像ではなくdiv要素の背景画像を使う事で、異なる形状の画像を一定の枠内に表示していますが、「カスタマイズ」で画像番号やパスを指定しておけば自動的に作成されます。画像をクリックしたときに別タブに画像だけを表示したいときは「カスタマイズ」で　ban = true　に設定してください。; 　サムネイルもクラス名gal_wakuのdiv要素の中にクラス名gal_baseのdiv要素を入れたものを書いておけば、img要素ではなくdiv要素の背景として自動的に作成されます。サムネイルが不要な時は削除してください。; 　レスポンシブデザインへの対応は「アスペクト比維持型」でも「高さ維持型」でも使用できます。スタイルシートの表示部分を設定してください。; 　操作ボタンはスライドショー右上に半透明に表示されています。モバイルではタップ、パソコンではマウスを重ねると不透明になり可視化されます。; 　ガイドボタンはクラス名guideのdiv要素を作っておけばスクリプトが自動的に設置します。ガイドボタンが不要な時は削除してください。; 　スライドショーの切り替えアニメーションはです。多種類のアニメーション名が・で区切られて記述してある場合は、切り替えるたびにアニメーションがランダムに選択されます。スライドショーの機能はこのままでアニメーションの組み合わせだけを変更したい場合は、このページ最下部「別のアニメーションの組み合わせを作る」をご参照ください。当サイトで提供している全アニメーションから複数の組み合わせを選択し、その見本とソースコードを表示できます。; 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。; 　このページでは、実際の地球の写真を加工したものや生成AIのGeminiで作った地球の画像と私が撮影した写真を合成したものを使っています。

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

・　ソースコード: 　以下のソースコードは、スライドショーだけを表示する独立したページ全体のものです。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「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　｜