画面の効果を、少しやってみたいと思い、ページめくりのような
効果を作ってみました
サンプル画面
コードのメインの部分は、
if (pcnt==0) cv.drawImage(page3,800-michi,0,michi,600,800-michi,0,michi,600);
else if (pcnt==1) cv.drawImage(page4,800-michi,0,michi,600,800-michi,0,michi,600);
else cv.drawImage(page2,800-michi,0,michi,600,800-michi,0,michi,600);
var grd = cv.createLinearGradient(800-michi-60,0,800-michi,0);
grd.addColorStop(0,"#ffffff");
grd.addColorStop(0.6,"#f5f5f5");
grd.addColorStop(0.85,"#e7e7e7");
grd.addColorStop(1.0,"#f7f7f7");
cv.fillStyle=grd;
cv.fillRect(800-michi*2,0,michi,600);
michi+=8;
if (michi<799){
setTimeout("page()",0100);
} else {
pcnt++;
if (pcnt<3){
michi=1;
setTimeout("page()",01000);
}
}
これだけです、
余白に陰影とかつけるともっとそれっぽくなるようですが、
ちょっとyahooのページとかがめくれると少しおもしろいかなと
思ってはじめたので、とりあえずこんな感じです
画像はあらかじめ、gurl2bmpでとりこんでいます
michiがめくれるピクセル数で、HTML5のグラデーションで丸みを
書いています
PR