cocoonのヘッダーにおしゃれな水玉を飛ばしてみた

アイキャッチ_cocoonにおしゃれなみずたまを飛ばす方法 cocoon
アイキャッチ_cocoonにおしゃれなみずたまを飛ばす方法

どうもトラ吉です!

 

前回「アイキャッチを工夫したらサイト全体が良くなった」ので記事を書いたのですが、、、

https://trytrytry.work2019/09/24/eyecatching/

ビフォーアフターのためサイト全体のスクシィを撮ったのですが、客観的に全体的に自分のサイトを見ると、、、ものすごい殺風景!!!

とふと思い、どうにかせねば、ってことでとりあえずヘッダーに水玉でも飛ばしてみました。

 

現在の絶賛飛ばし中です。ヘッダーに飛んでる黒いやつ。

 

今回はこのヘッダーに飛んでるやつの作り方と、それをcocoonに搭載する方法を紹介します。

トラ吉
トラ吉

もしかしたら何かの都合で飛ばすのをやめるかもしれません。

もし、飛んでいなかった時のために下にデモを用意しているのでそちらをご覧になってください。

この記事を読めばこんなことがわかる

このサイトのヘッダーに飛んでるやつの作り方がわかる
これをcocoonに搭載する方法がわかる。

 

パーティクルの飛ばし方

 

この飛んでる丸いやつ、名前をパーティクルと言います。

まずはパーティクルの飛ばし方やオプションを紹介していきます。

オプションを設定すると幾何学のようなかっこいいデザインに変更したり、画面サイズによって色など様々な設定を変更できるようになります。(スマホの場合は違うデザインにするなど)

 

公式サイト

particles.js – A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.

 

実装方法

必要なもの

こちらの2つのファイルが必要となります。

 

2つともCDNで使うことができるためCDNを使用するといいでしょう。

ファイルをダウンロードして使いたい場合はそれぞれリンク先からダウンロードして使用できます。

CDNが簡単で便利ですのでCDNでのやり方を説明します。

 

htmlの<head></head>内に以下のコードを記載します。

必ずjquery.ims.jsの後にparticles.imn.jsを記載してください。

 

 

<body></body>内に<canvas></canvas>を用意しclassを振っておきます。

 

 

jsファイルを作り、以下のコードを記載します。

<body></body>内に<script></script>を用意し以下コードを記載しても構いません。

 

 

</body>直前に作ったjsファイルを呼び出すコードを記載します。

 

cssに以下コードを記載します。

 

プロパティー一覧

プロパティ 初期値 説明
selector セレクター名を記載
maxParticles 100 パーティクルの数
sizeVariations パーティクルのサイズ
speed 0.5 移動スピード
color #000000 パーティクルの色
minDistance 120 connectParticles:true;にした場合にパーティクルどうしが設定したpx間の距離で線が結ばれる
connectParticles false trueにするとパーティクルどうしを線で繋ぐ
responsive null レスポンシブ設定

 

デモ

 

トラ吉
トラ吉

好きに値を変更して実行を押してみてくれ。

















トラ吉
トラ吉

線を繋ぐと、なぜか#で始まる16進数での指定しかできないので注意してくれ。

トラ吉
トラ吉

下に表示されるコードをコピペすれば同じ装飾が施せるぞ。

画面のサイズごとにデザインを変更する場合は以下のように書きます。

cocoonの背景として搭載する方法

 

今回は背景に水玉を設置して、ヘッダーのバックグラウンドの色を透明にすることで背景の水玉を見ることができるようにしておりますので、cocoonの設定によって見え方が変わってきます。

</head>直前にjqueryを使用する為のCDNとparticles.min.jsを使用する為のCNDを設置する。

「外観」→「テーマエディター」から「head-insert.php」を開き、こちらをコピーします。

 

 

 

<body>直後に<canvase>タグを設置し、そのあとに<script>タグを使ってjavascriptを記載する。
「外観」→「テーマエディター」から「body-top-insert.php」を開き、こちらをコピーします。

<canvas>のclassにはお好きな名前をつけることができますが、class名を変更した場合は<script>内のselector:””;に変更後のclass名を指定してください。

 

スタイルシートにcssを追加
「外観」→「テーマエディター」から「スタイルシート」を開き、こちらをコピーします。

こちらもclass名を変更した場合にはcssセレクターを変更してください。

コメント

タイトルとURLをコピーしました