わにる.jp HTML5デザインマラソンに参加してきました

HTMLを修正することなくJavaScript/CSSだけで如何にデザインするか、に挑戦するハッカソンに参加してきました。自分は、背景のグラデーションが刻々と変わるjQueryプラグインを作ってみました。ChromeとFirefoxでテストしています。

大会要綱はこちらを参照してください。
わにる.jp HTML5デザインマラソン

休日を丸一日使ったハッカソン形式のわにる.jpは、jQueryブートキャンプHTML5+CSS3ブートキャンプに続き、今回で3回目。

挑戦した内容は「背景をグラデーションにしてアニメーション」。

CSS3でグラデーションやアニメーションが簡単に実現できますが、「じゃあグラデーションをアニメーションできるのか?」と思い立ってやってみたところ、うまくいかない。

  //例えば、これは、じわっと色がかわるが、
  div.solid {
    background-color: #000;
    -webkit-transition: 1s background-color;
  }
  div.solid:hover {
    background-color: #f00;
  }

  //これは、じわっとは変わらない。
  div.grad {
    background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));
    -webkit-transition: 2s background;
  }
  div.grad:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#009), to(#090));
  }

流石に線形の値じゃないとアニメーションは無理か?CSS Variables Module Level 1とかってまだ使えないの?などと逡巡した挙句、まともにやっても無理っぽい気がしてきました。

そこで、

1.背景に2枚のdiv(仮にdiv1/div2と命名)を挟みこむ。
2.div1とdiv2のopacityを交互に0.0から1.0までアニメーションして入れ替える。
3.opacity=0.0になったタイミングで、ランダムのグラデーションを設定する。

という処理をjQueryを使って作成してみました。結果がこのページです。コードは、jquery.gradanim.jsを参照。


デザイナーさんたちとこのようなイベントに参加した感想ですが、デザイナーという人種は本当にすごくて、「餅は餅屋」を思い知らされました。できあがるWebデザインはとてもじゃないけど適いません。
マークアップエンジニア石川さんのHTML/CSSに対する知識の深さと正確さはまじで半端なかった。山形でHTMLで仕事している人は、いますぐ友達になるべき人です。

次回わにる.jpは「jQueryブートキャンプ2&ハッカソン」を企画予定です。興味ある方は、ぜひわにる.jpをウォッチしてください。企画の議論に参加したい方はわにる.jpグループにもお気軽に参加してください。


同じカテゴリのエントリ
ReactとAWSサーバレスアーキテクチャ / JaSST'14 Tohoku参加してきました / JAWS-UG山形 第1回勉強会参加してきました。 / わにる.jp jQueryブートキャンプ2に参加してきました / わにる.jp HTML5デザインマラソンに参加してきました / TDD Boot Camp in 仙台に参加しました / 田沢湖マラソンふりかえり / RubyKaigi2010の感想 / 新庄市:土内廃校プロジェクトに遊びに行ってきました / 第9回わにる勉強会に参加 / dachas×遊部に参加してきました / CSS Nite in Yamagata vol.2 に参加しました / フルマラソンふりかえり / 仙台Ruby親方会議ふりかえり / 歩くことは基本 / 仙台Ruby会議02に参加しました / 書籍紹介:クレイアニメ&人形アニメを作ろう / 日本Androidの会東北支部発信会に参加してきました / 儲かるRuby? / 919スピーカーズに参加してきました / チェリーボーイジャンボリー / 告知:919speakers / 第1回東北情報セキュリティ勉強会の感想 / 上流工程・品質勉強会の感想 / RubyKaigi2009の感想 / エンジニア未来サミット0905を観て / 第7回わにる.jpに参加して / TDC設立1周年記念感想 / おくりびとロケ地ツアーマップ / TDC1周年記念おめ! / 仙台Ruby会議01参加してきました / こっちでも勉強会勉強会しない? / 勉強会をネットで配信することについて / ラストマン戦略 / 庶民によるIT / 酒田Wifi視察 / やる気だしていこう / 第3回wanir.jpに参加して / 惨敗プレゼン / wanirの告知とブログパーツ / 勉強会駆動型発信力増強法 / 山形でもコミュ二ティしましょう / TDC行ってきました / 東北 Developers Community /
コメント

コメントしてください

closed.