タイル+モバイルWebフレームにリッチなコンテンツ表示効果をつけてみました

    こんばんは。漢鷹です。

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

    前々回の記事
    タイルデザインからモバイルデザインに変化するWebフレームを作ってみました~HTML5+CSS3 編~

    チームラボ / teamLab」というWebサイトを参考に、
    上記2つの記事で作成したWebフレームとそれに追加するアニメーションを組み合わせ、アニメーションのタイミングを「スクロールしてコンテンツが見えたとき」に合わせてjavascriptで制御し、完成させてみました。

    以下の特徴があります。

    • レスポンシブWebデザインでタイル表示とモバイル表示切り替え
    • コンテンツをアニメーション表示
    • スクロールして、コンテンツが見えてきたときアニメーション表示するよう制御
    • ブレークポイントをまたいだときにもアニメーションが制御されるよう、参考にしたWebサイトからロジックを改善
    • アニメーション制御するjavascriptソースはjQueryでプラグイン化し、使いまわせるように構成

    完成したサンプルは以下のURLから見ることができます。
    http://kimswebinfo.html.xdomain.jp/webdevelop/tile_responsive/index_v0.3.html

    ソースは以下のものになります。

    似たカテゴリーの投稿