年賀の際に紙吹雪のような感じで金箔が舞うような感じを出したいと思ったとき、【Canvas】で実現できるのでその方法を書いてみたいと思います。
jsdo.itを利用する
jsdo.itにはさまざまなスクリプトがありますので、それを使えば簡単に実装できると思います。
jsdo.itはWEBデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのための、コードコミュニティです。
書いたその場で動かせるオンラインエディターだから、コードはWeb上に保存、作品として公開できます。技術に自信がなくても大丈夫！共有されているコードをアレンジして、最先端のテクニックを手に入れましょう。
そして自由に利用することもできます。
jsdo.itにあるコードを私のサイトからロードしてもよいでしょうか?
紙吹雪のスクリプトをダウンロード
さっそく紙吹雪を探しますと、こちらによさそうなのがありました。
http://jsdo.it/Tackle_Oh/WHre
アドレスをクリックしてサイトに行きます。
「download」をクリックし、ダウンロードします。
さきほどダウンロードしたzipを開きます。
３つのファイルが入っていると思います。
index.html
style.css
index.js
index.htmlをダブルクリックすると、ブラウザが立ち上がり、実際の紙吹雪が見れると思います。
index.htmlのソースを自分のサイトに入れれば、簡単に紙吹雪が実装できると思います。
index.htmlのソースの中身は下記です。
<canvas id="canvas"></canvas> <script type="text/javascript" src="http://jsdo.it/lib/jquery-1.9.1/js"></script> <script type="text/javascript" src="index.js"></script>
これを自分のhtmlの中に入れればOKです。
WordPressならjqueryは必要ないかなと思います。
【Simplicity2】で使ってみる
すでにこのページに金粉が舞っているかと思いますが、ページ内にソースを入れています。
もっと上の階層に命令を入れれば、サイトの上のほうからも金粉を降らすことができると思います。
さきほどダウンロードしたzipを開きます。
３つのファイルが入っていると思います。
index.html
style.css
index.js
index.jsを開いてソースを全部選択し、/simplicity2-child/javascript.jsにコピペします。
ありがたいことに【Simplicity2】の子テーマではあらかじめjavascript.jsが読み込まれていますので、こちらにいれれば読み込みの設定をしなくてもOKになります。
コピペしたjavascript.jsをアップします。
子テーマのstyle.cssに下記を追加します。
#canvas {
position:absolute;
overflow: hidden;
z-index:1;
}投稿ページに下記を入れます。
<canvas id="canvas"></canvas>
これでページ内に紙吹雪がちらちらとすると思います。
色を変える
今は、5色の色になっていますが、金箔っぽい金色に変えたいと思います。
先ほどコピペしたjavascript.jsの21行目あたりに色を制御している部分があります。
//ここに追加したいJavaScript、jQueryを記入してください。
//このJavaScriptファイルは、親テーマのJavaScriptファイルのあとに呼び出されます。
//JavaScriptやjQueryで親テーマのjavascript.jsに加えて関数を記入したい時に使用します。
// forked from takumi.fukasawa's "forked: [canvas] 紙ふぶき" http://jsdo.it/takumi.fukasawa/zjGD
// forked from iwao111's "forked: [canvas] 紙ふぶき" http://jsdo.it/iwao111/dWOW
// forked from dobin's "forked: [canvas] 紙ふぶき" http://jsdo.it/dobin/qEcf
// forked from Shingo.Shibamoto's "forked: [canvas] 紙ふぶき" http://jsdo.it/Shingo.Shibamoto/llOI
// forked from teetteet's "forked: [canvas] 紙ふぶき" http://jsdo.it/teetteet/r8As
// forked from ikr7's "forked: [canvas] 紙ふぶき" http://jsdo.it/ikr7/nutG
// forked from tsubao's "[canvas] 紙ふぶき" http://jsdo.it/tsubao/iR2g
var DEF_KAMIKIRE_MAX = 70;
var kamikire_array = [];
var cvs;
var ctx;
var stageWidth, stageHeight;
var resizeFlg = true;
var colorFlag = true;
var COLORS_16 = [
"0C00CC" // 青
,"CC0000" // 赤
,"22C350" // 柿色
,"FFFF00" // 黄
,"FF5E19" // 柿色
];
window.onload = function()
{
init();
}ここを変えます。
COLORS_16 = [ "0C00CC" // 青 ,"CC0000" // 赤 ,"22C350" // 柿色 ,"FFFF00" // 黄 ,"FF5E19" // 柿色
黄色と白っぽくしてみます。色は自由です。
var COLORS_16 = [ "fff83f" ,"d3d2c7" ,"c5b646" ,"e0c62f" ,"fceda9" ];
これでなんとなく金粉が降っている感じになったと思います。
あと紙吹雪の大きさは
77行目あたりの
var kami = new Kamikire(10+Math.floor(Math.random()*5));
「10」を変えれば、変わります。
ページ内のワイドだと小さく感じるかもしれませんが、横幅100%だったらまた見え方は違うと思うので、調整してください。
それ以外の修正などは、すべてjavascript.js内にあるので、適宜調整してください。
もし何か質問がある場合、作者に直接質問をすることもできます。
jsdo.itのすごいところです。まあ作者に聞くのが一番正確ですからね。
jsdo.itにはたくさんのスクリプトが置いてあるので、見ているだけでも楽しくなると思います。
あと下記で日時指定の方法を書いています。
これでお正月だけ金粉を降らせることもできると思います！
注意点
お気づきのように、紙吹雪はテキストなどより上のレイヤーから降ることになります。
画像などあるとわかりやすいと思います。画像の前を紙吹雪が通ります。
でもそれによって、紙吹雪の位置にリンクがあると押せなくなってしまいます。
なのでこの点は注意です。
ちょっとしたリンクなら、たとえばこのページなら
<a href="http://jsdo.it/help#help_load_host" rel="noopener" target="_blank">jsdo.itにあるコードを私のサイトからロードしてもよいでしょうか?</a>
が紙吹雪の下にあります。
これだけのリンクを紙吹雪の前に出すなら、
style.cssに下記を追加します。
.canvas-off {
position:relative;
z-index:999;
}リンクを出したい部分に.canvas-offのクラス指定をします。
今回なら
<a href="http://jsdo.it/help#help_load_host" rel="noopener" target="_blank">jsdo.itにあるコードを私のサイトからロードしてもよいでしょうか?</a>
のリンクなので、spanをつけて
<span class="canvas-off"><a href="http://jsdo.it/help#help_load_host" rel="noopener" target="_blank">jsdo.itにあるコードを私のサイトからロードしてもよいでしょうか?</a></span>
とすれば、リンクが押せるようになると思います。
何をしたかというと、紙吹雪より前に出すという命令になります。
このようにリンクが押せなくなるということがありますので、入れる場所や降らせる期間はよく考えたほうが良いと思います！
コメントをどうぞ