- エーオーシステム コーポレートサイト
https://www.aosystem.co.jp/ - エーオーシステム プロダクトサイト
https://ao-system.net/ - レンタルサーバー
- バーチャル展示会
- バーチャル展示会 無料制作
- 3Dグラフィック
- Android アプリ
- iOS (iPhone,iPad) アプリ
- プログラミング記録QuickAnswer
- スカイボックス 3D SKY BOX
- 自動ブラウザサイトロジー2
- アニメGIF作成ストライダー
このページのQRコード
var piecePosition = { 1:{x:0,y:0} ,2:{x:55,y:0} ,3:{x:98,y:0} ,4:{x:177,y:0} ,5:{x:220,y:0} ,6:{x:298,y:0} ,7:{x:341,y:0} ,8:{x:419,y:0} ,9:{x:462,y:0} ,10:{x:540,y:0} ,11:{x:583,y:0} ,12:{x:662,y:0} ,13:{x:705,y:0} ,14:{x:783,y:0} ,15:{x:826,y:0} ,16:{x:904,y:0} ,17:{x:0,y:43} ,18:{x:40,y:59} ,19:{x:114,y:43} ,20:{x:161,y:59} ,21:{x:235,y:43} ,22:{x:282,y:59} ,23:{x:356,y:43} ,24:{x:403,y:59} ,25:{x:477,y:43} ,26:{x:525,y:59} ,27:{x:599,y:43} ,28:{x:646,y:59} ,29:{x:720,y:43} ,30:{x:767,y:59} ,31:{x:841,y:43} ,32:{x:889,y:59} ,33:{x:0,y:125} ,34:{x:55,y:106} ,35:{x:98,y:125} ,36:{x:177,y:106} ,37:{x:220,y:125} ,38:{x:298,y:106} ,39:{x:341,y:125} ,40:{x:402,y:106} ,41:{x:462,y:125} ,42:{x:540,y:106} ,43:{x:583,y:125} ,44:{x:662,y:106} ,45:{x:705,y:125} ,46:{x:766,y:106} ,47:{x:826,y:125} ,48:{x:904,y:106} ,49:{x:0,y:172} ,50:{x:40,y:188} ,51:{x:113,y:172} ,52:{x:161,y:188} ,53:{x:235,y:172} ,54:{x:282,y:188} ,55:{x:356,y:172} ,56:{x:403,y:188} ,57:{x:477,y:172} ,58:{x:525,y:188} ,59:{x:599,y:172} ,60:{x:646,y:188} ,61:{x:720,y:172} ,62:{x:767,y:188} ,63:{x:841,y:172} ,64:{x:889,y:188} ,65:{x:0,y:254} ,66:{x:55,y:234} ,67:{x:98,y:254} ,68:{x:160,y:234} ,69:{x:220,y:254} ,70:{x:298,y:234} ,71:{x:341,y:254} ,72:{x:419,y:234} ,73:{x:462,y:254} ,74:{x:540,y:234} ,75:{x:583,y:254} ,76:{x:662,y:234} ,77:{x:705,y:254} ,78:{x:783,y:234} ,79:{x:826,y:254} ,80:{x:904,y:234} ,81:{x:0,y:301} ,82:{x:40,y:317} ,83:{x:114,y:301} ,84:{x:161,y:317} ,85:{x:235,y:301} ,86:{x:282,y:317} ,87:{x:355,y:318} ,88:{x:403,y:317} ,89:{x:477,y:301} ,90:{x:525,y:317} ,91:{x:599,y:301} ,92:{x:646,y:317} ,93:{x:718,y:318} ,94:{x:767,y:317} ,95:{x:841,y:301} ,96:{x:889,y:317} ,97:{x:0,y:383} ,98:{x:55,y:363} ,99:{x:98,y:383} ,100:{x:177,y:363} ,101:{x:220,y:383} ,102:{x:298,y:363} ,103:{x:341,y:367} ,104:{x:419,y:363} ,105:{x:462,y:383} ,106:{x:540,y:363} ,107:{x:583,y:383} ,108:{x:662,y:363} ,109:{x:705,y:367} ,110:{x:783,y:363} ,111:{x:826,y:383} ,112:{x:904,y:363} ,113:{x:0,y:429} ,114:{x:40,y:445} ,115:{x:114,y:429} ,116:{x:161,y:445} ,117:{x:235,y:429} ,118:{x:282,y:445} ,119:{x:356,y:429} ,120:{x:403,y:445} ,121:{x:477,y:429} ,122:{x:525,y:445} ,123:{x:599,y:429} ,124:{x:646,y:445} ,125:{x:720,y:429} ,126:{x:767,y:445} ,127:{x:841,y:429} ,128:{x:889,y:445} ,129:{x:0,y:511} ,130:{x:55,y:492} ,131:{x:98,y:511} ,132:{x:177,y:492} ,133:{x:220,y:511} ,134:{x:298,y:492} ,135:{x:341,y:511} ,136:{x:419,y:492} ,137:{x:462,y:511} ,138:{x:524,y:492} ,139:{x:583,y:511} ,140:{x:662,y:492} ,141:{x:705,y:511} ,142:{x:783,y:492} ,143:{x:826,y:511} ,144:{x:904,y:492} ,145:{x:0,y:558} ,146:{x:40,y:574} ,147:{x:114,y:558} ,148:{x:161,y:574} ,149:{x:235,y:558} ,150:{x:282,y:574} ,151:{x:356,y:558} ,152:{x:403,y:574} ,153:{x:477,y:558} ,154:{x:525,y:574} ,155:{x:599,y:558} ,156:{x:646,y:574} ,157:{x:720,y:558} ,158:{x:767,y:574} ,159:{x:841,y:558} ,160:{x:889,y:574} ,161:{x:0,y:640} ,162:{x:55,y:620} ,163:{x:98,y:640} ,164:{x:177,y:620} ,165:{x:220,y:640} ,166:{x:298,y:620} ,167:{x:341,y:640} ,168:{x:419,y:620} ,169:{x:462,y:640} ,170:{x:540,y:620} ,171:{x:583,y:640} ,172:{x:662,y:620} ,173:{x:705,y:640} ,174:{x:783,y:620} ,175:{x:826,y:640} ,176:{x:904,y:620} }
var imgs = []; //全ピース画像を保管 dropPiece(1); function dropPiece(key) { //全ピースを読み込みながら中央付近にランダムに配置 imgs[key] = document.createElement('img'); imgs[key].src = 'path/to/' + key + '.png'; //ピース画像のパスとファイル名 imgs[key].onload = function(){ imgs[key].style.position = 'absolute'; imgs[key].style.transitionProperty = 'transform,margin-left,margin-top'; imgs[key].style.transitionDuration = (5 + Math.floor(Math.random() * 5)) + 's'; //ピースのドロップポイントから完了位置への移動時間 imgs[key].style.transformOrigin = '50% 50%'; imgs[key].style.transform = 'rotate(' + (Math.floor(Math.random() * 360) - 180) + 'deg)'; //ランダムに回転させておく imgs[key].style.marginLeft = (960 / 2 + (Math.floor(Math.random() * 200) - 100)) + 'px'; //中央付近にばらまく imgs[key].style.marginTop = (702 / 2 + (Math.floor(Math.random() * 200) - 100)) + 'px'; //中央付近にばらまく document.getElementById('origin').appendChild(imgs[key]); if (key < 176) { //すべて終了するまで繰り返す setTimeout(function(){dropPiece(key+1);},0); } } }
//四隅または外枠から結合可能なピースを選び動かすことで、人間らしさを演出しています。 var candidate = [ //あらかじめ四隅のピースを動かす対象にセットしておく 1,16,161,176 ]; var completes = []; //最終位置に配置済みが入る function setCandidate() { for (var key = 1; key <= 176; key++) { if (in_array(key,candidate)) { //既に動作候補に入っている場合 continue; } if (in_array(key,completes)) { //既に最終位置へ動作完了している場合 continue; } var keyTop = key - 16; //上 var keyBottom = key + 16; //下 var keyLeft = key - 1; //左 var keyRight = key + 1; //右 for (var p in completes) { //既に最終位置へ動作完了しているピースに隣接しているか否かを順に調べる if (completes[p] == keyTop || completes[p] == keyBottom || completes[p] == keyLeft || completes[p] == keyRight) { candidate.push(key); //次の動作候補に加える break; } } } }
function nextPiece() { if (candidate.length == 0) { //次に動かす候補が無くなったら終了 return; } var p = Math.floor(Math.random() * candidate.length); //次に動かすピースを選出 var key = candidate[p]; //keyは次に動かすピース candidate.some(function(v,i){ //動かす候補から、今選んだものを削除 if (v == key){ candidate.splice(i,1); } }); completes.push(key); //動かす候補を完了済みに入れる //実際に動かす imgs[key].style.transform = ''; imgs[key].style.marginLeft = piecePosition[key].x + 'px'; imgs[key].style.marginTop = piecePosition[key].y + 'px'; }最終的にはピースの影効果を付加して、ピースの重なり具合(z-index)も考慮して、レスポンシブ対応にしたものが以下の通りです。 (その他HTMLの適切な記述や画像等も必要ですのでこのままコピー&ペーストでは動作しません)
/** * jigsaw puzzle demo * * @author ao-system 2015.10.29 */ (function(window,document,jigsawPuzzlePiecePath) { var marginHeight = 240; var jigsawPuzzleShadowPath = './shadow'; var piecePos = { 1:{x:0,y:0} ,2:{x:55,y:0} ,3:{x:98,y:0} ,4:{x:177,y:0} ,5:{x:220,y:0} ,6:{x:298,y:0} ,7:{x:341,y:0} ,8:{x:419,y:0} ,9:{x:462,y:0} ,10:{x:540,y:0} ,11:{x:583,y:0} ,12:{x:662,y:0} ,13:{x:705,y:0} ,14:{x:783,y:0} ,15:{x:826,y:0} ,16:{x:904,y:0} ,17:{x:0,y:43} ,18:{x:40,y:59} ,19:{x:114,y:43} ,20:{x:161,y:59} ,21:{x:235,y:43} ,22:{x:282,y:59} ,23:{x:356,y:43} ,24:{x:403,y:59} ,25:{x:477,y:43} ,26:{x:525,y:59} ,27:{x:599,y:43} ,28:{x:646,y:59} ,29:{x:720,y:43} ,30:{x:767,y:59} ,31:{x:841,y:43} ,32:{x:889,y:59} ,33:{x:0,y:125} ,34:{x:55,y:106} ,35:{x:98,y:125} ,36:{x:177,y:106} ,37:{x:220,y:125} ,38:{x:298,y:106} ,39:{x:341,y:125} ,40:{x:402,y:106} ,41:{x:462,y:125} ,42:{x:540,y:106} ,43:{x:583,y:125} ,44:{x:662,y:106} ,45:{x:705,y:125} ,46:{x:766,y:106} ,47:{x:826,y:125} ,48:{x:904,y:106} ,49:{x:0,y:172} ,50:{x:40,y:188} ,51:{x:113,y:172} ,52:{x:161,y:188} ,53:{x:235,y:172} ,54:{x:282,y:188} ,55:{x:356,y:172} ,56:{x:403,y:188} ,57:{x:477,y:172} ,58:{x:525,y:188} ,59:{x:599,y:172} ,60:{x:646,y:188} ,61:{x:720,y:172} ,62:{x:767,y:188} ,63:{x:841,y:172} ,64:{x:889,y:188} ,65:{x:0,y:254} ,66:{x:55,y:234} ,67:{x:98,y:254} ,68:{x:160,y:234} ,69:{x:220,y:254} ,70:{x:298,y:234} ,71:{x:341,y:254} ,72:{x:419,y:234} ,73:{x:462,y:254} ,74:{x:540,y:234} ,75:{x:583,y:254} ,76:{x:662,y:234} ,77:{x:705,y:254} ,78:{x:783,y:234} ,79:{x:826,y:254} ,80:{x:904,y:234} ,81:{x:0,y:301} ,82:{x:40,y:317} ,83:{x:114,y:301} ,84:{x:161,y:317} ,85:{x:235,y:301} ,86:{x:282,y:317} ,87:{x:355,y:318} ,88:{x:403,y:317} ,89:{x:477,y:301} ,90:{x:525,y:317} ,91:{x:599,y:301} ,92:{x:646,y:317} ,93:{x:718,y:318} ,94:{x:767,y:317} ,95:{x:841,y:301} ,96:{x:889,y:317} ,97:{x:0,y:383} ,98:{x:55,y:363} ,99:{x:98,y:383} ,100:{x:177,y:363} ,101:{x:220,y:383} ,102:{x:298,y:363} ,103:{x:341,y:367} ,104:{x:419,y:363} ,105:{x:462,y:383} ,106:{x:540,y:363} ,107:{x:583,y:383} ,108:{x:662,y:363} ,109:{x:705,y:367} ,110:{x:783,y:363} ,111:{x:826,y:383} ,112:{x:904,y:363} ,113:{x:0,y:429} ,114:{x:40,y:445} ,115:{x:114,y:429} ,116:{x:161,y:445} ,117:{x:235,y:429} ,118:{x:282,y:445} ,119:{x:356,y:429} ,120:{x:403,y:445} ,121:{x:477,y:429} ,122:{x:525,y:445} ,123:{x:599,y:429} ,124:{x:646,y:445} ,125:{x:720,y:429} ,126:{x:767,y:445} ,127:{x:841,y:429} ,128:{x:889,y:445} ,129:{x:0,y:511} ,130:{x:55,y:492} ,131:{x:98,y:511} ,132:{x:177,y:492} ,133:{x:220,y:511} ,134:{x:298,y:492} ,135:{x:341,y:511} ,136:{x:419,y:492} ,137:{x:462,y:511} ,138:{x:524,y:492} ,139:{x:583,y:511} ,140:{x:662,y:492} ,141:{x:705,y:511} ,142:{x:783,y:492} ,143:{x:826,y:511} ,144:{x:904,y:492} ,145:{x:0,y:558} ,146:{x:40,y:574} ,147:{x:114,y:558} ,148:{x:161,y:574} ,149:{x:235,y:558} ,150:{x:282,y:574} ,151:{x:356,y:558} ,152:{x:403,y:574} ,153:{x:477,y:558} ,154:{x:525,y:574} ,155:{x:599,y:558} ,156:{x:646,y:574} ,157:{x:720,y:558} ,158:{x:767,y:574} ,159:{x:841,y:558} ,160:{x:889,y:574} ,161:{x:0,y:640} ,162:{x:55,y:620} ,163:{x:98,y:640} ,164:{x:177,y:620} ,165:{x:220,y:640} ,166:{x:298,y:620} ,167:{x:341,y:640} ,168:{x:419,y:620} ,169:{x:462,y:640} ,170:{x:540,y:620} ,171:{x:583,y:640} ,172:{x:662,y:620} ,173:{x:705,y:640} ,174:{x:783,y:620} ,175:{x:826,y:640} ,176:{x:904,y:620} } var candidate = [ 1,16,161,176 ]; var imgs = []; var shadows = []; var completes = []; var busyFlag = true; var lastY; var ratioNum; addEvt(window,'load',init); function addEvt(elm, tpe, func) { if (elm.addEventListener) { return elm.addEventListener(tpe, func, false); } else if (elm.attachEvent) { return elm.attachEvent('on' + tpe, func); } else { return elm['on' + tpe] = func; } } function removeEvt(elm, tpe, func) { if (elm.addEventListener) { return elm.removeEventListener(tpe, func, false); } else if (elm.attachEvent) { return elm.detachEvent('on' + tpe, func); } else { return elm['on' + tpe] = ''; } } function scrolltop() { var bdy = document.body; var d = document.documentElement; if (bdy && bdy.scrollTop) { return bdy.scrollTop; } if (d && d.scrollTop) { return d.scrollTop; } if (window.pageYOffset) { return window.pageYOffset; } return 0; } function in_array(needle,haystack) { for (var p in haystack) { if (haystack[p] == needle) { return true; } } return false; } function init() { var clientW = document.body.clientWidth; ratioNum = clientW / 960; if (ratioNum > 1) { ratioNum = 1; } dropPiece(1); } function ratio(num) { return Math.floor(num * ratioNum); } function dropPiece(key) { var speedNum = 5 + Math.floor(Math.random() * 5); imgs[key] = document.createElement('img'); imgs[key].src = jigsawPuzzlePiecePath + '/' + key + '.png'; imgs[key].onload = function(){ var rndR = (Math.floor(Math.random() * 360) - 180); var rndL = (ratio(960) / 2 + (Math.floor(Math.random() * 200) - 100)); var rndT = (ratio(702) / 2 + (Math.floor(Math.random() * 200) - 100)); imgs[key].style.position = 'absolute'; imgs[key].style.transitionProperty = 'transform,margin-left,margin-top'; imgs[key].style.transitionDuration = speedNum + 's'; imgs[key].style.transformOrigin = '50% 50%'; imgs[key].style.transform = 'rotate(' + rndR + 'deg)'; imgs[key].style.marginLeft = rndL + 'px'; imgs[key].style.marginTop = (rndT + marginHeight) + 'px'; imgs[key].style.width = ratio(imgs[key].width) + 'px'; imgs[key].style.height = 'auto'; imgs[key].style.zIndex = 3; document.getElementById('origin').appendChild(imgs[key]); shadows[key] = document.createElement('img'); shadows[key].src = jigsawPuzzleShadowPath + '/' + key + '.png'; shadows[key].onload = function(){ shadows[key].style.position = 'absolute'; shadows[key].style.transitionProperty = 'transform,margin-left,margin-top'; shadows[key].style.transitionDuration = speedNum + 's'; shadows[key].style.transformOrigin = '50% 50%'; shadows[key].style.transform = 'rotate(' + rndR + 'deg)'; shadows[key].style.marginLeft = rndL + 'px'; shadows[key].style.marginTop = (rndT + 120 + marginHeight) + 'px'; shadows[key].style.width = ratio(shadows[key].width) + 'px'; shadows[key].style.height = 'auto'; shadows[key].style.zIndex = 2; shadows[key].style.opacity = 0; document.getElementById('origin').appendChild(shadows[key]); if (key < 176) { setTimeout(function(){dropPiece(key+1);},1); } else { busyFlag = false; addEvt(window, 'scroll', scrollChange); } } } } function setCandidate() { for (var key = 1; key <= 176; key++) { if (in_array(key,candidate)) { continue; } if (in_array(key,completes)) { continue; } var keyTop = key - 16; var keyBottom = key + 16; var keyLeft = key - 1; var keyRight = key + 1; for (var p in completes) { if (completes[p] == keyTop || completes[p] == keyBottom || completes[p] == keyLeft || completes[p] == keyRight) { candidate.push(key); break; } } } } function nextPiece() { setCandidate(); if (candidate.length == 0) { removeEvt(window, 'scroll', scrollChange); //finish return; } var p = Math.floor(Math.random() * candidate.length); var key = candidate[p]; candidate.some(function(v,i){ //delete candidate[p]; if (v == key){ candidate.splice(i,1); } }); completes.push(key); imgs[key].style.zIndex = 4; imgs[key].style.transform = ''; imgs[key].style.marginLeft = ratio(piecePos[key].x) + 'px'; imgs[key].style.marginTop = ratio(piecePos[key].y) + marginHeight + 'px'; shadows[key].style.zIndex = 3; shadows[key].style.opacity = 0.6; shadows[key].style.transform = ''; shadows[key].style.marginLeft = ratio(piecePos[key].x - 6) + 'px'; shadows[key].style.marginTop = ratio(piecePos[key].y - 6) + marginHeight + 'px'; shadows[key].style.transitionProperty = 'transform,margin-left,margin-top,opacity'; setTimeout(function(){ imgs[key].style.zIndex = 1; shadows[key].style.zIndex = 0; shadows[key].style.transitionDuration = '1.5s'; setTimeout(function(){ shadows[key].style.opacity = 0; },20); setTimeout(function(){ document.getElementById('origin').removeChild(shadows[key]); },1600); },parseInt(imgs[key].style.transitionDuration) * 1000); } function scrollChange() { var yPos = Math.floor(scrolltop() / 95) * 95 + (95 * 1) + 1; if (lastY == yPos) { return; } lastY = yPos; if (busyFlag) { return; } busyFlag = true; nextPiece(); busyFlag = false; } })(window,document,jigsawPuzzlePiecePath); //end