HTML5を使ったクリスマスデザインのWebサイトまとめ
2014年12月 9日
もうすぐクリスマス!
渋谷や新宿の街並みも、すっかりイルミネーションで彩られてなんだかウキウキする季節になって来ましたね。
今日のブログは、最新技術のHTML5を使ったクリスマスデザインのオシャレなWebサイトをご紹介します。(HTML5ってなあに?という方は、「HTML5徹底リポート」をご覧下さい!)
ではさっそく見てみましょう!
Tiffany & Co
ティファニーのブランドサイトがクリスマス仕様のWebデザインに変わっています。 HTML5のvideoタグの技術でアニメーションを表示しているのですが、そのアニメーションが秀逸。長くても、スピード感があってちっとも見ていて飽きません。
PARCO
こちらもHTML5のvideoタグの技術で動画が表示されています。 動画はCMと同じテーマのため、見たことがある人にとってはイメージを持ちやすいですね。
HeartLink Christmas
横浜のジョイナス&ザ・ダイヤモンドのクリスマスイルミネーションのための特設サイト。 背景の画像がちょこちょこ動くのと、スクロールに合わせてアニメーションが動くのがなんとも可愛くてステキです。
ROPPONGI HILLS ARTELLIGENT CHRISTMAS 2014
六本木ヒルズのクリスマス特設サイト。
videoタグのアニメーション効果がイルミネーションを彷彿とさせて楽しいです。リンクのマウスアウト時のグラデーションを使った変化や、スクロールするとヘッダーが変化するなど、細かいところに工夫が見られます。
ChristmasCollection 2014 | agete(アガット)
HTML5とJavaScriptを活用した特設サイトに仕上がっています。
上記特設ページだけでなく、本サイトのトップページもクリスマス仕様になっているのですが、そちらはvideoタグで動画が表示されています。
Christmas Selection 2014 | FRANCK MULLER
まるでFlashのような滑らかなアニメーション!
しかも、パララックス効果(複数の画像のスクロールするスピードを調整することで、奥行きのある立体的な空間を生み出すアニメーション効果)を使って、よりクリスマスらしい雰囲気が演出されています。
HTML5を活用したクリスマス仕様のWebデザイン、いかがでしたでしょうか?
季節限定のWebサイトデザインを見れるのは今だけ。
楽しみながら、Webデザインのスキルアップに役立てちゃいましょう☆
本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。 スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。