第2回　Tips6 ページ角にめくりエフェクトをつけたい

Tips 6

ページ角にめくりエフェクトをつけたい

JavaScript

	＞＞		point　ページ上部のスペースを有効活用
	＞＞		point　「チラ見せ」で、アテンション効果が高い

jQueryを使って紙の角をめくるようなエフェクトをつけるTipsが「SOHTANAKA」で公開されているので、チャレンジしてみよう（www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/）。

右上が三角形に切り取られた角の透過PNG画像【1】とめくれたときに見える画像【2】を作成し、head要素内に「＜script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"＞＜/script＞　（※「＜」「＞」は半角）」と書いて最新のjQueryを読み込む。さらに【3】のdiv要素を準備する。

「div id="corner"」が角の画像が入る要素、「div class="message"」がめくれたときに見える画像が入る要素なので、CSSでwidthとheightを指定する【4】。「img { behavior: ur（l iepngfix.htc） }」は、Internet Explorer 6で透過PNGを使用するための「IE PNG Fix」（www.twinhelix.com/css/iepngfix/）用の指定だ。このWebサイトからダウンロードした「iepngfi x.htc」と「blank.gif」をHTMLファイルと同じディレクトリにアップロードする。

head要素内に、「div id="corner"」に動きをつけるための記述をする【5】。先ほどCSSで指定したwidth、heightと合わせておくこと。このような見栄えになったら完成だ【6】。