2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で

はじめまして！ぺちこと申します。 パンダと戯れておりますが、うさぎとぺんぎんが大好きな酒呑みです。違います、デザイナーです。よろしくお願いします。 みなさんは2008年から毎年開催されているWebクリエイターの祭典「dotFes（ドットフェス）」をご存知でしょうか？2013年は11月10日（日）に京都で開催されます。 台東区から京都はちょっと（だいぶ）遠いのですが、アイディア満載の空間で刺激を受けられるだけでなく、京都の紅葉を拝めるかもしれないので、遠征する価値は大いにあるはず！紅葉シーズンなので新幹線の予約はお早めに。 このdotFes2013のセッションで、AdobeのAndy Hall氏がAdobeのあたらしい開発ツール群として「Edge」を紹介されるとのことで、どうせ行くなら予習しなければ！と思い立ち「Edge Animate」を使ってみました。この「Edge Animate」、F