• WORK

  • 2015.12.24

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

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


 

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

xmas

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

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

ABOUT ME

石松 豊 / がちゃーん

デジタルマーケティング会社からweb制作/メディアの会社へ。個人でも音楽マーケティング・クリエイティブ制作の仕事をしています。音楽とインターネットについて考える個人ブログorange plus music運営中。

RELATED

ロックンロールバンドThe Doggy Paddleのホームページリニューアル

2017.10.09

統計研究者「保科 架風」のホームページ制作

2017.09.18

アーティスト小南泰葉さんのホームページ(WordPress)

2017.05.03

退職のご挨拶メッセージを個別に表示するwebサービス

2016.12.01

web+coffee : 今日は「なに」とコーヒーする?

2016.09.17

ミュージシャンのPRを代理する会社『Gerbera Music Agency』

2016.06.19