confetti(紙吹雪)アニメーション

dtnディレクトリでは登録サイトのためにクリックランキング、応援ランキングといった機能をつけてありますが、クリック数や応援ポチが多い順にサイトが並んでいるだけのそっけないページだったので、JavaScriptのアニメーションでもつけてみることにしました。

設置するJavaScriptのアニメーションは「ランキング受賞サイト発表!!」とかのサイトによくあるような、金や銀の紙吹雪がひらひら舞い落ちる感じがよさそうなので、紙吹雪みたいなスクリプトを探してみることにしました。

知らなかったですが、紙吹雪は英語で「confetti」というようです。

さっそく「cofetti JavaScript」でぐぐってみると、jsのスクリプトやライブラリが色々見つけることができました。HTML5でcanvas要素が追加されたあたりで、紙吹雪のスクリプト作成が流行っていたのかもしれないです。

とりあえず日本語ブログで紹介されていたJavaScriptライブラリの「Canvas Confetti」を試してみることにしました。

canvas-confettiライブラリ

下のボタンを押すと紙吹雪がポンとでます。

Canvas Confetti」JavaScriptライブラリを使うと、こんなアニメーションが簡単にできてしまいました。あまりの簡単さにビックリです。

canvas-confettiライブラリの使い方

Node.jsがあればnmpでライブラリのインストールが可能ですので、npm installで「canvas-confetti」ライブラリが追加できます。

npm install --save canvas-confetti

そんなことをしなくても、CDNでライブラリが配信されているので、面倒な場合はこのコードを追加するだけで準備完了です。

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2/dist/confetti.browser.min.js"></script>

上のボタンにつけたシンプルな「紙吹雪発射!!」をする場合には、下記のコードを書くだけで実現できてしまいます。

confetti({
  particleCount: 100,
  spread: 70,
  origin: { y: 0.6 }
});

他にも「canvas-confetti」のコードサンプルページをみると、色々な紙吹雪噴射パターンが紹介されているので、使いたいものをコピペすれば簡単に動かすことができます。

WordPressの記事の中で使うには

JavaScriptをWordPressに読み込ませるには、テンプレートのfunctions.phpやheader.phpに設定するとかの流れになりますが、この投稿のように、1記事内でとりあえず動かす程度であれば「カスタムHTML」に直接スクリプトを書けば動かすことができました

上に設置したボタンも「カスタムHTML」に置いたスクリプトで動かしています。特定の記事だけに使うスクリプトであればこれで十分ですね。

記事中のJavaScriptはWordPressのカスタムHTMLで動く
WordPressの記事でスクリプトを実行させるには「カスタムHTML」で設定

WordPressの記事に設置したボタンと紐付けてスクリプトを動かす場合には、ボタンに適当なIDをつけてあげて、IDのonclick()でキックさせるとかにすればOKです。

実際に設置したコードサンプル

この記事では下のようなコードを「カスタムHTML」に設定してあります。

//CDNの読み込み
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2/dist/confetti.browser.min.js"></script>

//クリックで紙吹雪噴射!
<script>
	window.onload = function(){
		//confetti-btnをクリックすると発火
		document.getElementById("confetti-btn").onclick = function() {
    	confetti({
				particleCount: 100,
				spread: 70,
				origin: { y: 0.6 }
			});
		};
	};
</script>

設置したスクリプトがしっかりDOMレンダリング後に動いてくれるように、念のため、window.onload()を付けてonclickを取っておきました。設置したボタンの方には「confetti-btn」というID名をつけてあります。

花火っぽい紙吹雪をランキングページに設置

簡単に紙吹雪が実現できることが分かったので、dtn.jpのランキングページに「Canvas Confetti」のサンプルに置かれていた「Fireworks」というサンプルを設置してみました。花火のように紙吹雪がランダムにパンパンでてくるやつです。

下のボタン押すと「Fireworks」のデモができます。パンパン紙吹雪が噴出します。

噴射型の紙吹雪だと微妙

ページを開いたときに花火がパンパンするようにonload()のタイミングで「Canvas Confetti」を動かしてみたところ、無事にきれいな紙吹雪をパンパン噴出させることができました。

が、華々しくはなったものの、元々設置したかったものは金や銀の紙吹雪がひらひら舞い落ちる穏やかなイメージだったので、イメージとは逆のかなり騒がしい印象のページになってしまいました。

それと、ランキングページもレスポンシブにはなっているので、スマホでこれを見たらうっとおしい感じになっていたので、もう一度別のサンプルを探してみることにしました。

みかづきブログさんの紙吹雪スクリプト

探して見つけたのが、「みかづきブログ」さんが公開していたJavaScriptの紙吹雪でした。「canvas-confetti」ライブラリにも「snow」という雪が降るようなサンプルが置いてありましたが、こちらはきちんと紙吹雪がくるくる回転しつつ落ちてくれるので、まさにイメージ通りという感じでした。

ランキングページに設置

再度dtn.jpの各ランキングページに設置をしてみたところ、ちょうどいい感じに収まってくれました。スマホで見てもいい感じです。

他にもまだまだありました

confetti.js

MITライセンスで配布されていた「Confetti Falling Animation In Pure JavaScript – confetti.js」も、紙吹雪の動き方がよりリアルになっていていい感じです。時間があれば、こちらもそのうち試してみたいと思いました。

confetti.jsによる紙吹雪スクリプトのイメージ
紙吹雪の動きがかなりリアルです

おわりに

アニメーションを入れたことで、ランキングページも多少にぎやかしくすることができました。PCで見るともう少し紙吹雪のサイズを大きくしても良いかとは思いましたが、スマホでみるとこのくらいがちょうど良い感じなので、ひとまずこれで様子見したいと思います。

同じように紙吹雪アニメーションをお探しの方はぜひ参考にしてみて下さい。

追記:

噴射型の紙吹雪アニメーションを「2020年 年間Twitterトレンドランキング」のページに設置をしてみました。ご利用を考えている方は参考にしてみて下さい。

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手サイトは全てサービスを終了し、中小でも運営を継続するところがほとんどなくなってしまったディレクトリ型検索エンジンを2002年から細々運営しており、未だに細かい機能改修も行っております。申請されたサイトは実際に訪問して細かく確認をしているので登録までかなりお時間いただきます。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載しています。
  • 画像掲示板の泉画像やYouTubeやニコニコ動画が貼り付け可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitter(ツイッター)のトレンドワードや人気ハッシュタグデータを月別に集計してランキング形式で公開しています。
  • Keyword Tool++Yahoo APIや楽天サイトのデータを日次で収集したデータを元に、EC系キーワードをラインキング形式でご紹介しています。各ワードは検索ボリュームや関連語、24か月の検索ボリュームトレンドを確認も可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能なサイトにしています。
  • TrendinGファッションモールに出店するブランドをアイテムヒット率でランキングとしたサイトです。まだβ版です。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォローどうぞ。