【年賀状】年末年始の挨拶に使える！？アニメーション！

2018年も今年残りあとわずか。
そろそろ年末年始の挨拶について考え始める時期です。

Webサイトに挨拶を載せたり、年賀メールを送ったり、Web担当の人なんかはイベントを考えたりと大変ですよね。
そこで、年末年始のイベントに向けて使える装飾やアニメーションを集めてみました。

ブログに載せるもよし、サイトの一部に載せるもよし、年賀メールに載せるもよし、年賀状にQRコードを載せて一味違う年賀状にするもよしです！
これを使えば一味違った挨拶になること間違いなしです。

今回もCodepenからいくつかハイセンスな挨拶を集めました。ぜひ参考にしてみてください。

New Year 2018

See the Pen New Year 2018 by Namina Kiky (@Indzign) on CodePen.0

Happy New Yearの文字と一緒に花火が上がります。新年らしく華やかです。

Happy New Year 2018 !

See the Pen Happy New Year 2018 ! by Nexcomm (@Fisherman-63) on CodePen.0

こちらも花火系のアニメーション。さっきのよりもすこしシンプル目です。

Smiles Davis, Happy New Year from Mutual of Omaha Retirement Services

See the Pen Smiles Davis, Happy New Year from Mutual of Omaha Retirement Services by Really Good Emails (@reallygoodemails) on CodePen.0

引き続き花火系。夜空に花火が打ちあがっています。

Happy New year 2018

See the Pen Happy New year 2018 by Hasnain Karim (@h26k2) on CodePen.0

時計がくるくると回るタイプのアニメーション。ソースを見ていただければわかりますが、htmlとCSSで書かれています。

SVG : HAPPY NEW YEAR

See the Pen SVG : HAPPY NEW YEAR by Reiko Igo (@igoreiko) on CodePen.0

よくあるSVGのやつですね。シンプルでおしゃれに見えるので良いです。もちろんhtmlとCSSのみで書かれています。期間中だけローディングとして使用するのもいいのではないでしょうか。

Happy New Year!

See the Pen Happy New Year! by Thea (@HighFlyer) on CodePen.0

ハロウィンのような装飾です。電飾もですが、フォントも可愛らしいですね。イラスト多めのサイトなどにぴったりです。

Happy New Year 2018

See the Pen Happy New Year 2018 by Chandra Shekhar (@chandrashekhar) on CodePen.0

ポップなタイプのご挨拶。かわいいです。こちらもhtmlとcssのみ。文字はフォントで書かれているので2018を2019に変えれば今年も使えます。

christmas tree

See the Pen christmas tree by Oleg Frolov (@Volorf) on CodePen.0

クリスマスツリーと新年のあいさつが一緒になっています。そんなにモミの木感のないイラストなので、そのまま使えそう。シンプルで可愛らしいです。

Only CSS: Happy New Year 2018

See the Pen Only CSS: Happy New Year 2018 by Yusuke Nakaya (@YusukeNakaya) on CodePen.0

一見ブロックが並んでいるだけに見えます。マウスを動かしてみると…？

Happy New Year! From WAW

See the Pen Happy New Year! From WAW by Web Animation Workshops (@WAW) on CodePen.0

オシャレ感のある挨拶です。飲食店の挨拶にぴったりですね。

HAPPY NEW YEAR !

See the Pen HAPPY NEW YEAR ! by Laurent Heneman (@manheman) on CodePen.0

何故かイエティからの新年のあいさつ笑　寒い地域や山のほうの人からこんなあいさつが来たらつい微笑んでしまいますね。

happy new year | Pure CSS

See the Pen happy new year | Pure CSS by Marcela Bomfim (@cecelabomfim) on CodePen.0

風船が年を持っていきます。こちらもhtmlとcssのみで構成。しかも2016と2017はフォントで作られているので、こちらも数字を変えれば今年版として利用できます。

happy new year 2016

See the Pen happy new year 2016 by ashish jangra (@techdesign) on CodePen.0

シンプルにhappy new yearだけのアニメーション。西暦に縛られないので使いやすいですね。

Weekly Animation 2 – Happy New Years

See the Pen Weekly Animation 2 – Happy New Years by Sean (@nevernotsean) on CodePen.0

時計が0時を回ると乾杯します。シンプルでもおしゃれです。なんとなく大人っぽい雰囲気がしますね。

Happy New Year!

See the Pen Happy New Year! by Jonas Sandstedt (@sandstedt) on CodePen.0

花火系ですが、背景に山があってなんとなく日の出を連想させます。星もちょっとずつ動いて細かいところまで作られています。

まとめ

さすがはCodePen！
高レベルなアニメーションがそろってますね。いつもお世話になってます。

新年のあいさつめんどくさい！と思いがちですが、今年はちょっとだけひと手間加えて、一味違う新年のあいさつをしてみてはいかがでしょうか！