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

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　ファイル名が連番数字でサイズやアスペクト比が異なる画像を使うスライドショーです。連番のファイル名とは、0.jpg・1.jpg・2.jpg～や 12.jpg・13.jpg・14.jpg～などの、連続する正の整数値として成り立つ数字をファイル名にした画像群です。例えばファイル名が 700.jpg の画像は使えますが 007.jpg は使えません。もちろん 2022_10.jpg や Y1953.jpg などの様に文字が入ったファイル名も使えません。連番の最初の数字は何番でも構いません。「書き換える部分」で最初と最後の数字と画像へのパスを設定してください。; 　レスポンシブデザインへの対応は、このページでは「アスペクト比維持型」にしていますが「高さ維持型」にする事もできます。 img要素の画像ではなく、BLOCK要素の背景画像を使う事で、異なる形状の画像を一定の枠内に表示しています。; 　スライドショーの画像表示部分をクリックすると別のタブに画像だけが表示されます。この機能は「カスタマイズ」で有無を選択できます。; 　スライドショーの切り替えアニメーションはです。多種類のアニメーション名が・で区切られて記述してある場合は、切り替えるたびにアニメーションがランダムに選択されます。スライドショーの機能はこのままでアニメーションの組み合わせだけを変更したい場合は、このページ最下部「別のアニメーションの組み合わせを作る」をご参照ください。当サイトで提供している全アニメーションから複数の組み合わせを選択し、その見本とソースコードを表示できます。; 　ドラッグ（パソコン）やフリック（スマホやタブレット）でも操作でき、縦横連動型のアニメーションでは縦横それぞれの操作でアニメーション方向も連動します。即ちアニメーションは、モバイルでは縦フリックと横フリック操作でフリックした方向に動作し、パソコンでは縦ドラッグと横ドラッグでドラッグした方向に動作します。マウスが使える環境ではマウスホイールでも操作でき、アニメーションは縦方向に動作します。ドラッグ・フリック・マウスホイール操作は「カスタマイズ」で機能の有無を選択できます。; 　操作ボタンは3個でスライドショーの右上部に半透明に表示されています。モバイルではボタンをタップ、パソコンではスライドショーにマウスを重ねると不透明になり可視化されます。; 　ガイドボタンで操作する事もできます。ガイドボタンはクラス名guideのdiv要素を作っておけばスクリプトが自動的に設置します。不要な場合はクラス名guideのdiv要素を削除してください。; 　このスライドショーは、「カスタマイズ」でスライドショー実行時のアニメーションの進行方向をランダムに設定できます。当サイトのランダム型アニメーションのスライドショー以外は、通常型スライドショーの実行時のアニメーションの進行方向は右→左または下→上に、シャトル型は右→左と左→右・下→上と上→下の繰り返しにしてあります。即ち、次ボタンを押した時と同じ動作です。このスライドショーはランダム型アニメーション以外でも進行方向をランダムにできます。使用するアニメーションによって使い分けてください。; 　このスライドショーは、スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択を外す・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。この機能は「カスタマイズ」でON／OFFを設定できます。; 　このスライドショーは、連番をページを開いた時点でシャッフルする事ができます。即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。「連番の順に実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。; 　サムネイルは同じ連番の画像を使って自動的に作成されます。サムネイルギャラリーは、現在選択されているデータのサムネイルが画面の中央に自動的にスクロールするカルーセル型です。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。

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

・　ガイド付きdivサムネイルカルーセル連動DrFlMw縦横連動スライドショーギャラリー: 　カスタマイズで自動スタートとアクティブとドラッグ・フリック・マウスホイールとクリックで別タブに画像表示機能はON、シャッフル機能はOFFにしてあります。

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

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

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

/** 個々のデータ。 **/
.cpFR_n9hgubtcasg_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;}

/** サムネイル。 **/
.cpFR_n9hgubtcasg_dfw_zdwp_os .gal_waku{position:relative;top:0px;left:0px;width:100%;z-index:10;margin:auto;background-color:#110;padding-bottom:4px;box-sizing:border-box;}
.cpFR_n9hgubtcasg_dfw_zdwp_os .gal_base{position:relative;top:0px;left:0px;z-index:20;margin:auto;box-sizing:border-box;}
.cpFR_n9hgubtcasg_dfw_zdwp_os .gal_base .thumb{position:absolute;top:0px;left:0px;width:100%;cursor:pointer;transition-duration:.5s;background-repeat:no-repeat;background-position:center center;background-size:contain;transform:scale(0.9);border:2px solid #aaa;background-color:#433;}
.cpFR_n9hgubtcasg_dfw_zdwp_os .gal_base .thumb:hover{border:2px solid #fff;}

/** ボタン。 **/
.cpFR_n9hgubtcasg_dfw_zdwp_os .mae, .cpFR_n9hgubtcasg_dfw_zdwp_os .tugi{width:30px;height:30px;border-radius:50%;cursor:pointer;border:0;}
.cpFR_n9hgubtcasg_dfw_zdwp_os .but_sl{width:60px;height:30px;border-radius:10px;cursor:pointer;border:0;}

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

/** ガイド。 **/
.cpFR_n9hgubtcasg_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;}
.cpFR_n9hgubtcasg_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;}
.cpFR_n9hgubtcasg_dfw_zdwp_os .guide div:hover{transform:rotate(360deg);}

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

</style>

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 e,l="."+r,a="."+u,o=n.querySelector("."+t),s=n.querySelector("."+i),h=o.querySelectorAll(l),v=s.querySelectorAll(a),c=h.length;c;)e=Math.floor(Math.random()*c--),o.appendChild(h[e]),s.appendChild(v[e]),c==0?f():(h=o.querySelectorAll(l),v=s.querySelectorAll(a))},f=[],o="",s="",h=ban?"a":"div",l=lp-fp+1,i=n.querySelector(".base"),r=n.querySelector(".gal_waku"),t=r.querySelector(".gal_base"),e;window.addEventListener("load",function(){for(var r=0;r<l;r++)f[r]=new Image,f[r].src=pp+(r+fp)+".jpg",o+="<"+h+' class="koboData" href="'+f[r].src+'" target="_blank" style="background-image:url(\''+f[r].src+"')\"><\/"+h+">",s+='<div class="thumb" title="'+(r+fp)+'.jpg" style="background-image:url(\''+f[r].src+"')\"><\/div>";i.innerHTML=o;t.innerHTML=s;sf?c(n,"base","gal_base","koboData","thumb",function(){e(n)}):e(n)});e=function(n){var st=function(n,t){var i=t.innerHTML;n.innerHTML=i+i},yt=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)},pt=function(n,t,i){for(var r=0;r<t;r++)n[r].style.left=i*r+"%"},wt=function(n,t,i,r){i.style.transitionProperty="left";i.style.left=-r.offsetLeft/t.offsetWidth*100+"%"},bt=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;st(i,i);st(t,t);var rt=n.querySelector(".but_sl"),ht=n.querySelector(".mae"),ct=n.querySelector(".tugi"),p=i.querySelectorAll(".koboData"),l=t.querySelectorAll(".thumb"),e=p.length,k,f=e/2,d=0,a=0,c=0,o=1,ut=!1,ft=!1,b=!1,g=n.querySelector(".guide"),w,et="",nt=Copyright,ot=HomePage,lt=MailAddress,kt=ContentType,tt={iy:e,ya:da,ke:ds},v=document.createElement("a"),s=function(n,i){ut||(ut=!0,o=n>f?1:-1,ft&&slr&&(o=Math.floor(Math.random()*2)*2-1),d=f,f=r&&t?bt(r,t,l,f,n,e):n,f+=tt[nt.substr(1,2)],f%=tt[lt.substr(1,2)],a=d-o,c=f+o,it(),document.querySelector(".c_"+nt).href.substr(document.querySelector(".c_"+nt).href.indexOf("/")+3,2)===nt.substr(1,2)&&setTimeout(function(){dt(i)},100))},it=function(){a+=e;a%=e;c+=e;c%=e;a===f&&(a=a-o,it());c===d&&(c=c+o,it());a===c&&(c=c-o*2,it())},dt=function(u){clearTimeout(k);var s=Math.floor(Math.random()*(Object.keys(ani).length-2));ani[vt[s]](n,i,da,p[f],p[d],o,u,p[a],p[c]);ft=!1;r&&t&&yt(r,t,l[f],da);g&&(w[d%(e/2)].style.backgroundColor=gudef,w[f%(e/2)].style.backgroundColor=gusel);setTimeout(function(){y&&!b&&at();ut=!1},tt[lt.substr(2,2)]+100)},at=function(){clearTimeout(k);k=setTimeout(function(){slr&&(ft=!0);s(f+1)},tt[lt.substr(4,2)])},vt=Object.keys(ani);if(vt.splice(0,2),n.mp=document.createElement("div"),i.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",r&&t)for(t.style.width=thw/(asp/100)+"%",t.style.paddingTop=thw+"%",h=0;h<e;h++)l[h].style.paddingTop=asp+"%",l[h].ind=h,l[h].onclick=function(){this.ind!=f&&s(this.ind)};if(r&&t&&g){for(h=0;h<e/2;h++)et=et+'<div style="color:'+guc+';">'+(h+1)+"<\/div>";for(g.innerHTML=et,w=g.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?(f>=e/4&&f<e/2-3&&(t.style.left=-1*l[f+e/2].offsetLeft/r.offsetWidth*100+"%"),s(this.ind+e/2)):(f>=e/2+3&&(t.style.left=-1*l[f-e/2].offsetLeft/r.offsetWidth*100+"%"),s(this.ind)))}}ht&&(ht.onclick=function(){s(f-1,"x")});ct&&(ct.onclick=function(){s(f+1,"x")});rt&&(rt.innerHTML=y?pause:play,rt.onclick=function(){y?(clearTimeout(k),y=!1,this.innerHTML=play):(y=!0,this.innerHTML=pause,s(f+1))});dfw&&(u.XF(i,function(){o=1;s(f+1,"x")},function(){o=-1;s(f-1,"x")},50),u.XD(i,function(){o=1;s(f+1,"x")},function(){o=-1;s(f-1,"x")},50),u.YF(i,function(){o=1;s(f+1,"y")},function(){o=-1;s(f-1,"y")},50),u.YD(i,function(){o=1;s(f+1,"y")},function(){o=-1;s(f-1,"y")},50),u.MW(i,function(){o=1;s(f+1,"y")},function(){o=-1;s(f-1,"y")}));r&&t&&(pt(l,e,100),wt(i,r,t,l[f]));g&&(w[0].style.backgroundColor=gusel);p[f].style.zIndex=2;p[f].style.opacity=1;document.querySelector(".c_"+nt)||(document.body.appendChild(v),v.setAttribute("href",ot),v.setAttribute("class","c_"+nt),v.innerHTML=kt+" (C) "+nt,v.style.display="none",v.style.fontSize="12px",v.style.width="250px",v.style.margin="1ex auto");fb&&(window.addEventListener("blur",function(){y&&!b&&(b=!0,clearTimeout(k))},!1),window.addEventListener("focus",function(){y&&b&&(b=!1,s(f+1))},!1));ban&&(i.title="クリックで別タブに画像を表示。");y&&!b&&at()}}(document.getElementById("

　以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の画像データに書き換えてください。このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。可能ならば、スタイルシート部分はHEAD内に移動してください。また、スタイルシートとスクリプトをそれぞれ別ファイルにし、ページに読み込んで使用する事も可能です。

・　別のアニメーションの組み合わせを作る: 下の「アニメーションコード」を参照し、ご希望のアニメーションの組み合わせ（一つでも可）文字列を作り、下の枠内に記述し、「この組み合わせで作る」ボタンをクリックしてください。その際、一つの時はアニメーションコードのみ、複数の時はアニメーションコードを半角文字の「&」で結合しで記述してください。
例えば、
縦横入れ替わり・縦横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　｜