参考作品:劇場版オリジナルアニメ『サイダーのように言葉が湧き上がる』公式サイト

こんにちは。ささめまです。

2021年当時見逃してずっと気になっているアニメ映画「サイダーのように言葉が湧き上がる」の公式サイトが可愛い!これパクりたい!の塊なのでご紹介します。

劇場版オリジナルアニメ『サイダーのように言葉が湧き上がる』公式サイト

http://cider-kotoba.jp/

ぷかぷか浮かんでくる泡が映画のタイトルをよく表していてしかもかわいいです。

自分が管理するサイトに持ってこようと思って写経したら一番手前が泡のレイヤーになってリンクが押せなくなったりしたので困ったなぁと思っていたら

#particles-js {
    pointer-events: none;
}

という記述を見つけて、これで最前列にアニメーションやカンバスを置いても触れなくできるのか!と恥ずかしながら超今更の学びでした。

ゆらゆらとゆっくり動く波も素敵…!

『サイダーのように言葉が湧き上がる』公式サイトcanvasで作った波

フォントも私の好きな小説系明朝体!

ハイライトできたのでこんなWEBフォントあったんだ〜と思ったらHannariでした。存在を忘れていたけどとっても美しいフォントですよね。

YakuHanは初めて知りました。
、。!?〈〉《》「」『』【】〔〕・():;[]
のためのフォントのようです。こんなものもあったのかぁ。書体へのこだわりを感じてさらに好きになりました。誰がデザインしたんだろう。

.introText {
    font-family: YakuHanMPs, Hannari, "Noto Serif JP", "ヒラギノ明朝 ProN W3", "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMincho, serif;
}
Hannariフォント

https://yakuhanjp.qranoko.jp/

canvasモリモリ活用の素敵サイトで、WEBデザインって楽しい!を再認識させてもらいました。素敵なサイトに拍手!

ではでは。