ラック
Home > ブログ > 記事 > 2016年4月 > ナナメノデモ

ナナメノデモ

カテゴリ:

とある会社のサイトを見て格好良かったので、それをどのようにすれば実装できるのか実験してみました。

全体としてはjQueryのプラグイン「fullPage.js」を使用して横スクロールを実現しているようなので、同じもので横スクロールを実装。参考は以下。

ただし、ファーストビューはスライドショーになっているため、それがfullPage.jsの1枚目で隠れないように少し細工を。

 

次に、ナビゲーションバーや背景画像が斜めに配置されているので、その部分を実装。この部分の参考は以下。なお、上記fullPage.jsの使用以外は自分で方法を模索しながらトライアンドエラーで。

今回はtransform: skewXを使いました。

入れ子のdivで、親はskewX(-30deg)、子はskewX(30deg)で傾きを元に戻して背景や文字が歪まないように調整。

 

ナビゲーションバーはただの背景色なので疑似要素beforeでskewX(-30deg)をかけてしまっていますが。

 

あとはvh, vwを上手く使ってネガティブマージン指定したりしてナビゲーションバーと3枚目のスライドの斜めの境界線が一致するように調整したり。

 

なお、斜めにしている都合上、次のスライドが今のスライドの右下部分に食い込む、あるいは前のスライドが今のスライドの左上に食い込む、ということも起こり得ますがその辺りは今回作ろうと思ったきっかけのサイトでもそのままでしたし、どうにも調整が上手く効かなさそうな感じだったのでここは技術よりもデザインでカバーなのかな、と。

 

こういう構造、面白いですね。

タグ:

 



関連する記事一覧