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

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　サイズやアスペクト比が異なる画像を表示する事ができるスライドショーギャラリーです。 img要素の画像ではなく、div要素の背景画像を使う事で、異なる形状の画像を一定の枠内に表示しています。バナーにするときはdiv要素ではなくa要素を使い、href属性に開くページのurlを書いてください。要するにこのスライドショーは、厳密にいうと、IMGスライドショーではなくBLOCKスライドショーです。また逆に、「BLOCKスライドショーは異なる形状の画像のスライドショーとして使用できる」とも言えます。スライドショーデータは、「ここからスライドショーのデータ。↓」以下のクラス名koboDataのdiv要素（a要素）で、表示する画像を背景に設定してください。; 　スライドショーの切り替えアニメーションはです。多種類のアニメーション名が・で区切られて記述してある場合は、切り替えるたびにアニメーションがランダムに選択されます。スライドショーの機能はこのままでアニメーションの組み合わせだけを変更したい場合は、このページ最下部「別のアニメーションの組み合わせを作る」をご参照ください。当サイトで提供している全アニメーションから複数の組み合わせを選択し、その見本とソースコードを表示できます。; 　ドラッグ（パソコン）やフリック（スマホやタブレット）でも操作でき、縦横連動型のアニメーションでは縦横それぞれの操作でアニメーション方向も連動します。即ちアニメーションは、モバイルでは縦フリックと横フリック操作でフリックした方向に動作し、パソコンでは縦ドラッグと横ドラッグでドラッグした方向に動作します。マウスが使える環境ではマウスホイールでも操作でき、アニメーションは縦方向に動作します。; 　ドラッグ・フリック・マウスホイール操作は「カスタマイズ」で機能の有無を選択できます。; 　このスライドショーは、「カスタマイズ」でスライドショー実行時のアニメーションの進行方向をランダムに設定できます。当サイトのランダム型アニメーションのスライドショー以外は、通常型スライドショーの実行時のアニメーションの進行方向は右→左または下→上に、シャトル型は右→左と左→右・下→上と上→下の繰り返しにしてあります。即ち、次ボタンを押した時と同じ動作です。このスライドショーはランダム型アニメーション以外でも進行方向をランダムにできます。使用するアニメーションによって使い分けてください。; 　このスライドショーは、スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択を外す・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。スライドショーの画像をクリックして、別のタブに設定したページを開いた時も一時停止します。スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。この機能は「カスタマイズ」でON／OFFを設定できます。; 　このスライドショーは、記述したスライドショーデータをページを開いた時点でシャッフルする事ができます。即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。「記述した順番で実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。; 　サムネイルもimg要素ではなくdiv要素の背景として表示します。クラス名gal_baseのDIV要素の中の、クラス名thumbのDIV要素の背景に、サムネイル用の画像を設定してください。画像の形状やサイズは自由です。; 　サムネイルギャラリーは、現在選択されているデータのサムネイルが画面の中央に自動的にスクロールするカルーセル型です。; 　操作ボタンはスライドショーの左上に半透明で表示されています。通常の3個のボタンと、スライドショー速度とアニメーション速度を訪問者が選択するためのセレクトボックス2個です。モバイルではタップ、パソコンではマウスを重ねると不透明になります。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。; 　使用している画像は生成AIのCopilotで作ったものです。

アスペクト非維持型
	⇔

・　[実行時ランダム][4画像][多種類][DrFlMw縦横連動][divサムネイル]カルーセル連動スライドショーギャラリー: 　見本は「カスタマイズ」で自動開始とアクティブとシャッフルとドラッグ・フリック・マウスホイールとクリックで別タブに画像表示とスライド時に進行方向をランダムにする機能をONに設定してあります。

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

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

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

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

/** サムネイル。 **/
.cpFHD_n9hbtcasg_dfw_zdwp_os .gal_waku{position:relative;top:0px;left:0px;width:100%;z-index:10;margin:auto;background-color:#444;padding-bottom:4px;box-sizing:border-box;}
.cpFHD_n9hbtcasg_dfw_zdwp_os .gal_base{position:relative;top:0px;left:0px;z-index:20;margin:auto;box-sizing:border-box;}
.cpFHD_n9hbtcasg_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 #888;background-color:#666;}
.cpFHD_n9hbtcasg_dfw_zdwp_os .gal_base .thumb:hover{border:2px solid #fff;}

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

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

/** ボタンの外枠。 **/
.cpFHD_n9hbtcasg_dfw_zdwp_os .con{position:absolute;top:10px;left: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;}
.cpFHD_n9hbtcasg_dfw_zdwp_os:hover .con{opacity:1;}

/** 三角矢印。 **/
.cpFHD_n9hbtcasg_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>

</div>
</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,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))},i=function(n){var e=n.querySelector(".base"),c=n.querySelector(".gal_waku"),f=c.querySelector(".gal_base"),ft=function(n,t){var i=t.innerHTML;n.innerHTML=i+i},Lt=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)},at=function(n,t,i){for(var r=0;r<t;r++)n[r].style.left=i*r+"%"},vt=function(n,t,i,r){i.style.transitionProperty="left";i.style.left=-r.offsetLeft/t.offsetWidth*100+"%"},yt=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},p;ft(e,e);ft(f,f);var tt=n.querySelector(".but_sl"),et=n.querySelector(".mae"),ot=n.querySelector(".tugi"),a=e.querySelectorAll(".koboData"),v=f.querySelectorAll(".thumb"),h=a.length,b,i=h/2,d=0,l=0,o=0,r=1,it=!1,rt=!1,w=!1,k=Copyright,ut=HomePage,st=MailAddress,pt=ContentType,g={iy:h,ya:da,ke:ds},s=document.createElement("a"),u=function(n,t){it||(it=!0,r=n>i?1:-1,rt&&slr&&(r=Math.floor(Math.random()*2)*2-1),d=i,i=c&&f?yt(c,f,v,i,n,h):n,i+=g[k.substr(1,2)],i%=g[st.substr(1,2)],l=d-r,o=i+r,nt(),document.querySelector(".c_"+k).href.substr(document.querySelector(".c_"+k).href.indexOf("/")+3,2)===k.substr(1,2)&&setTimeout(function(){wt(t)},100))},nt=function(){l+=h;l%=h;o+=h;o%=h;l===i&&(l=l-r,nt());o===d&&(o=o+r,nt());l===o&&(o=o-r*2,nt())},wt=function(t){clearTimeout(b);var u=Math.floor(Math.random()*(Object.keys(ani).length-2));ani[ct[u]](n,e,da,a[i],a[d],r,t,a[l],a[o]);rt=!1;c&&f&&Lt(c,f,v[i],da);setTimeout(function(){y&&!w&&ht();it=!1},g[st.substr(2,2)]+100)},ht=function(){clearTimeout(b);b=setTimeout(function(){slr&&(rt=!0);u(i+1)},g[st.substr(4,2)])},ct=Object.keys(ani);if(ct.splice(0,2),n.mp=document.createElement("div"),e.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",c&&f)for(f.style.width=thw/(asp/100)+"%",f.style.paddingTop=thw+"%",p=0;p<h;p++)v[p].style.paddingTop=asp+"%",v[p].ind=p,v[p].onclick=function(){this.ind!=i&&u(this.ind)};et&&(et.onclick=function(){u(i-1,"x")});ot&&(ot.onclick=function(){u(i+1,"x")});tt&&(tt.innerHTML=y?pause:play,tt.onclick=function(){y?(clearTimeout(b),y=!1,this.innerHTML=play):(y=!0,this.innerHTML=pause,u(i+1))});dfw&&(t.XF(e,function(){r=1;u(i+1,"x")},function(){r=-1;u(i-1,"x")},50),t.XD(e,function(){r=1;u(i+1,"x")},function(){r=-1;u(i-1,"x")},50),t.YF(e,function(){r=1;u(i+1,"y")},function(){r=-1;u(i-1,"y")},50),t.YD(e,function(){r=1;u(i+1,"y")},function(){r=-1;u(i-1,"y")},50),t.MW(e,function(){r=1;u(i+1,"y")},function(){r=-1;u(i-1,"y")}));c&&f&&(at(v,h,100),vt(e,c,f,v[i]));a[i].style.zIndex=2;a[i].style.opacity=1;window.addEventListener("load",function(){document.querySelector(".c_"+k)||(document.body.appendChild(s),s.setAttribute("href",ut),s.setAttribute("class","c_"+k),s.innerHTML=pt+" (C) "+k,s.style.display="none",s.style.fontSize="12px",s.style.width="250px",s.style.margin="1ex auto");fb&&(window.addEventListener("blur",function(){y&&!w&&(w=!0,clearTimeout(b))},!1),window.addEventListener("focus",function(){y&&w&&(w=!1,u(i+1))},!1));n.querySelector(".ke_che")&&(n.querySelector(".ke_che").onchange=function(){ds=n.querySelector(".ke_che")[this.selectedIndex].value-0;g.ke=n.querySelector(".ke_che")[this.selectedIndex].value-0});n.querySelector(".ya_che")&&(n.querySelector(".ya_che").onchange=function(){da=n.querySelector(".ya_che")[this.selectedIndex].value-0;g.ya=n.querySelector(".ya_che")[this.selectedIndex].value-0});y&&!w&&ht()})};sf?r(n,"base","gal_base","koboData","thumb",function(){i(n)}):i(n)}(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　｜