【web制作(趣味)】javascriptで雪が降るクリスマスパーティの招待状サイト

web制作

xmas

友人とわいわい企画して遊んだクリスマスパーティの招待状サイトを作成しました。

制作期間はほぼ1日。タイトルのアニメーションと雪降るjavascriptが今回の工夫点です。
ツリー雪だるまの素材はicooon-monoから利用させて頂いております。
 
サイト:Xmas Party
 
 

タイトル文字の手書き風アニメーション

 
xmas
 
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の状況なども踏まえつつきちんと動く方で実装頂ければと思います。
 
 

1年の中にある行事やイベントは年々気がつくと終わっていて、関心が薄くなっている自分に気がつきました。でも季節があることは本来楽しむべきものであってほしい。だから仲間内で楽しめる場を設けたいと思って実施した今日でした。居酒屋や宅飲みとはまた違う感覚。楽しめました。 #christmas#party#present#dinner#season#winter#cheer

Kazuma Hattoriさん(@kazuma_hattori)が投稿した写真 –


こちらは友人のインスタより拝借。パーティは貸しキッチンのある都内某所で行いました。
料理やケーキをみんなで作りつつ、好きな音楽の話をしたり、プレゼント交換をしたり。楽しい時間でした。
 
サイト:Xmas Party

xmas

この記事が気に入ったら
いいね!しよう

orange plus music
の最新情報をお届けします

このブログを書いている人
石松 豊 (がちゃーん)

デジタルマーケティング会社からweb制作/メディアの会社へ。個人でも主に音楽関連の広告やサイト制作の仕事をしています。インターネットで音楽をもっとおもしろくしたい。

そのほか情報やご連絡はABOUTページからどうぞ。

profile

広告