友人とわいわい企画して遊んだクリスマスパーティの招待状サイトを作成しました。
制作期間はほぼ1日。タイトルのアニメーションと雪降るjavascriptが今回の工夫点です。
ツリー雪だるまの素材はicooon-monoから利用させて頂いております。
サイト：Xmas Party
タイトル文字の手書き風アニメーション
LIGのこの記事を参考に、SVGファイルを使って文字を書いているかのようなアニメーションを作成しました。
※参考： SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG
SVGファイルはAdobe Illustratorくらいでしか作成できないファイル形式みたいで。会社の共有PCでサクッと文字データを作成しました。
その後LAZY LINE PAINTERというwebサイトにファイルをアップし、吐き出してくれるコードを貼り、スピードや色を調整すると完成。
イラレさえあれば手間をかけずに実装できるので、今回のように特別感のあるサイトにしたい時や、テキストを目立たせたい時などに活用できそうです。
雪が降るjavascript
検索してもいくつが雪が降るjavascriptは出てきますが、いい感じのがなかったのでオリジナルに作成しました。
「左右に不自然に動かない」「時間や位置などがランダム」「永久に続く」あたりが今回したかったことです。
■html
htmlはシンプルにdivひとつ。
■CSS
CSSはアニメーションを活用します。それぞれの雪で速度を動的に（ランダムに）変えかった点や、その他動かしてみての都合で一部はjavascript内にCSSを記載しています。なので上記は透明度と上から下に移動することしか書かれていません。
■javascript
ここで、雪を作成したり、雪の降るスピードや位置を調整したりしています。
それぞれの雪には「flake」で番号が付けられ、更にランダムにclassを振り分けた「yukis」と「yukil」で小さい雪と大きい雪を作成します。
その後、それぞれの「flake〜」に対して「左からの位置」を0から100%の中からランダムに。
また「animation-duration」で「雪が降るスピード」を、今回は最低C=40sから最大90sの中でランダムに。
更に「animation-delay」でそれぞれの雪が降り始める時間に最大90sで時間差を。
「//あわせて雪のcssも記載」以降はCSS内に記載したい内容ですが、今回は動作の関係でjavascriptに記載しています。もし参考にされる際は、他のscriptの状況なども踏まえつつきちんと動く方で実装頂ければと思います。
こちらは友人のインスタより拝借。パーティは貸しキッチンのある都内某所で行いました。
料理やケーキをみんなで作りつつ、好きな音楽の話をしたり、プレゼント交換をしたり。楽しい時間でした。
サイト：Xmas Party
Follow Twitter
orange plus musicの最新情報は
Twitterをフォロー！
Follow Spotify
おすすめの穏やかな音楽を
Spotifyプレイリストで発信中！
Related
関連記事
