見出し画像

CSSだけで描く、折り紙スタイルの鳥

Yusuke Nakaya

僕の代表作。200点以上の CSS 作品の中から、最も思い出深い "Paper Bird" の紹介です。この折り紙スタイルの鳥には、僕のターニングポイントが刻まれています。

Only CSS: Paper Bird

この作品で使われている CSS テクニックの一部を紹介します。コードは一部抜粋し、簡素化しています。

関節を持つ翼

翼が羽ばたくアニメーションをよりリアルに再現するため、関節表現を取り入れています。まるで、骨があるかのように見せるテクニックです。

<!-- HTML -->

<div class="bird_body">
  <div class="bird_wing_left">
    <div class="bird_wing_left_top"></div>
  </div>
<div>

左翼部分のマークアップです。パーツごとに、要素を入れ子にしています。

/* CSS */

.bird_wing_left {
  position: absolute;
  left: -30px;
  transform-origin: 100% 0;
  animation: wingLeft 1000ms linear infinite alternate;
} 

.bird_wing_left_top {
  position: absolute;
  left: -30px;
  transform-origin: 100% 0;
  animation: wingLeft 1000ms linear infinite alternate;
}

@keyframes wingLeft {
  0% {
    transform: rotateY(-40deg);
  }

  100% {
    transform: rotateY(40deg);
  }
}

それぞれのパーツに transform-origin で回転の支点を指定し、transform: rotateY(); で回転しています。子要素は、次の支点まで移動しています。位置と回転の支点をコントロールして、関節を表現しています。

地面に落ちる影

空を飛んでいる鳥に影を落とすことで、浮遊感や地面の存在を感じられるようにしています。空間を立体的に認識できるようになるテクニックです。

/* CSS */

.sky {
  filter: drop-shadow(0px 150px 10px rgba(0, 0, 0, 0.2));
}

box-shadow プロパティではなく、filter プロパティの drop-shadow を用いて、鳥の影を表現しています。

スピードを感じる風

風のようなアニメーションを鳥の周囲に散りばめて、スピード感を表現しています。鳥はその場から移動していませんが、まるで飛んでいるように錯覚するテクニックです。

<!-- HTML -->

<div class="wind"></div>

1つの要素で風のアニメーションを表現できます。

/* CSS */

.wind {
  position: absolute;
  width: 4px;
  height: 200px;
  overflow: hidden;
}

.wind::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 255, 0.3);
  animation: wind 2000ms linear infinite;
}

@keyframes wind {
 0% {
   transform: translateY(-300px);
 }

 100% {
   transform: translateY(200px);
 }
}

要素に overflow: hidden; を指定し、擬似要素で実体を描きます。実態が表示エリアを通過するようにアニメーションさせ、風を表現しています。あとはこれを複数用意し、ランダムで配置しています。

作品の裏側

2017年。3D Transforms で遊んでいた僕は、CSS だけで 3D モデリングができることに気づきました。スーパーファミコンレベルのポリゴンくらいなら、要素をつなぎ合わせて立体的なキャラクターを再現できそう。しかもアニメーションさせたら絶対楽しい！そんな気持ちで作り始めました。

画像3

鳥をテーマに選んだ理由は、少ないパーツ数で抽象化しても認識しやすく、翼を動かせば飛んでいるように見えると踏んだからです。また、動物なら「静的なものに命を吹き込む」という僕の信条にもうまくマッチしていたのです。

数個の div 要素で組み立てられた、簡素なモデリング。そこからアニメーションで命を吹き込みます。翼に関節を作り、その関節が回転することで、翼の羽ばたきを再現しました。動物的な動きをトレースするため、関節から計画したのです。それぞれの関節の回転角度や timing-function など、違和感なく見えるように時間をかけてチューニングしました。

世界観の構築にも気を払いました。ゲームのような 3D 空間を表現するため、背景や環境を作り込んでいます。鳥の下に落ちる影は、浮遊感や地面、光源を錯覚します。一定方向に吹く風のようなアニメーションは、鳥の飛行やスピード感を錯覚します。これら環境表現は、空間を演出する脇役として、期待以上に効果がありました。こうして "Paper Bird" は生まれました。

空高く飛んだ鳥

僕は毎回、作品を CodePen の公式 twitter アカウントに向けてシェアしていました。もちろん、この "Paper Bird" も。いつか、気づいてくれることを祈って。

ある日、ついにこの "Paper Bird" がピックアップされたのです！めちゃくちゃ嬉しかった！たくさんのハートを得られ、CodePen の人気作品として取り上げてもらえるまでに、空高く飛び立ちました。CodePen 運営チームメンバーが僕のアカウントをフォローしてくれたことをキッカケに、これ以降の作品もよくピックアップしてもらえるようになりました。とても光栄です。僕にとって、とても大切な繋がりが生まれた瞬間でした。

スクリーンショット 2020-06-12 01.20.35

スクリーンショット 2020-06-12 01.21.22

そして "Paper Bird" は文字通り、飛ぶ鳥の勢いそのままに、2017年の CodePen 作品年間ランキングで31位ランクインに入選しました。初めての入選、このときは本当に嬉しかった。アウトプットを継続してきてよかった。

当時、あまり日本人アカウントは見かけなかったので、日本でももっと人気になって欲しいなとも思ったのでした。

出会いを運んだ鳥

この作品にはさらに、後日談があります。それは、Vue Fes Japan 2018 にスポンサーとして参加したときの話。イベント当日、僕は企業ブースに立っていました。

紺のTシャツが僕です。この日の Fes には密かに楽しみがありました。僕が CSS アニメーションのアウトプットを始めたときから尊敬していた Sarah Drasner さんのセッションがあったのです。彼女は CodePen でも多くの素晴らしい作品を投稿されています。Sarah さんの Vue transition が示すアニメーションの話が楽しみでした。

企業ブースといくつかのセッションを楽しんだ Fes の最後に、懇親会にも参加しました。たくさんの業界有名人がいる中、特に居場所があるわけではなかったのでソワソワしていましたが、そこに Sarah さんを見かけたのです。

どうにかして話しかけたいけど、恥ずかしながら、僕は英語がまったくできません。それでも、どうしても話しかけたい！考えてみると、僕は自分の作品が CSS でできていることからスマホでも簡単に再生できることを思い出しました。そしてスマホに表示した "Paper Bird" を名刺がわりに見せながら、勢いだけで挨拶を試みたのです。セッションを楽しみにしていたこと、尊敬していること、それくらいしか伝えられません。とにかく英単語をボロボロと散らかしました...。もう不審者ですよ。

それでも Sarah さんや周囲の人は、にこやかに応えてくれました。そして驚くべきことに、"Paper Bird" を知ってくれていたのです！

「これあなたが作ったの？これ知ってる！すごいね！」と褒めてくれました...感動でした。その瞬間は緊張していてガチガチでしたが、あとになって泣きそうになりました。言葉はほとんど通じなかったけれど、作品を通して少しだけ意思疎通ができた。こんなこともあるんだ、これまでやってきてよかったなぁと、大きな自信に繋がったのでした。

おわりに

僕の作品には、この "Paper Bird" よりも多くのハートを獲得している作品があります。しかし、人生のターニングポイントになる思い出が刻まれたこの作品こそが、永遠に僕の代表作たる所以なのです。

ステータス

Only CSS: Paper Bird
https://codepen.io/YusukeNakaya/pen/BwBgvq

・作成日：2017年9月12日
・ハート：1,000 以上
・ページビュー：37,000 以上
・CodePen The Most Hearted of 2017　31位ランクイン
・CodePen Radio 156　ピックアップ
・CodePen Spark 42　ピックアップ
・Codrops Collective 350　ピックアップ

この記事が気に入ったらサポートをしてみませんか？