webサイト制作の勉強|2023年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

Canvasでパーティクルを表現する

Canvasとは

Canvasとは、ブラウザ上に図を描くために策定された仕様です。

これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashJavaアプレットが使われてきました。

Canvasは、FlashJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、AppleMozilla FoundationOpera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。

パーティクル

パーティクル(particle)とは小片、粒子を意味しますが、パーティクルを動かすエフェクトを使ってページを華やかにします。

recruit.lifeones.jp



y-n10.com





github.com



vincentgarreau.com


今回はparticles.jsをCDNを使って実装してみます。

https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js




See the Pen
Particle & Mouse stalker
by yachin29 (@yachin29)
on CodePen.






webdesignfacts.net



www.webopixel.net




stitch.co.jp




blog.8bit.co.jp





note.com



ics.media


coco-factory.jp