サイト制作の補遺#4 カーソルに応じてパーティクルを表示する方法について

しろーぬなずな に投稿

Canvasを用いたマウスストーカーの技術解説

本稿では、JavaScriptとHTML5のCanvas APIを用いて実装された、マウスカーソルの動きに追従する動的なパーティクルエフェクト(通称:マウスストーカー)のコードを解剖し、その構造と設計思想について詳細に解説する。

1. 全体像と処理の流れ

このプログラムは、画面全体を覆う透明な描画領域(Canvas)を動的に生成し、マウスの移動を検知して光る粒子(パーティクル)を発生させ、それらを物理演算風に動かしながら徐々に消滅させるという一連の処理をアニメーションループによって実現している。

大まかな処理の流れは以下の通りである。

タグ

疑問:予約投稿できないだろうか?・事前検証1

しろーぬなずな に投稿

しろーぬなずなは夜行性なのだが、投稿日時を未来にすることで可能になるのか、それとも一部ブログサイトのように投稿日時が必ずしも正しい必要のない形式か。という検証です。

検証結果

 

検証のため、プライベートで開いたが、右下の時間より投稿時刻が遅い表示である。ただ投稿時刻が変わるのみで予約投稿とはなっていないことがわかる。

 

Drupalの機能拡張で予約投稿ができるそうだが、導入に手こずっている。

 

次回→予約投稿の機能拡張を導入、あるいは他の方法で実装

 

プロフィールを掲載しました。備忘録として技術部分の説明つき。

しろーぬなずな に投稿

https://compass.x3rd.momousa.net/prof/profile.html

近いうちに、GUI的に飛べるようにしたいと思う。
プロフィールはこちら(画像クリック)的な。

関係ないが、グラフィックユーザーインターフェースの話してた女性の学術系Vがいた気がする。HCIがどうとかで。
 


備忘録:Drupal 11独立テーマ構築と静的HTMLの同居・UI最適化プロセス
1. アーキテクチャの根幹:完全独立テーマの生成
Drupal 11のデフォルトテーマのCSS干渉を遮断するため、親テーマを持たない完全独立型のカスタムテーマ(base theme: false)を構築した。

2. ビューポート連動型フルレスポンシブ設計(UI最適化)
PC大画面での左右の広大な無駄余白の解消、およびスマホ縦長画面でのヘッダー画像の見切れを制御。

タグ
備忘録 を購読