インターン募集とCSSアニメーション

http://www.hatena.ne.jp/company/intern2010/
本日より、2010年度のインターンの募集が始まりました。この募集ページ一見普通のページですが、大きく分けて5カ所に分かりやすい遊びを仕込みました。Safariなどでアクセスして、気になる所をクリックするとお楽しみ頂けます。動きはhtmlのclass名を変化させる事によるCSSで実現させてます。場所毎に少し具体的に解説しておきます。

右上のバッジ

単純回転です。最初1周5秒にしてたら、酔うとの意見を頂いたwので倍の10秒になっております。Chromeでも回ります。

h1 img.sun{
  -webkit-animation: sunRoll 10s infinite linear;
}

@-webkit-keyframes sunRoll {
  from { -webkit-transform: rotate(0); }
  to   { -webkit-transform: rotate(-360deg); }
}

タイトル

英語だけだと何だなーと思ってたので、クリックしたらトグルするようにしました。ここは画像を重ねてopacityを変化させてます。Firefoxだと、切り替わる変わるだけです。

h1 img.title_jp,
h1 img.title_en {
  position: absolute;
  top: 0;
  left: 0;
}

h1 img.title_en{
  opacity: 1;
 -webkit-transition: opacity 2s;
}

h1.h1_en img.title_en {
  opacity: 0;
}

過去のインターン写真

重なった写真が広がるアニメーションです。リスト表示をtransformで重ねているので、IE等では、そのままリストとして表示されます。写真の上に、透過GIFをかぶせる事でスイッチ代わりにしていて、クリックすると以下でいう.before_containerが挿入され、指定しておいた、transformがクリアされます。

ul.fotoList li a {
 -webkit-transition: -webkit-transform 2s;
}

ul.fotoList li:nth-child(1) a {
  z-index:1; 
 -webkit-transform: rotate(-5deg) translate(0,-125px);
 -moz-transform: rotate(-5deg) translate(0,-125px);
}
・・・
ul.fotoList li:nth-child(4) a {
  z-index:4; 
 -webkit-transform: rotate(-2deg) translate(0,-578px);
 -moz-transform: rotate(-2deg) translate(0,-578px);
}

div.before_container div#before_box ul.fotoList li a {
 -webkit-transform:rotate(0deg) translate(0, 0);
 -moz-transform:rotate(0deg) translate(0, 0);
}

インターン概要

3D（translateZ）を使って回転すると隠れてる裏面が表示されます。Chromeだと単純に回るのみで背面の情報を見えません。後地味に反射（reflect）もCSSです。もう1つ地味にh2部分右側の抜きはmask使ってます…。

div.place_container div#placeBody {
  -webkit-animation: rotatePlate 6s infinite linear;
  -webkit-transform-style: preserve-3d;
}

div.place_container div#placeBody img{
  -webkit-box-reflect: below 2px url(/images/intern2010/s2_3_refrect.png);
}

div.place_container div#placeBody div.front {
  -webkit-transform: translateZ(1px);
}

div.place_container div#placeBody div.back  {
  -webkit-transform: translateZ(-1px) rotateY(-180deg);
}

@-webkit-keyframes rotatePlate {
  from { -webkit-transform: rotateY(0); }
  to   { -webkit-transform: rotateY(-360deg); }
}

ご応募お待ちしております

最後です。#containerが幕を下ろしていき、中から最後の挨拶です。やってる事は単純で#containerの後ろから現れるのはbodyの背景画像です。ちなみにmedia queryなどちゃんと対応はしてませんが、一応iPadに最適サイズです。

div#container {
  -webkit-transition: -webkit-transform 10s ease-out;
}

div#container.container_scroll {
  -webkit-transform: translate(0px, 3300px);
}

ブラウザ毎に切り替えてCSSの出し分けなど行ってなおらず、独自のプロパティやセレクタなんかを使って、情報量やレイアウトを大きく崩さず見せるようにしています。（プログレッシブ・エンハンスメント？）

CSSアニメーションサンプル事例を最近よく見かけてたので、試しにデザイン面での見せ方の変化を中心に事例集ぽく実践投入させてみました。今後はもっと利用範囲は広がりそうですし、アイデア次第でコンテンツの見せ方を工夫できそうです。

http://www.hatena.ne.jp/company/intern2010/
という事で、というか本題ですが、デザイナーもインターンを募集しておりますので、興味がある方は是非ご覧ください。

tikeda's blog

Flower, Plant, Travel, Design, My life stories