HTML
CSS

cssアニメによる立体的な折り畳み

これをcssアニメで!

リンク先の動画にある「折りたたまれた紙」のような演出をcssアニメで実現できないか挑戦してみました。3Dを使わずにシンプルな方法で
https://vimeo.com/83492387

それっぽくできた

メニュー内の文字を折ることはできませんが、それっぽいアニメはできました。オレンジ色のメニューをタップすると隠れていた項目がアニメで表示されます。確認しやすいようにアニメ速度を遅くしています。
折りたたみメニュー(htmlファイル)

簡単なサンプルの作成

仕組みを確認しやすいように簡単なサンプルを用意しました。buttonをタップする毎にメニューが開閉します。
折りたたみメニューの土台(htmlファイル)

ボーダーで台形を描く

擬似的な折り曲げ表現はcssのborder設定を利用しています。以下のリンク先に詳しい説明があります。
Qiita:[CSS] 台形をつくる(角を丸くしてみたり、中に文字を入れてみたり。)

html構成

body内にはbuttonとdiv要素があるだけです。

pf0.html
<button id='btn'>button</button>
<div id="card0_in" class="pf_in"></div>

javaScript構成

開閉アニメはdiv要素にclass属性(open)を脱着することで制御しています。

pf0.html
document.getElementById("btn").addEventListener('click', function(){
    document.getElementById("card0_in").classList.toggle("open");
}, false);

css構成

cssは以下のように記述され初期状態ではpf_inクラスのみで、hightが0のため表示されません。これにopenクラスを付加すると「.pf_in.open」の設定となり、4辺のborder設定を変更しながらheightを100pxに拡げていきます。

pf0.html
.pf_in{
    box-sizing:border-box;
    background-color: #ecb041;
    width: 100%;
    transition: all 1000ms 0s ease-out;

    height: 0px;
    border-bottom: 0px solid rgba(255,255,255,0.1);
    border-top: 0px solid rgba(0,0,0,0.3);
    border-left: 50px solid #000000;
    border-right: 50px solid #000000;
}
.pf_in.open{
    height: 100px;
    border-bottom: 50px solid rgba(255,255,255,0);
    border-top: 50px solid rgba(0,0,0,0);
    border-left: 0px solid #000000;
    border-right: 0px solid #000000;
}

中に文字を表示する

前述の簡単なサンプルでは開閉するdiv要素内にコンテンツを入れるのは難しそうなので、最終的なサンプルでは「折りたたみアニメ」と「表示内容」は別のdiv要素に分けました。
折りたたみメニュー(htmlファイル)

html構成

1行目のcardクラスのdiv要素が簡単なサンプルでのbuttonと同じ役目を持ちます。
4行目のpf_inクラスのdiv要素が簡単なサンプルのメニューと同じ役目を持ちます。
3行目のcardDetailクラスのdiv要素に表示したいコンテンツを設定します。
2行目のpf_outクラスのdiv要素は上記2つをまとめています。

pf.html
<div id="card0" class="card"></div>
<div id="card0_out" class="pf_out">
    <div id="card0_detail" class="cardDetail">Card_0 detail text</div>
    <div id="card0_in" class="pf_in"></div>
</div>

css構成

ポイントは「cardDetailクラスのdiv要素」と「pf_inクラスのdiv要素」を重ねて表示することです。外側をpf_outクラスのdiv要素で囲んでいるので、以下のようにposition設定を利用することができます。

pf.html
.pf_in{
    position: absolute;
    top: 0px;
    right: 0px;
    --以下略--
}
.pf_out{
    position: relative;
    --以下略--
}

javaScriptの構成は少し複雑になっていますが、簡単なサンプルと同様にopenクラスをaddしたりremoveするだけです。

おしまい