忍者ブログ

ゲームやマンガなどなど

ゲームやマンガの紹介などなど

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

javascriptでのページめくり効果

画面の効果を、少しやってみたいと思い、ページめくりのような
効果を作ってみました

imgscr4.jpg


サンプル画面

コードのメインの部分は、

 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

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

カレンダー

08 2017/09 10
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

PR

powerd by rAccessr for javascript



にほんブログ村 漫画ブログ コミックス感想へ
にほんブログ村

プロフィール

HN:
tele
性別:
非公開

バーコード

ブログ内検索

P R

忍者アナライズ