こんにちは。
モンブランの江藤です。
ウン年前に業界に入りずっとコーディングしている私ですが、
未だに担当案件のデザインを見て
これどう組むんだろ….
と思いながら仕事に入ることがあります。
毎回無理じゃねと思いつつ、
なんとか形にできているのが我ながら不思議です。
今回はそんな一味変わったレイアウトのコーディングを紹介しようと思います。
三角形のスライドを左右に分割して２つ表示させてみた
今回ご紹介するサイトはヒゴワンさん
「あやしさも振り切れば面白くなるんじゃないだろうか？」
というコンセプトの元に制作されたプロジェクト。
最初はコーディングを担当するのが誰か決まっていない状態でデザインを確認し、
絶対やりたくねぇ～と心の声が漏れていたところ、
無事担当することになった案件です。
実績ページでも紹介しておりますので、ぜひご覧になってください。
サイト全体変ですが（良い意味で）今回ご紹介するのはこちら
三角形のスライドが左右別々に動いてます。
最初はSVGでマスクをかければできると思ってたんですが、
IE対応するためや、なんやかんやで上手くできず、
得意のゴリ押しでなんとか実装しました。
要素を三角形で表示さたいけどマスクは掛けれない。。
どうしようかな～と考えて考えた結果たどり着いた結論が、、
正方形を45度傾けてひし形にして、半分だけ見せれば正三角形じゃん！！
そう、実はこのスライド正確にはひし型のスライドだったんです。
該当箇所のHTMLソースはこんな感じ。
実際に三角形として見せた方法としては、
まず左右それそれのスライドの長辺を画面幅の半分に合うよう調整します。
ひし形の長辺＝正方形の1辺x√２(ざっくり1.4倍)なので、
50vw x 1.4 ＝ 70vw ですね。
（√とか何年振りだ）
なので左右スライドを囲む「intro_left」「intro_right」にそれぞれ要素の幅、高さを70vwに設定。
そしてtransform: rotate(45deg); で45度に傾けひし形にし、
頂点を真ん中に持ってきたいので、
それぞれ-35vw(要素の半分の幅)ずつ画面外へ動かします。
そのままだと画像自体も45度に傾いてしまうので、
スライドを囲ってる「inr」に transform: rotate(45deg); を設定して、
逆方向へ45度傾けることで画像の角度を0度へ戻します。
そして「intro_left」「intro_right」へoverflow:hidden;を設定することで、
正三角形のマスクが実装できました！
また、今回スライドは「Slick」で実装してます。
通常右から左にスライドしますが、
スライダーとして設定した要素に「dir=”rtl”」を追加、
さらにjs側の設定で「rtl:ture;」を設定してあげることで左から右へのスライドが実現できます。
細かいところは端折っていますが、大体こんな感じで実装できました！
書き方次第で無理矢理こんな形も表現できしまうcssは奥が深いですね～。
IEもサポート終了したし、今後は使わない組み方だと思いますが
「どうにかして形にする」 精神は大事にしたいと思います。
（スマートじゃないし、参考にはなりませんが笑）
派生含め見どころしかないデザインのサイトですので、
是非アクセスしてください〜！