CSS3アニメーションとメディアクエリでリッチなコンテンツ表示効果を作ってみました

    こんばんは。漢鷹です。

    タイルデザインからモバイルデザインに変化するWebフレームを作ってみました~HTML5+CSS3 編~
    本日の投稿はこちらの記事の続きです。

    参考にした「チームラボ / teamLab」というWebサイトの
    大まかなタイルとモバイルのレスポンシブWebデザインができたところで、今度はそのタイルコンテンツに付け加えられているアニメーションを実装して同じようにリッチな表現を実現したいと思います。
    ということで、まずソース解析を行ってみました。

    サイトのソースを見てわかったこと

    1. スクロールしたときにアニメーションが発生している
    2. アニメーション動作はjavascriptではなくCSS3のアニメーションで実現している
    3. アニメーションエフェクトはフェードインとスライドインの2つ
    4. CSSのメディアクエリは「デスクトップファースト(max-widthパターン)」

    サイトのCSSを参考に2時間ほどの突貫工事で作ったのが下記のURLのページとなります。
    いろいろと至らない点がありますが、「ふーんなるほど。そうやって動かすのか。」というのがわかってくると思います。

    作ったページ
    http://kimswebinfo.html.xdomain.jp/webdevelop/tile_responsive/index_v0.2.html

    それにしても、漢鷹にとって今回のコーディングは久々に勉強になりました。
    CSS3をもっと勉強したくなりました。
    作りこみするとすごくモダンな動きや3Dオブジェクトが作れるようです。

    さて、今回作ったHTML5+CSS3のソースについては下記のような特長を持たせました

    1. HTMLでボタンを作って、onclickイベントハンドラを実装
    2. jQueryを用いて、ボタンクリックでアニメーションをリピートして動作を確認できるようにした
    3. ヘッダの文字列はメディアクエリで、画面幅が変わったときに変わるようにした

    ※CSSのメディアクエリは「モバイルファースト」に等価変換しております。
     そのときのアニメーションの動きについては基本的に同じですが、
     ところどころ、プロパティを変更し、等価変換後のCSSプロパティの最適化を図っています。

    ※「index_v0.1.html」と「style_v0.1.css」のソースは記事の長さの関係上、割愛させていただきました。

    似たカテゴリーの投稿