<\/div>";s.innerHTML=f;c.innerHTML=e;sf?u(n,"base","gal_base","koboData","thumb",function(){r(n)}):r(n)});r=function(n){var s=n.querySelector(".base"),h=n.querySelector(".gal_waku"),e=h.querySelector(".gal_base"),ut=function(n,t){var i=t.innerHTML;n.innerHTML=i+i},ht=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)},ct=function(n,t,i){for(var r=0;r
f*3/4&&(u-=f/2,t.style.left=-1*i[r-f/2].offsetLeft/n.offsetWidth*100+"%"),u},u;ut(s,s);ut(e,e);var g=n.querySelector(".but_sl"),ft=n.querySelector(".mae"),et=n.querySelector(".tugi"),p=s.querySelectorAll(".koboData"),l=e.querySelectorAll(".thumb"),f=p.length,w,i=f/2,nt=0,o=1,tt=!1,v=!1,b=n.querySelector(".guide"),a,it="",k=Copyright,rt=HomePage,ot=MailAddress,vt=ContentType,d={iy:f,ya:da,ke:ds},c=document.createElement("a"),r=function(n,t){tt||(tt=!0,o=n>i?1:-1,nt=i,i=h&&e?at(h,e,l,i,n,f):n,i+=d[rt.substr(8,2)],i%=d[ot.substr(1,2)],document.querySelector(".c_"+k).href.substr(8,2)===k.substr(1,2)&&setTimeout(function(){yt(t)},100))},yt=function(t){clearTimeout(w);af(n,s,da,p[i],p[nt],o,t);h&&e&&ht(h,e,l[i],da);b&&(a[nt%(f/2)].style.backgroundColor=gudef,a[i%(f/2)].style.backgroundColor=gusel);setTimeout(function(){y&&!v&&st();tt=!1},d[ot.substr(2,2)]+100)},st=function(){clearTimeout(w);w=setTimeout(function(){r(i+1)},d[rt.substr(11,2)])};if(n.mp=document.createElement("div"),s.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",h&&e)for(e.style.width=thw/(asp/100)+"%",e.style.paddingTop=thw+"%",u=0;u'+(u+1)+"<\/div>";for(b.innerHTML=it,a=b.querySelectorAll("div"),u=0;u=f/4&&i=f/2+3&&(e.style.left=-1*l[i-f/2].offsetLeft/h.offsetWidth*100+"%"),r(this.ind)))}}ft&&(ft.onclick=function(){r(i-1,"x")});et&&(et.onclick=function(){r(i+1,"x")});g&&(g.innerHTML=y?pause:play,g.onclick=function(){y?(clearTimeout(w),y=!1,this.innerHTML=play):(y=!0,this.innerHTML=pause,r(i+1))});dfw&&t.XF(s,function(){o=1;r(i+1,"x")},function(){o=-1;r(i-1,"x")},50);dfw&&t.XD(s,function(){o=1;r(i+1,"x")},function(){o=-1;r(i-1,"x")},50);dfw&&t.YF(s,function(){o=1;r(i+1,"y")},function(){o=-1;r(i-1,"y")},50);dfw&&t.YD(s,function(){o=1;r(i+1,"y")},function(){o=-1;r(i-1,"y")},50);dfw&&t.MW(s,function(){o=1;r(i+1,"y")},function(){o=-1;r(i-1,"y")});h&&e&&(ct(l,f,100),lt(s,h,e,l[i]));b&&(a[0].style.backgroundColor=gusel);p[i].style.zIndex=2;p[i].style.opacity=1;document.querySelector(".c_"+k)||(document.body.appendChild(c),c.setAttribute("href",rt),c.setAttribute("class","c_"+k),c.innerHTML=vt+" (C) "+k,c.style.display="block",c.style.fontSize="12px",c.style.width="250px",c.style.margin="1ex auto");fb&&(window.addEventListener("blur",function(){y&&!v&&(v=!0,clearTimeout(w))},!1),window.addEventListener("focus",function(){y&&v&&(v=!1,r(i+1))},!1));y&&!v&&st()};sf?u(n,"base","gal_base","koboData","thumb",function(){Miyake_cpMHDs_n9hcasg(n)}):Miyake_cpMHDs_n9hcasg(n)}(document.getElementById("
以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。
見本の写真は、パソコンでの編集では表示されますが、Web上にアップすると表示されないものもあります。
可能ならば、スタイルシート部分はHEAD内に移動してください。
また、スタイルシートとスクリプトをそれぞれ別ファイルにし、ページに読み込んで使用する事も可能です。
- ・ 別のアニメーションを見る
- アニメーションがドラッグ・フリック・マウスホイールに縦横連動するもの。
縦横スクロール
縦横視差スクロール
縦横入れ替わり
縦横転がり
縦横3D回転
縦横3D裏返し
縦横3D入れ替わり
縦横3D逆入れ替わり
縦横CUBE回転
縦横CUBE枠内回転
縦横コーナー回転
縦横連動ランダムズーム3D回転1
縦横連動ランダムズーム3D回転2
- ・ 同型のスライドショーだがアニメーションがドラッグ・フリック・マウスホイールに連動しないもの。
-
前進と後進で動作方向が反転するもの。
スクロール横
スクロール縦
視差スクロール横
視差スクロール縦
横転がり
縦転がり
横入れ替わり
縦入れ替わり
CUBE枠内横回転
CUBE枠内縦回転
アップダウン
ダウンアップ
ランダムアップダウン
せり出し
ランダム回転移動インアウト
ドア横回転
ドア縦回転
横3D回転
縦3D回転
円ワイプ
2D摘みページめくり
2Dずらしページめくり
rAF型弾性二段階ズーム
ランダムな方向に動作するもの、または方向性がないもの。
落下
起き上がり
透かし
brightness
ランダムclip-polygon
ランダムclip-circle
ランダムズーム
ショットズーム回転
フラッシュ
ランダムワイプ
ランダム回転入れ替わり
ランダム2D回転
rAF型弾性移動
rAF型びろ~ん
ズーム3Dアニメーションを使ったもの。
ランダム縦横ズーム3D回転1
ランダム縦横ズーム3D回転2
3D横ズーム裏返し
3D縦ズーム裏返し
3D横ズーム入れ替わり
3D縦ズーム入れ替わり
3D横ズーム逆入れ替わり
3D縦ズーム逆入れ替わり
CUBE横ズーム回転
CUBE縦ズーム回転
3D横ズームスクロール
3D縦ズームスクロール
射光型3D横ズームページめくり
射光型3D縦ズームページめくり
全回転型3D横ズームページめくり
全回転型3D縦ズームページめくり
シャトル型。アニメーションの動作方向が、next・prevに関係なく、左右や上下や前後を繰り返す。
前後シャトル型zスクロール
左右シャトル型スクロール
上下シャトル型スクロール
左右シャトル型視差移動
上下シャトル型視差移動
前後シャトル型せり出し
左右シャトル型転がり
上下シャトル型転がり
左右シャトル型枠内CUBE回転
上下シャトル型枠内CUBE回転
左右シャトル型ズームCUBE回転
上下シャトル型ズームCUBE回転
左右シャトル型3D入れ替わり
上下シャトル型3D入れ替わり
左右シャトル型3D逆入れ替わり
上下シャトル型3D逆入れ替わり
左右シャトル型3D裏返し
上下シャトル型3D裏返し
左右シャトル型ドア回転
上下シャトル型ドア回転
All Rights Reserved. Copyright (C) 2002- Miyake_kobo.