CSS3で作るダイナミックな3D表現 (1/2)
ダイナミックに切り替わるページナビゲーション 一見するとシンプルなデザインのサイト「HUMAAN」。その魅力は、細部まで作り込まれたインタラクションにある。中でも目を引くのが、フルスクリーンで展開されるダイナミックな変形アニメーションだ。何気なく下部のメニューをクリックすると、ページ全体が大きく回転しながら切り替わる。その動きが非常に気持ちよく、コンテンツをうまく魅せる素敵な仕掛けだ。 この3D回転は、連載第1回「CSS Transitionsを使った3Dロールオーバーのアイデア」で紹介した3D変形と同じ仕組みで実装されている。今回は、3D回転によるダイナミックなコンテンツ切り替えについて、第1回の記事をヒントに再現してみよう。 STEP 1：3Dの構造を考える 最初に、ページ全体を回転させるため、ウィンドウと同じ大きさの2つの面（div要素）を用意し、transformプロパティで変形さ
マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
「TOKYOテレワークアワード」を募集（1452報）｜東京都
2021年01月15日 東京都新型コロナウイルス感染症対策本部 「TOKYOテレワークアワード」募集のお知らせ（第1452報） 新型コロナウイルス感染症の拡大防止に向けては、人の流れを徹底的に抑えることが必要であり、事業活動との両立を図るため、テレワークを強力に推進することが求められています。 このため都は、緊急事態措置の期間を「テレワーク緊急強化月間」とし、事業者の皆様に「週3日・社員の6割以上」の方のテレワークをお願いしています。また、出勤が必要となる職場でもローテーション勤務や時差出勤等を組み合わせ、「出勤者数の7割削減」を目指すことを要請しています。 このたび、こうした要請を踏まえた事業者の皆様の取組を後押しするため、「東京ルール」宣言企業を対象に、小規模企業やテレワークが導入困難な業種、取引先企業への波及など、モデル的・先進的な事例を「TOKYOテレワークアワード」として表彰する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
