画面演出の見本帳

使い方とメモ

• サイトに入れられる「動き」の見本です。Flashが無くなってから、Webの演出は「写真がふわっと出る」で止まりがちになりました。いまはJavaScriptだけで、プラグインなしに同じことができます。
• 演出の色・背景色・流す文字は、その場で変えられます。サイトの背景色を入れて自社の色と社名を流せば、実際にどう見えるかの見当がつきます。背景は演出の見え方を大きく変えますので、白地に載せるのか濃い地に載せるのかは先に決めてください。
• 「コードを見る」で、画面で動いているコードがそのまま出ます。解説用に書き直したものではありません。canvasに貼れば動きます。持ち帰って使っていただいて構いません。
• それぞれに「向いている場所」「向かない場所」「端末への負担」を書いています。動きは入れれば良いというものではなく、本文の背後に置けば読みにくくなり、強すぎれば疲れます。使いどころのほうが大事です。
• 動きを減らす設定にしている方には、最初から動きません。（OSの「視差効果を減らす」設定を見ています。）ボタンを押したときだけ動きます。
• 画面に映っているものだけ動かし、別のタブへ移ると止めています。5つ同時に回すと非力な端末では重くなるためです。
• 外部ライブラリは使っていません。すべて標準のcanvasだけで描いています。