背景にCanvasを動かす

背景でcanvas動かす
他人の力で素晴らしい動的サイトを作ろう

大まかな構造
• いい感じのビュジュアルスクリプトライブラリを探す(paper.js
etc)
• 最初にスクリプト呼び出し又は記述
• bodyの上にすぐcanvasを作りその上にsection置き、この中に上
物の内容を書く
• cssにcanvasと上物の奥行き(z-index)の関係を記述

スクリプト記述例
<script type="text/javascript" src="js/paper.js"> < /script>
<script type="text/paperscript" canvas="canvas">
// Please note: dragging and dropping images only works for
// certain browsers when serving this script online: var values =
{amount : 30
省略
dragover: onDocumentDrag, dragleave : onDocumentDrag
});
</script>

exmpleのソースからコピペ
exmpleのソースからコピペ！

html記述例
</head>
<body>
<canvas id="canvas"></canvas>
<section id="body">

省略
</section>
</body>
</html>

css記述例
#canvas { position:fixed; top:0; left:0; width:100%; height:100%;
z-index:1;}
#body { position:absolute; top:0; left:0; z-index:1;}

仮想body
• sectionに仮想のbodyを持たせ、そこでz-indexで前に出したい
ものとか背後回らせたいものを調整すればたぶんOK！

背景にCanvasを動かす

More Related Content

What's hot (16)

背景にCanvasを動かす