こんにちは！

かなり投稿の間が空いてしまいました・・・

今年度後半は、制作会社様から案件をいただけることになったので、案件対応を優先で過ごしてきました。（案件対応で色々とあり、かなり疲労してます💦）

気が付いたらもう年末！

一応💦クリスマス中にさささっと作ったクリスマスカード風サイトがあるので、簡単にですがご紹介させていただきます。

スポンサーリンク

スポンサーリンク

お気に入りのCodePen

あまり時間もないので、一からデザイン～コーディングというのはできなかったので、

最近のお気に入りのCodePenをベースに作ってみました。

カードの回転に合わせてノイズっぽい背景をテキストでクリップしている動き！

どこかで取り入れてみたいと思ってました。

See the Pen Holographic type by Jimmy Chion (@cjimmy) on CodePen.

雪を降らせたい

上記のCodePenにクリスマスらしく、雪を降らせる演出を追加したい！

以下のサイトから雪の結晶のアイコンをSVGでダウンロードして使用させていただきました。

雪の結晶 | アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト

6000個以上のアイコン素材を無料でダウンロードできるサイトICOOONMONO

icooon-mono.com

そして、SVGで雪を降らせる手順は私の大好きなサイトの「フーノページ」様を参考にさせていただきました。

SVG、画面全体に雪を降らせるアニメーション。

ユーザのスクロールに関係なく、画面全体に雪を降らせるSVGアニメーションの作り方。色んな属性を「カスタマイズできる」コードを書きました。そのままコピペもよし、または独自にアレンジして楽しんでください。〽️しくみ。〽️外側のSVG。〽️画像作成、symbol化。〽️ランダム発生。〽️カスタマイズして使おう。

fuuno.net

ななふのクリスマスカード、こんな感じにできました！

かなりシンプルですが、、、

こんな感じにできました！

デモサイトも是非ご覧ください。※レスポンシブ対応してます

Na2factory デモサイト|Christmas2022

Na2factory-demo

na2-factory.com

よいお年を！

クリスマスはあっという間に終わってしまいましたね、

もうすぐ新年ですね。

皆様にとってよい年になります様、お祈り申し上げます。

では～！